[charts] Make scatter chart use data attributes

[alexfauquette]

I found nothing to say about the label because they are not yet supported on Heatmap. I created #18046 on this topic.

For the scatter chart the initial idea was to provide explaination about how to target elements with CSS like in https://mui.com/x/react-charts/lines/#css

Instead of adding CSS classes, I propose to start the implementation of data attribute for series' id and states. Created #18047 to continue the effort on this topic.

Will probably need a cleaner way of doing it, and document available data attributes

[mui-bot]

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

Updated pages:

• docs/data/charts/heatmap/heatmap.md
• docs/data/charts/scatter/scatter.md

Bundle size report

Total Size Change: 🔺+975B^(+0.01%) - Total Gzip Change: 🔺+479B^(+0.01%) Files: 122 total (0 added, 0 removed, 30 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-charts parsed: 🔺+251B^(+0.09%) gzip: 🔺+72B^(+0.09%) @mui/x-charts-pro parsed: 🔺+251B^(+0.07%) gzip: 🔺+98B^(+0.09%) @mui/x-charts/ScatterChart parsed: 🔺+251B^(+0.16%) gzip: 🔺+80B^(+0.15%) @mui/x-charts-pro/ScatterChartPro parsed: 🔺+222B^(+0.11%) gzip: 🔺+105B^(+0.16%) @mui/x-charts-pro/BarChartPro parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip: 🔺+5B^(+0.01%) @mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip: 🔺+3B^(+0.01%) @mui/x-charts-pro/ChartsToolbarPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/ChartZoomSlider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts-pro/FunnelChart parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-charts-pro/Heatmap parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-charts-pro/LineChartPro parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-charts-pro/PieChartPro parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-charts-pro/RadarChartPro parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/BarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartContainer parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartDataProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsAxisHighlight parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLegend parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsOverlay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsReferenceLine parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsSurface parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsTooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsXAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsYAxis parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Gauge parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/LineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/PieChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/RadarChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/SparkLineChart parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-data-grid-premium parsed: 0B^(0.00%) gzip: 🔺+4B^(0.00%) @mui/x-data-grid-premium/DataGridPremium parsed: 0B^(0.00%) gzip: 🔺+4B^(0.00%) @mui/x-data-grid-pro parsed: 0B^(0.00%) gzip: 🔺+4B^(0.00%) @mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip: 🔺+3B^(0.00%) @mui/x-data-grid/DataGrid parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro parsed: 0B^(0.00%) gzip: 🔺+8B^(+0.01%) @mui/x-date-pickers-pro/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B^(0.00%) gzip: 🔺+3B^(+0.01%) @mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: 🔺+9B^(+0.02%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.05%) @mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+7B^(+0.01%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 🔺+7B^(+0.01%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+8B^(+0.01%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+5B^(+0.01%) @mui/x-date-pickers-pro/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 🔺+8B^(+0.02%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+7B^(+0.01%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+3B^(+0.01%) @mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 🔺+4B^(+0.01%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 🔺+3B^(+0.01%) @mui/x-date-pickers/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsBase parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentHijri parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/AdapterMomentJalaali parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimeField parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DayCalendarSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/DigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MonthCalendar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickerDay2 parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersActionBar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers/PickersCalendarHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 561e4a082da9a16562d9cd6c0ce47d70f45e8ab5

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #18048 will not alter performance

_{Comparing alexfauquette:heatmap-label (561e4a0) with master (7f6e8d9)}

Summary

✅ 9 untouched benchmarks

[JCQuintas]

It's a shame that this impacts performance significantly. I wonder what we could do to make it faster again.

Maybe styling the highlight natively using CSS and removing the isHighlighted and isFaded helps?

It is a bit odd really, if we remove other props instead of adding props, does it improve speed? 🤔

[bernardobelchior]

It's a shame that this impacts performance significantly. I wonder what we could do to make it faster again. Maybe styling the highlight natively using CSS and removing the isHighlighted and isFaded helps?

It is a bit odd really, if we remove other props instead of adding props, does it improve speed? 🤔

It might. Also, styling using CSS is probably faster as well.

[bernardobelchior]

Should we go for data-index or data-data-index? 😆 There is also data-series or data-series-id 😢

I'd go for the shorter names: data-index and data-series.

[JCQuintas]

Should we go for data-index or data-data-index? 😆 There is also data-series or data-series-id 😢

I'd go for the shorter names: data-index and data-series.

Would be my preference as well

[alexfauquette]

About the performances decrease, I can confirm it's not CodSpeed error. The Added the attributes slow down each mark render by a very small amount of time, but multiplied by the number of them, it increases the total render time.

I did some test with react profiler, and Addins those attributes moves the ScatterChart initial render from 140-160ms to 160-200ms

So around 0.05ms per mark since we render 800 of them

[bernardobelchior]

About the performances decrease, I can confirm it's not CodSpeed error. The Added the attributes slow down each mark render by a very small amount of time, but multiplied by the number of them, it increases the total render time.

I did some test with react profiler, and Addins those attributes moves the ScatterChart initial render from 140-160ms to 160-200ms

So around 0.05ms per mark since we render 800 of them

That is unfortunate. I wonder if we should just add a demo where we replace the marker slot with a custom one that applies the data attributes. That way users keep control of what they want to set as data attributes and we don't regress performance at the cost of DX. We already have some performance problems with a lot of data, so merging this would only exacerbate it. Some users might not care about the CSS styling but will be hit with a performance regression.

What do you think?