[charts] Extract `FocusedPieArc` from `PieArcPlot` #20613

alexfauquette · 2025-12-10T14:08:37Z

Follow up on top of #20611

mui-bot · 2025-12-10T14:10:35Z

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

Updated pages:

docs/data/charts/accessibility/accessibility.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	🔺+357B^(+0.10%)	🔺+85B^(+0.08%)
@mui/x-charts-pro	🔺+365B^(+0.08%)	🔺+109B^(+0.08%)
@mui/x-charts-premium	🔺+357B^(+0.08%)	🔺+82B^(+0.06%)
@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 25ce936

bernardobelchior · 2025-12-10T16:00:50Z

Wrong PR title 😄

codspeed-hq · 2025-12-11T08:19:23Z

CodSpeed Performance Report

Merging #20613 will not alter performance

_{Comparing alexfauquette:extract-pie-focuse (25ce936) with master (86a6268)¹}

Summary

✅ 13 untouched

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

bernardobelchior · 2025-12-11T09:33:15Z

scripts/buildApiDocs/chartsSettings/index.ts

      'x-charts/src/BarChart/AnimatedBarElement.tsx',
      'x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx',
      'x-charts/src/LineChart/FocusedLineMark.tsx',
+      'x-charts/src/PieChart/FocusedPieArc.tsx',


Isn't this technically documented in the accessibility docs? Should we add it there instead?

This stuff will create a cross link between docs pages and the component API page.

Those components API are empty. They are just here to be display, so I prefer avoiding adding noise

bernardobelchior · 2025-12-11T09:33:31Z

scripts/x-charts-premium.exports.json

-  { "name": "UsePieSeriesContextReturnValue", "kind": "TypeAlias" },
-  { "name": "UsePieSeriesReturnValue", "kind": "TypeAlias" },


Probably needs to be re-generated

bernardobelchior · 2025-12-11T09:34:58Z

packages/x-charts/src/PieChart/PieArcPlot.tsx

        />
      ))}
-      {/* Render the focus indicator last, so it can align nicely over all arcs */}
-      {focusedItem && (


Isn't this technically a breaking change? Someone using PieArcPlot will now be missing the outline, right?

Yes but it's a legal breaking change O:)

JCQuintas · 2025-12-11T09:53:01Z

packages/x-charts/src/PieChart/dataTransform/useTransformData.ts

        const isFaded = !isHighlighted && isItemFaded(currentItem);
        const isFocused = isItemFocused({ seriesType: 'pie', seriesId, dataIndex: itemIndex });

+        // TODO v9: Replace the second argument with the result of useSeriesLayout


Why can't we use it now?

A simplified version to illustrate the issue

export fucntion PiePlot(){ const innerRadius = usePieSeriesLayout() return <g> <PieArcPlot innerRadius={innerRadius} /> // This component calls useTransformData() <PieArcLabelPlot innerRadius={innerRadius} /> // This component calls useTransformData() </g> }

The issue is that PiePlot, PieArcPlot, and PieArcLabelPlot are all exported.

If I use directly the result of usePieSeriesLayout() in the useTransformData() the innerRadius prop would have no effect which is a breaking change

I don't see how we would fix this in the future then 🤔

Like, shouldn't we default to the value of pieSeriesLayout to prevent inconsistency?

const pieSeriesLayout = usePieSeriesLayout(); const layout = pieSeriesLayout[seriesId] const arcSizes = applyArcModifiers( series, { radius: { inner: series.innerRadius ?? layout.radius.innerRadius ... } }, isHighlighted, isFaded, );

In the future, we could

remove the PiePlot

remove innerRadius props from PieArcPlot to only use the seriesLayout

Then we will be able to do

const pieSeriesLayout = usePieSeriesLayout(); const layout = pieSeriesLayout[seriesId] const arcSizes = applyArcModifiers( series, layout, isHighlighted, isFaded, );

By the way series.innerRadius ?? layout.radius.innerRadius is nto correct, because :

series.innerRadius is the user config. It can be a percentage like "90%"

layout.radius.innerRadius is the equivalent in px of the series.innerRadius

The only thing that interest us from series is the series.faded.inneRadius and series.highlighted.inneRadius

bernardobelchior · 2025-12-11T13:28:45Z

packages/x-charts/src/PieChart/dataTransform/applyArcModifiers.ts

+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export function applyArcModifiers(


"apply" makes it feel like this function is mutable, but it just returns the modifiers, so I'd suggest calling it getArcModifiers or getPieArcModifiers if you want to be more explicit

But it does not get the modifiers, it applies the focused and highlighted objects when relevant

We could call it getArcProperties instead or getModifiedArcProperties, for example. Not a blocker, though

bernardobelchior · 2025-12-11T13:29:28Z

packages/x-charts/src/PieChart/dataTransform/getModifiedArcProperties.ts

+    DefaultizedPieSeriesType,
+    'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'
+  >,
+  seriesLayout: Pick<PieSeriesLayout, 'radius'>,


If we're just picking the radius, why not simplify the type?

Suggested change

seriesLayout: Pick<PieSeriesLayout, 'radius'>,

layoutRadius: PieSeriesLayout['radius'],

I think it's easier to have a split that match hooks.

seriesDef is a subset of the useSeries

seriesLayout is a subset of the useSeriesLayout

I usually prefer simpler types so that functions are easier to test. IMO, the called function doesn't need to know where the data comes from, that's the calling function's responsibility. Not a big deal, though, just style preference

alexfauquette added 3 commits December 10, 2025 14:12

[charts] Extract pie layout computation

bda6815

export

e490b80

[charts] Extract FocusedPieArc from PieArcPlot

4a3e2f8

alexfauquette requested review from a team and prakhargupta1 as code owners December 10, 2025 14:08

Merge remote-tracking branch 'upstream/master' into extract-pie-focuse

61823f3

alexfauquette changed the title ~~[charts] Extract pie layout computation~~ [charts] Extract FocusedPieArc from PieArcPlot Dec 11, 2025

alexfauquette added accessibility a11y type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Dec 11, 2025

bernardobelchior reviewed Dec 11, 2025

View reviewed changes

JCQuintas reviewed Dec 11, 2025

View reviewed changes

run run run little script

218e9b0

bernardobelchior reviewed Dec 11, 2025

View reviewed changes

JCQuintas approved these changes Dec 11, 2025

View reviewed changes

bernardobelchior approved these changes Dec 11, 2025

View reviewed changes

feedback

25ce936

alexfauquette enabled auto-merge (squash) December 11, 2025 18:17

alexfauquette merged commit 9bda61c into mui:master Dec 12, 2025
22 checks passed

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Dec 14, 2025

[charts] Extract FocusedPieArc from PieArcPlot (mui#20613)

e4da196

mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025

[charts] Extract FocusedPieArc from PieArcPlot (mui#20613)

d219e65

		{ "name": "UsePieSeriesContextReturnValue", "kind": "TypeAlias" },
		{ "name": "UsePieSeriesReturnValue", "kind": "TypeAlias" },

	seriesLayout: Pick<PieSeriesLayout, 'radius'>,
	layoutRadius: PieSeriesLayout['radius'],

Uh oh!

[charts] Extract FocusedPieArc from PieArcPlot #20613

[charts] Extract FocusedPieArc from PieArcPlot #20613

Uh oh!

Conversation

alexfauquette commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Bundle size report

Uh oh!

bernardobelchior commented Dec 10, 2025

Uh oh!

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

Uh oh!

Merging #20613 will not alter performance

Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

alexfauquette Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[charts] Extract `FocusedPieArc` from `PieArcPlot` #20613

[charts] Extract `FocusedPieArc` from `PieArcPlot` #20613

alexfauquette commented Dec 10, 2025 •

edited

Loading

mui-bot commented Dec 10, 2025 •

edited

Loading

codspeed-hq bot commented Dec 11, 2025 •

edited

Loading

bernardobelchior Dec 11, 2025 •

edited

Loading

alexfauquette Dec 11, 2025 •

edited

Loading