Skip to content

[charts] Optimize and de-duplicate sampled axis-highlight band lookup#23052

Merged
alexfauquette merged 3 commits into
mui:masterfrom
JCQuintas:feat/dedupe-sampled-axis-highlight
Jul 7, 2026
Merged

[charts] Optimize and de-duplicate sampled axis-highlight band lookup#23052
alexfauquette merged 3 commits into
mui:masterfrom
JCQuintas:feat/dedupe-sampled-axis-highlight

Conversation

@JCQuintas

Copy link
Copy Markdown
Member

Follow-up from #22830.

The bucket-widened axis highlight (ChartsXAxisHighlight.tsx / ChartsYAxisHighlight.tsx) had two issues, both addressed here:

  1. O(1) band index — the band was resolved via data.indexOf(value) (O(N)). The highlight state already carries dataIndex, so we use it directly. A data.indexOf fallback is kept for the case where dataIndex is unavailable.
  2. De-duplicate X/Y — the if (bucketSize > 1) … band-widening logic was duplicated between the X and Y highlight components. Extracted into a shared getSampledBandHighlight({ scale, value, dataIndex, data, bucketSize }) => { bandStart, bandSize } helper.

Reversed-axis correctness is out of scope (tracked in #22997).

Closes #23029

Extract the band-widening logic shared by the X and Y axis highlights into
a single getSampledBandHighlight helper, and resolve the band index via the
highlight state's dataIndex (O(1)) instead of data.indexOf (O(N)).

Closes mui#23029
@JCQuintas
JCQuintas requested a review from alexfauquette as a code owner July 3, 2026 12:58
@JCQuintas JCQuintas self-assigned this Jul 3, 2026
@JCQuintas JCQuintas added 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 Jul 3, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Jul 3, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-23052--material-ui-x.netlify.app/
QR code for https://deploy-preview-23052--material-ui-x.netlify.app/

Bundle size

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 🔺+54B(+0.01%) 🔺+64B(+0.05%)
@mui/x-charts-pro 🔺+54B(+0.01%) 🔺+98B(+0.06%)
@mui/x-charts-premium 🔺+54B(+0.01%) 🔺+61B(+0.03%)
@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%)
@mui/x-scheduler 0B(0.00%) 0B(0.00%)
@mui/x-scheduler-premium 0B(0.00%) 0B(0.00%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 2,327.73 ms 🔺+453.97 ms(+24.2%) | Renders: 63 (+0)

Test Duration Renders
Heatmap: 100x100 grid 752.44 ms 🔺+186.75 ms(+33.0%) 2 (+0)
SparkLineChart grid of 100 instances 221.61 ms 🔺+55.67 ms(+33.5%) 1 (+0)
LineChart stacked area with multiple series 207.78 ms 🔺+36.40 ms(+21.2%) 2 (+0)
RangeBarChart with big data amount 100.71 ms 🔺+30.32 ms(+43.1%) 2 (+0)
BarChartPro with big data amount 51.38 ms 🔺+16.71 ms(+48.2%) 2 (+0)

…and 9 more (+12 within noise) — details

Metric alarms

Test Metric Change
Heatmap: 100x100 grid bench:paint 🔺 +243.08 ms
SparkLineChart grid of 100 instances bench:paint 🔺 +198.91 ms
RangeBarChart with big data amount bench:paint 🔺 +46.15 ms
BarChartPro with big data amount bench:paint 🔺 +29.11 ms
ScatterChart with big data amount bench:paint 🔺 +20.34 ms
LineChartPro with big data amount and zoomed in (with marks) bench:paint 🔺 +17.06 ms
RadialBarChart stacked with multiple series bench:paint 🔺 +15.48 ms
HeatmapPremium: 100x100 grid (webgl renderer) bench:paint 🔺 +7.53 ms
RadialLineChart with big data amount bench:paint 🔺 +10.84 ms
PieChart with big data amount bench:paint 🔺 +5.25 ms
RadarChart with many axes and multiple series bench:paint 🔺 +5.65 ms
FunnelChart with big data amount bench:paint 🔺 +3.40 ms

Check out the code infra dashboard for more information about this PR.

Reading dataIndex via destructuring in the map callback signature broke
under the charts-pro union type. Access it off the item instead.
@alexfauquette
alexfauquette merged commit 9c1ecac into mui:master Jul 7, 2026
21 checks passed
JCQuintas added a commit to SamanPandey-in/mui-x that referenced this pull request Jul 23, 2026
Master added getSampledBandHighlight.test.ts in mui#23052/mui#23190; keep that
suite and re-add the Date-reference regression test on top of it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[charts-pro] Optimize + de-duplicate the sampled axis-highlight band lookup

3 participants