[charts-pro] Support composition for Sankey by alexfauquette · Pull Request #20604 · mui/mui-x

alexfauquette · 2025-12-09T09:42:39Z

No description provided.

mui-bot · 2025-12-09T09:44:09Z

Deploy preview: https://deploy-preview-20604--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/sankey/sankey.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	🔺+1.95KB^(+0.42%)	🔺+265B^(+0.19%)
@mui/x-charts-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 43cec8f

codspeed-hq · 2025-12-12T08:59:43Z

CodSpeed Performance Report

Merging this PR will not alter performance

_{Comparing alexfauquette:sankey-update (43cec8f) with master (5e66b41)}

Summary

✅ 14 untouched benchmarks

alexfauquette · 2025-12-15T15:55:23Z

Did my best to simplify but ended up to the conclusion that we can not display all those labels on mobile

@JCQuintas About the approach to allow users for creating this same node labels. I could introduce a slot 😈 But I'm considering exporting a SankeyNodePlot, SankeyLinkPlot, SankeyNodeLablePlot, SankeyLinkLablePlot to do the demo with composition (reuse SankeyNodePlot, SankeyLinkPlot and do custom SankeyNodeLablePlot, SankeyLinkLablePlot)

JCQuintas · 2025-12-15T16:50:22Z

Did my best to simplify but ended up to the conclusion that we can not display all those labels on mobile

Yes, an option for mobile should be to make the sankey vertical, or provide the labels outside the context of the chart.

I didn't want to implement composition for the sankey before the headless migration, so we don't have yet another slot to move over 😆

alexfauquette

@JCQuintas I tried to make something that would adapt well to a headless version

docs/data/charts/sankey/SankeyOverview.tsx

alexfauquette · 2025-12-16T13:37:14Z

docs/data/charts/sankey/SankeyOverview.tsx

+import { sankeySeriesConfig } from '@mui/x-charts-pro/SankeyChart/seriesConfig';
+import {
+  SANKEY_CHART_PLUGINS,
+  SankeyChartPluginSignatures,
+} from '@mui/x-charts-pro/SankeyChart/SankeyChart.plugins';


Either we create a SankeyDataprovider or we export those from the @mui/x-charts-pro/SankeyChart

Should be ok to export the data provider

alexfauquette · 2025-12-16T13:38:41Z

packages/x-charts-pro/src/SankeyChart/SankeyLinkLabel.tsx

    const { link } = props;
    const theme = useTheme();
-    const seriesContext = useSankeySeriesContext();
+    const series = useSankeySeries()[0];


Maybe we should simplify a bit further by directly returning the first series. The fact it's an array is just due to some internal consistency issues. From the user perspective their is always only one series

The component is Unstable_SankeyChart but the hooks are not. We could technically do it, but might be annoying. We could wait for v9

alexfauquette · 2025-12-16T13:41:03Z

packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx

+const SankeyPlotRoot = styled('g')({});



I moved those to the SankeyNodePlot and SankeyLinkPlot. It decreases default style specificity.

I kept the styled to have the theme stye override. Coudl be removed if needed

alexfauquette · 2025-12-16T13:43:30Z

packages/x-charts-pro/src/SankeyChart/sankeyHighlightHooks.ts

+} from './plugins/useSankeyHighlight.selectors';
+import type { SankeyLayoutLink, SankeyNodeId } from './sankey.types';
+
+export function useSankeyNodeHighlightState(nodeId: SankeyNodeId) {


Proposal for a new highlight hook API that express the fact that highlighted items can't be faded

Suggested change

export function useSankeyNodeHighlightState(nodeId: SankeyNodeId) {

export function useSankeyNodeHighlightState(nodeId: SankeyNodeId): 'highlighted' | 'faded' | 'none' {

Can we turn this into a general/global hook/rule?

You mean for other series?

I think yes. For now hooks do to following which is the same but with more varaibles

const isHighlighted = store.use(isHighlightedSelector) const isFaded = store.use(isFadedSelector) return { isHighlighted, isFaded: !isHighlighted && isFaded }

JCQuintas

Should work, it seems like it is a bit cumbersome to create the custom label plot, but I don't think we should provide more higher-level-apis (something like useNodeLabelPosition) at this point

JCQuintas · 2025-12-16T16:50:32Z

docs/data/charts/sankey/SankeyOverview.tsx

+import { sankeySeriesConfig } from '@mui/x-charts-pro/SankeyChart/seriesConfig';
+import {
+  SANKEY_CHART_PLUGINS,
+  SankeyChartPluginSignatures,
+} from '@mui/x-charts-pro/SankeyChart/SankeyChart.plugins';


Should be ok to export the data provider

JCQuintas · 2025-12-16T16:51:37Z

packages/x-charts-pro/src/SankeyChart/sankeyHighlightHooks.ts

+} from './plugins/useSankeyHighlight.selectors';
+import type { SankeyLayoutLink, SankeyNodeId } from './sankey.types';
+
+export function useSankeyNodeHighlightState(nodeId: SankeyNodeId) {


Can we turn this into a general/global hook/rule?

JCQuintas · 2025-12-16T16:54:34Z

packages/x-charts-pro/src/SankeyChart/SankeyLinkLabel.tsx

    const { link } = props;
    const theme = useTheme();
-    const seriesContext = useSankeySeriesContext();
+    const series = useSankeySeries()[0];


The component is Unstable_SankeyChart but the hooks are not. We could technically do it, but might be annoying. We could wait for v9

github-actions · 2025-12-17T09:41:36Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2026-01-05T03:31:59Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx

Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

prakhargupta1 and others added 8 commits November 28, 2025 16:45

add

f9fa2fa

add node padding

fa6b289

colors and cleanup

20b5455

G&A

0df09ee

Merge branch 'master' into sankey

d0308c2

Merge branch 'master' into sankey

480bc75

remove padding

3fe440a

WIP

c4d37ed

zannager added the scope: charts Changes related to the charts. label Dec 12, 2025

alexfauquette added 2 commits December 15, 2025 13:00

Merge remote-tracking branch 'upstream/master' into sankey-update

3ddd268

refinement

3774679

Allow composition

9f98b21

alexfauquette commented Dec 16, 2025

View reviewed changes

alexfauquette changed the title ~~[WIP][charts] Try some label improvement on sankey~~ [charts-pro] Support composition for Sankey Dec 16, 2025

JCQuintas approved these changes Dec 16, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 17, 2025

alexfauquette added 3 commits December 22, 2025 11:35

export data provider

71af775

Merge remote-tracking branch 'upstream/master' into sankey-update

5677cd4

script

0a2ad91

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 22, 2025

alexfauquette added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Dec 22, 2025

fix

f69f84f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 5, 2026

alexfauquette added 2 commits January 9, 2026 11:06

Merge remote-tracking branch 'upstream/master' into sankey-update

de4a564

update

9463b98

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 9, 2026

script

081dbfd

alexfauquette marked this pull request as ready for review January 9, 2026 12:55

alexfauquette requested review from a team and prakhargupta1 as code owners January 9, 2026 12:55

alexfauquette added 2 commits January 9, 2026 13:57

fix test

1ee4a9c

prettier

4ba6799

alexfauquette requested a review from JCQuintas January 12, 2026 13:31

JCQuintas reviewed Jan 12, 2026

View reviewed changes

packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx Outdated Show resolved Hide resolved

Apply suggestion from @JCQuintas

43cec8f

Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

JCQuintas approved these changes Jan 12, 2026

View reviewed changes

alexfauquette merged commit 1d4656d into mui:master Jan 12, 2026
22 checks passed

alexfauquette mentioned this pull request Jan 13, 2026

[docs] Add Sankey overview demo #20482

Closed

1 task

brijeshb42 added the plan: Pro Impact at least one Pro user. label Jan 19, 2026

	export function useSankeyNodeHighlightState(nodeId: SankeyNodeId) {
	export function useSankeyNodeHighlightState(nodeId: SankeyNodeId): 'highlighted' \| 'faded' \| 'none' {

Uh oh!

Conversation

alexfauquette commented Dec 9, 2025

Uh oh!

mui-bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Summary

Uh oh!

alexfauquette commented Dec 15, 2025

Uh oh!

JCQuintas commented Dec 15, 2025

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

github-actions bot commented Jan 5, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mui-bot commented Dec 9, 2025 •

edited

Loading

codspeed-hq bot commented Dec 12, 2025 •

edited

Loading