Skip to content

Add seriesLabels prop to LineChart for translatable tooltip series names#457

Merged
ravindrakele merged 18 commits into
stagingfrom
feat/line-chart-series-labels
Jun 10, 2026
Merged

Add seriesLabels prop to LineChart for translatable tooltip series names#457
ravindrakele merged 18 commits into
stagingfrom
feat/line-chart-series-labels

Conversation

@ravindrakele

@ravindrakele ravindrakele commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

What

Adds an optional seriesLabels prop to LineChart:

<LineChart
    dataKeys={ [ 'impressions', 'clicks' ] }
    seriesLabels={ { impressions: 'Impressionen', clicks: 'Klicks' } }
/>

Each label is passed as the name prop to the recharts <Line>, so the tooltip shows the readable label instead of the raw data key.

Why

The tooltip currently derives series names from dataKeys (payload.name || payload.dataKey, with name never set). Consumers cannot translate or customize them, which causes i18n bugs like brainstormforce/surerank#1622 — the GSC graph tooltip shows English "impressions" / "clicks" on non-English sites.

Notes

  • Fully backward compatible: without the prop, name is undefined and recharts/tooltip fall back to the data key as before.
  • AreaChart, BarChart, and PieChart have the same limitation (for Bar/Area it also affects legend labels). Can extend the same prop there in a follow-up if preferred.

Consumer PR

SureRank: brainstormforce/surerank#2598

@ravindrakele ravindrakele requested a review from jaieds June 10, 2026 14:45
@ravindrakele ravindrakele changed the base branch from master to staging June 10, 2026 14:45
@ravindrakele ravindrakele mentioned this pull request Jun 10, 2026
10 tasks
jaieds added 15 commits June 10, 2026 20:57
Adds auto-height adjustment to the TextArea component. When `autoResize`
is enabled, the textarea grows with its content using scrollHeight and
stops at the optional `maxHeight` cap (defaulting to 160px), at which
point it becomes scrollable. `minHeight` and `maxHeight` are applied as
CSS constraints regardless of `autoResize`. Also extends the props type
to include native textarea HTML attributes.
Update MCP setup command URL from GitHub Pages endpoint to the correct production URL (forceui.brainstormforce.com/mcp).
[SUR-675] [Force-UI] Add the props for text field to auto adjust height dynamically as per the text
Apply the unmerged Lexical Shadow DOM fix (facebook/lexical#7790) via
patch-package over registry lexical@0.38.2, and fix the mention plugin's
Shadow-DOM-unsafe assumptions:

- Port LexicalTypeaheadMenuPlugin locally to restore the menuRenderFn API
  removed in lexical 0.38 (keeps the custom EditorCombobox + public
  menuComponent/menuItemComponent props).
- Give each mention option a unique key (was '' for all), fixing keyboard
  nav, highlighting and the duplicate-key warning.
- Use event.composedPath() for outside-click detection and shadowRoot
  .activeElement for blur, so clicks inside the menu aren't misread across
  the shadow boundary.
- preventDefault on item/menu mousedown so the editor keeps selection on
  click (otherwise the mention can't be inserted).
- Portal the menu into the editor's shadow root so its styles apply.
- scrollIntoView the highlighted option directly (the #typeahead-menu
  document lookup is null in Shadow DOM).
- Match dropdown width to the editor (border-box, 100%).
- Add InsideShadowDom story mounting via a real nested React root.
…typeahead anchor

Typing in consumers mounting many EditorInputs (e.g. SureRank metabox)
lagged badly (~300ms/keystroke, multi-second main-thread tasks). Two
compounding causes, both fixed here:

- Accordion: the accessibility rework kept collapsed Accordion.Content
  children mounted (aria-hidden), so consumers with heavy panel content
  (Lexical editors) mounted everything up front and re-rendered it all
  on every keystroke. Keep the ARIA region element in the DOM so the
  trigger's aria-controls/aria-labelledby still resolve, but unmount the
  children via AnimatePresence while collapsed, as before v1.7.11.

- EditorInput typeahead: the ported menu plugin created an anchor div on
  every render and appended it to document.body during render at every
  mount, forcing style recalcs per editor mount/unmount on heavy pages
  (and risking leaked divs from discarded renders). Create the anchor
  lazily and append it only when the menu actually opens.

Also memoize the mention trigger regexes per trigger and bail out of
setMenuParent when the shadow-root parent is unchanged, trimming the
per-keystroke render path.

Measured in the SureRank metabox repro: a fast-typed sentence went from
a 15.3s main-thread task (~333ms/keystroke) to 0.38s total, with
collapsed sections back to mounting zero editors.
…ention

fix(editor-input): support Lexical mention menu in Shadow DOM

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! ✅ The PR looks solid with no security or performance issues.

Please make sure to resolve any remaining comments if any. Approved 👍

@ravindrakele ravindrakele merged commit ae2932a into staging Jun 10, 2026
6 of 7 checks passed
jaieds pushed a commit that referenced this pull request Jun 11, 2026
…abels

Add seriesLabels prop to LineChart for translatable tooltip series names
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants