-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
[charts-pro] Add keyboard navigation to heatmap #20786
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Deploy preview: https://deploy-preview-20786--material-ui-x.netlify.app/ Updated pages: Bundle size report
|
CodSpeed Performance ReportMerging #20786 will not alter performanceComparing Summary
|
| ? DefaultizedProps<ChartsSeriesConfig[T]['itemIdentifier'], 'dataIndex'> | ||
| : ChartsSeriesConfig[T]['itemIdentifier']; | ||
| : T extends 'heatmap' | ||
| ? DefaultizedProps<ChartsSeriesConfig[T]['itemIdentifier'], 'xIndex' | 'yIndex'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it required because we can't focus on series? 🤔
Should this be a series config type so instead of this we would just have export type FocusedItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier']?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, basically like the fact dataIndex is required for lines and radar. We can focus on values not entire series. But to navigate on empty cells I need to make x/y indexes required instead of the dataIndex
I assume you mean ChartsSeriesConfig[T]['focusedItemIdentifier']. Yes, that would be a nice simplification. But would prefer to do that in a dedicated PR
This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@mui/x-charts](https://mui.com/x/react-charts/) ([source](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts)) | dependencies | minor | [`8.24.0` → `8.25.0`](https://renovatebot.com/diffs/npm/@mui%2fx-charts/8.24.0/8.25.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/mui/mui-x) | | [@mui/x-tree-view](https://mui.com/x/react-tree-view/) ([source](https://github.com/mui/mui-x/tree/HEAD/packages/x-tree-view)) | dependencies | minor | [`8.24.0` → `8.25.0`](https://renovatebot.com/diffs/npm/@mui%2fx-tree-view/8.24.0/8.25.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/mui/mui-x) | | [prettier](https://prettier.io) ([source](https://github.com/prettier/prettier)) | devDependencies | minor | [`3.7.4` → `3.8.0`](https://renovatebot.com/diffs/npm/prettier/3.7.4/3.8.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/prettier/prettier) | --- ### Release Notes <details> <summary>mui/mui-x (@​mui/x-charts)</summary> ### [`v8.25.0`](https://github.com/mui/mui-x/blob/HEAD/CHANGELOG.md#8250) [Compare Source](mui/mui-x@v8.24.0...v8.25.0) <!-- generated comparing v8.24.0..master --> *Jan 14, 2026* We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨: - 📊 The Chart legend now has an option that enables [click to toggle visibility](https://mui.com/x/react-charts/legend/#toggle-visibility) of series.  - 🐞 Bugfixes - 📚 Documentation improvements The following team members contributed to this release: [@​alexfauquette](https://github.com/alexfauquette), [@​arminmeh](https://github.com/arminmeh), [@​bernardobelchior](https://github.com/bernardobelchior), [@​cherniavskii](https://github.com/cherniavskii), [@​JCQuintas](https://github.com/JCQuintas), [@​mapache-salvaje](https://github.com/mapache-salvaje), [@​rita-codes](https://github.com/rita-codes), [@​Janpot](https://github.com/Janpot) ##### Data Grid ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### `@mui/[email protected]` [](https://mui.com/r/x-premium-svg-link "Premium plan") Same changes as in `@mui/[email protected]`. ##### Date and Time Pickers ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### Charts ##### `@mui/[email protected]` - \[charts] Add Legend actions ([#​20404](mui/mui-x#20404)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Add `initialHiddenItems` prop to set initial state ([#​20894](mui/mui-x#20894)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Control the item tooltip ([#​20617](mui/mui-x#20617)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Export plugins from premium ([#​20866](mui/mui-x#20866)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Fix node anchor on iOS ([#​20848](mui/mui-x#20848)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Fix test inconsistency in charts ([#​20907](mui/mui-x#20907)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Revert `touch-action: pan-y` removal when zoom is disabled ([#​20852](mui/mui-x#20852)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts] Use React event handler to detect pointer type ([#​20849](mui/mui-x#20849)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Enable keyboard navigation in radar chart ([#​20765](mui/mui-x#20765)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Fix tooltip position for stacked line series ([#​20901](mui/mui-x#20901)) [@​alexfauquette](https://github.com/alexfauquette) ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`, plus: - \[charts-pro] Add keyboard navigation to funnel ([#​20766](mui/mui-x#20766)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Add keyboard navigation to heatmap ([#​20786](mui/mui-x#20786)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Add keyboard navigation to sankey ([#​20777](mui/mui-x#20777)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Prefer global pointer interaction tracker in Heatmap ([#​20697](mui/mui-x#20697)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts-pro] Support composition for Sankey ([#​20604](mui/mui-x#20604)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Fix crash when two same-direction axes have a zoom preview ([#​20916](mui/mui-x#20916)) [@​bernardobelchior](https://github.com/bernardobelchior) ##### `@mui/[email protected]` [](https://mui.com/r/x-premium-svg-link "Premium plan") Same changes as in `@mui/[email protected]`, plus: - \[charts-premium] Add `ChartContainerPremium` ([#​20910](mui/mui-x#20910)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts-premium] Fix `ChartDataProviderPremium` tests ([#​20868](mui/mui-x#20868)) [@​bernardobelchior](https://github.com/bernardobelchior) ##### Tree View ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### Codemod ##### `@mui/[email protected]` Internal changes. ##### Docs - \[docs] Fix Waterfall Chart documentation badge from Pro to Premium ([#​20888](mui/mui-x#20888)) [@​Copilot](https://github.com/Copilot) - \[docs] Fix broken links on Data Grid Editing sub-pages ([#​20911](mui/mui-x#20911)) [@​arminmeh](https://github.com/arminmeh) - \[docs] Increase chart axis size in docs to fit in Ubuntu Firefox ([#​20844](mui/mui-x#20844)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[docs] Simplify heatmap zoom demo ([#​20851](mui/mui-x#20851)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[docs] Revise the Charts Composition doc ([#​20032](mui/mui-x#20032)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Revise the Charts Localization doc ([#​20800](mui/mui-x#20800)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Revise the Charts Stacking doc ([#​20830](mui/mui-x#20830)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Fix broken links ([#​20914](mui/mui-x#20914)) [@​Janpot](https://github.com/Janpot) ##### Core - \[code-infra] Fix `material-ui/disallow-react-api-in-server-components` ([#​20909](mui/mui-x#20909)) [@​JCQuintas](https://github.com/JCQuintas) - \[code-infra] Prepare for v9 ([#​20860](mui/mui-x#20860)) [@​JCQuintas](https://github.com/JCQuintas) - \[code-infra] Update codeowners ([#​20886](mui/mui-x#20886)) [@​JCQuintas](https://github.com/JCQuintas) - \[internal] Remove local Claude settings from the repo ([#​20853](mui/mui-x#20853)) [@​cherniavskii](https://github.com/cherniavskii) </details> <details> <summary>prettier/prettier (prettier)</summary> ### [`v3.8.0`](https://github.com/prettier/prettier/blob/HEAD/CHANGELOG.md#380) [Compare Source](prettier/prettier@3.7.4...3.8.0) [diff](prettier/prettier@3.7.4...3.8.0) 🔗 [Release Notes](https://prettier.io/blog/2026/01/14/3.8.0) </details> --- - [ ] <!-- rebase-check -->If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi44NC4yIiwidXBkYXRlZEluVmVyIjoiNDIuODQuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsiZGVwZW5kZW5jaWVzIiwicmVub3ZhdGUiXX0=--> See merge request swiss-armed-forces/cyber-command/cea/loom!253 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com>
chore(deps): update frontend dependencies (minor) (minor) This MR contains the following updates: | Package | Type | Update | Change | OpenSSF | |---|---|---|---|---| | [@mui/x-charts](https://mui.com/x/react-charts/) ([source](https://github.com/mui/mui-x/tree/HEAD/packages/x-charts)) | dependencies | minor | [`8.24.0` → `8.25.0`](https://renovatebot.com/diffs/npm/@mui%2fx-charts/8.24.0/8.25.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/mui/mui-x) | | [@mui/x-tree-view](https://mui.com/x/react-tree-view/) ([source](https://github.com/mui/mui-x/tree/HEAD/packages/x-tree-view)) | dependencies | minor | [`8.24.0` → `8.25.0`](https://renovatebot.com/diffs/npm/@mui%2fx-tree-view/8.24.0/8.25.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/mui/mui-x) | | [prettier](https://prettier.io) ([source](https://github.com/prettier/prettier)) | devDependencies | minor | [`3.7.4` → `3.8.0`](https://renovatebot.com/diffs/npm/prettier/3.7.4/3.8.0) | [](https://securityscorecards.dev/viewer/?uri=github.com/prettier/prettier) | --- ### Release Notes <details> <summary>mui/mui-x (@​mui/x-charts)</summary> ### [`v8.25.0`](https://github.com/mui/mui-x/blob/HEAD/CHANGELOG.md#8250) [Compare Source](mui/mui-x@v8.24.0...v8.25.0) <!-- generated comparing v8.24.0..master --> *Jan 14, 2026* We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨: - 📊 The Chart legend now has an option that enables [click to toggle visibility](https://mui.com/x/react-charts/legend/#toggle-visibility) of series.  - 🐞 Bugfixes - 📚 Documentation improvements The following team members contributed to this release: [@​alexfauquette](https://github.com/alexfauquette), [@​arminmeh](https://github.com/arminmeh), [@​bernardobelchior](https://github.com/bernardobelchior), [@​cherniavskii](https://github.com/cherniavskii), [@​JCQuintas](https://github.com/JCQuintas), [@​mapache-salvaje](https://github.com/mapache-salvaje), [@​rita-codes](https://github.com/rita-codes), [@​Janpot](https://github.com/Janpot) ##### Data Grid ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### `@mui/[email protected]` [](https://mui.com/r/x-premium-svg-link "Premium plan") Same changes as in `@mui/[email protected]`. ##### Date and Time Pickers ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### Charts ##### `@mui/[email protected]` - \[charts] Add Legend actions ([#​20404](mui/mui-x#20404)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Add `initialHiddenItems` prop to set initial state ([#​20894](mui/mui-x#20894)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Control the item tooltip ([#​20617](mui/mui-x#20617)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Export plugins from premium ([#​20866](mui/mui-x#20866)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Fix node anchor on iOS ([#​20848](mui/mui-x#20848)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Fix test inconsistency in charts ([#​20907](mui/mui-x#20907)) [@​JCQuintas](https://github.com/JCQuintas) - \[charts] Revert `touch-action: pan-y` removal when zoom is disabled ([#​20852](mui/mui-x#20852)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts] Use React event handler to detect pointer type ([#​20849](mui/mui-x#20849)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Enable keyboard navigation in radar chart ([#​20765](mui/mui-x#20765)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts] Fix tooltip position for stacked line series ([#​20901](mui/mui-x#20901)) [@​alexfauquette](https://github.com/alexfauquette) ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`, plus: - \[charts-pro] Add keyboard navigation to funnel ([#​20766](mui/mui-x#20766)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Add keyboard navigation to heatmap ([#​20786](mui/mui-x#20786)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Add keyboard navigation to sankey ([#​20777](mui/mui-x#20777)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Prefer global pointer interaction tracker in Heatmap ([#​20697](mui/mui-x#20697)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts-pro] Support composition for Sankey ([#​20604](mui/mui-x#20604)) [@​alexfauquette](https://github.com/alexfauquette) - \[charts-pro] Fix crash when two same-direction axes have a zoom preview ([#​20916](mui/mui-x#20916)) [@​bernardobelchior](https://github.com/bernardobelchior) ##### `@mui/[email protected]` [](https://mui.com/r/x-premium-svg-link "Premium plan") Same changes as in `@mui/[email protected]`, plus: - \[charts-premium] Add `ChartContainerPremium` ([#​20910](mui/mui-x#20910)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[charts-premium] Fix `ChartDataProviderPremium` tests ([#​20868](mui/mui-x#20868)) [@​bernardobelchior](https://github.com/bernardobelchior) ##### Tree View ##### `@mui/[email protected]` Internal changes. ##### `@mui/[email protected]` [](https://mui.com/r/x-pro-svg-link "Pro plan") Same changes as in `@mui/[email protected]`. ##### Codemod ##### `@mui/[email protected]` Internal changes. ##### Docs - \[docs] Fix Waterfall Chart documentation badge from Pro to Premium ([#​20888](mui/mui-x#20888)) [@​Copilot](https://github.com/Copilot) - \[docs] Fix broken links on Data Grid Editing sub-pages ([#​20911](mui/mui-x#20911)) [@​arminmeh](https://github.com/arminmeh) - \[docs] Increase chart axis size in docs to fit in Ubuntu Firefox ([#​20844](mui/mui-x#20844)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[docs] Simplify heatmap zoom demo ([#​20851](mui/mui-x#20851)) [@​bernardobelchior](https://github.com/bernardobelchior) - \[docs] Revise the Charts Composition doc ([#​20032](mui/mui-x#20032)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Revise the Charts Localization doc ([#​20800](mui/mui-x#20800)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Revise the Charts Stacking doc ([#​20830](mui/mui-x#20830)) [@​mapache-salvaje](https://github.com/mapache-salvaje) - \[docs] Fix broken links ([#​20914](mui/mui-x#20914)) [@​Janpot](https://github.com/Janpot) ##### Core - \[code-infra] Fix `material-ui/disallow-react-api-in-server-components` ([#​20909](mui/mui-x#20909)) [@​JCQuintas](https://github.com/JCQuintas) - \[code-infra] Prepare for v9 ([#​20860](mui/mui-x#20860)) [@​JCQuintas](https://github.com/JCQuintas) - \[code-infra] Update codeowners ([#​20886](mui/mui-x#20886)) [@​JCQuintas](https://github.com/JCQuintas) - \[internal] Remove local Claude settings from the repo ([#​20853](mui/mui-x#20853)) [@​cherniavskii](https://github.com/cherniavskii) </details> <details> <summary>prettier/prettier (prettier)</summary> ### [`v3.8.0`](https://github.com/prettier/prettier/blob/HEAD/CHANGELOG.md#380) [Compare Source](prettier/prettier@3.7.4...3.8.0) [diff](prettier/prettier@3.7.4...3.8.0) 🔗 [Release Notes](https://prettier.io/blog/2026/01/14/3.8.0) </details> --- - [ ] <!-- rebase-check -->If you want to rebase/retry this MR, check this box --- This MR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi44NC4yIiwidXBkYXRlZEluVmVyIjoiNDIuODQuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsiZGVwZW5kZW5jaWVzIiwicmVub3ZhdGUiXX0=--> See merge request swiss-armed-forces/cyber-command/cea/loom!253 Co-authored-by: Loom MR Pipeline Trigger <group_103951964_bot_9504bb8dead6d4e406ad817a607f24be@noreply.gitlab.com> Co-authored-by: open-source Pipeline <group_90701827_bot_ed04ae348bc5f40af9966fb8b6867e99@noreply.gitlab.com>
The heatmap has same issue as the line/bar: some cells can be empty.
To overcome this issue, I propose to allow focus on all cells by adding a
xIndex/yIndexto identify the cell even if it does not contain a value. The presence ofdataIndexin the identifier allowing to distinguish identifier with value/without valueThe
dataIndexis now used as a way to know if a given identifier has some data or not.I can't do that now because it would be a breaking change, but in the future it should be removed from the identifier, and be derived from the x/y indexes