[charts-pro] Support composition for Sankey #20604

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.87KB^(+0.41%)	🔺+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 f69f84f

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

CodSpeed Performance Report

Merging #20604 will not alter performance

_{Comparing alexfauquette:sankey-update (f69f84f) with master (dcbbc64)¹}

Summary

✅ 14 untouched

No successful run was found on master (f76cfa0) during the generation of this report, so dcbbc64 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

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

alexfauquette · 2025-12-16T13:36:02Z

docs/data/charts/sankey/SankeyOverview.tsx

+        <ChartDataProviderPro<'sankey', SankeyChartPluginSignatures>
+          series={[
+            {
+              type: 'sankey' as const,
+              data,
+              valueFormatter,
+              nodeOptions: {
+                sort: 'fixed',
+                padding: 20,
+                width: 9,
+                showLabels: isDesktop,
+              },
+              linkOptions: {
+                color: 'target',
+                opacity: 0.6,
+                curveCorrection: 0,
+                showValues: !isDesktop,
+              },
+            },
+          ]}
+          margin={{ top: 20 }}
+          seriesConfig={seriesConfig}
+          plugins={SANKEY_CHART_PLUGINS}
+        >


What about exporting a SankeyDataProvider that simplifies that?

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.

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

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

Uh oh!

[charts-pro] Support composition for Sankey #20604

Are you sure you want to change the base?

[charts-pro] Support composition for Sankey #20604

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 #20604 will not alter performance

Summary

Footnotes

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mui-bot commented Dec 9, 2025 •

edited

Loading

codspeed-hq bot commented Dec 12, 2025 •

edited

Loading