[WIP][charts-pro] Chart zoom preview

[bernardobelchior]

TODO:

• [x] Add line plot
• [x] Add area plot
• [x] Add bar plot
• [x] Handle y axes
• [ ] How to handle slots?
• [ ] Should we animate?
• [x] Handle tick label overflow into slider preview

[mui-bot]

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

Updated pages:

• docs/data/charts/zoom-and-pan/zoom-and-pan.md

Bundle size report

Total Size Change: 🔺+104KB^(+0.78%) - Total Gzip Change: 🔺+33.6KB^(+0.83%) Files: 122 total (0 added, 0 removed, 37 changed)

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

@mui/x-charts-pro/ChartZoomSlider parsed: 🔺+37.2KB^(+54.04%) gzip: 🔺+11.3KB^(+46.48%) @mui/x-charts-pro/ScatterChartPro parsed: 🔺+29.3KB^(+12.29%) gzip: 🔺+9.52KB^(+12.72%) @mui/x-charts-pro/BarChartPro parsed: 🔺+20.7KB^(+8.19%) gzip: 🔺+6.59KB^(+8.32%) @mui/x-charts-pro/LineChartPro parsed: 🔺+10.3KB^(+3.82%) gzip: 🔺+3.7KB^(+4.42%) @mui/x-charts-pro parsed: 🔺+5.38KB^(+1.43%) gzip: 🔺+1.59KB^(+1.40%) @mui/x-charts/ScatterChart parsed: 🔺+88B^(+0.05%) gzip: 🔺+281B^(+0.47%) @mui/x-charts parsed: 🔺+82B^(+0.03%) gzip: 🔺+57B^(+0.06%) @mui/x-charts-pro/ChartContainerPro parsed: 🔺+61B^(+0.03%) gzip: 🔺+25B^(+0.05%) @mui/x-charts-pro/ChartDataProviderPro parsed: 🔺+61B^(+0.04%) gzip: 🔺+26B^(+0.05%) @mui/x-charts-pro/ChartsToolbarPro parsed: 🔺+61B^(+0.09%) gzip: 🔺+27B^(+0.11%) @mui/x-charts-pro/FunnelChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+28B^(+0.04%) @mui/x-charts-pro/Heatmap parsed: 🔺+61B^(+0.03%) gzip: 🔺+28B^(+0.04%) @mui/x-charts-pro/PieChartPro parsed: 🔺+61B^(+0.03%) gzip: 🔺+29B^(+0.04%) @mui/x-charts-pro/RadarChartPro parsed: 🔺+61B^(+0.03%) gzip: 🔺+28B^(+0.04%) @mui/x-charts/BarChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+22B^(+0.03%) @mui/x-charts/ChartsAxis parsed: 🔺+61B^(+0.09%) gzip: 🔺+29B^(+0.11%) @mui/x-charts/ChartsAxisHighlight parsed: 🔺+61B^(+0.10%) gzip: 🔺+27B^(+0.12%) @mui/x-charts/ChartsGrid parsed: 🔺+61B^(+0.10%) gzip: 🔺+29B^(+0.14%) @mui/x-charts/ChartsLegend parsed: 🔺+61B^(+0.08%) gzip: 🔺+25B^(+0.10%) @mui/x-charts/ChartsReferenceLine parsed: 🔺+61B^(+0.10%) gzip: 🔺+28B^(+0.13%) @mui/x-charts/ChartsSurface parsed: 🔺+61B^(+0.10%) gzip: 🔺+27B^(+0.13%) @mui/x-charts/ChartsTooltip parsed: 🔺+61B^(+0.08%) gzip: 🔺+26B^(+0.10%) @mui/x-charts/ChartsXAxis parsed: 🔺+61B^(+0.09%) gzip: 🔺+28B^(+0.11%) @mui/x-charts/ChartsYAxis parsed: 🔺+61B^(+0.09%) gzip: 🔺+22B^(+0.09%) @mui/x-charts/Gauge parsed: 🔺+61B^(+0.04%) gzip: 🔺+28B^(+0.06%) @mui/x-charts/LineChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+31B^(+0.04%) @mui/x-charts/PieChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+27B^(+0.04%) @mui/x-charts/RadarChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+27B^(+0.05%) @mui/x-charts/SparkLineChart parsed: 🔺+61B^(+0.03%) gzip: 🔺+30B^(+0.05%) @mui/x-charts/ChartContainer parsed: 🔺+60B^(+0.04%) gzip: 🔺+28B^(+0.06%) @mui/x-charts/ChartDataProvider parsed: 🔺+60B^(+0.04%) gzip: 🔺+27B^(+0.06%) @mui/x-data-grid parsed: ▼-44B^(-0.01%) gzip: ▼-9B^(-0.01%) @mui/x-data-grid-premium parsed: ▼-44B^(-0.01%) gzip: ▼-13B^(-0.01%) @mui/x-data-grid-premium/DataGridPremium parsed: ▼-44B^(-0.01%) gzip: ▼-16B^(-0.01%) @mui/x-data-grid-pro parsed: ▼-44B^(-0.01%) gzip: ▼-11B^(-0.01%) @mui/x-data-grid-pro/DataGridPro parsed: ▼-44B^(-0.01%) gzip: ▼-14B^(-0.01%) @mui/x-data-grid/DataGrid parsed: ▼-44B^(-0.01%) gzip: ▼-12B^(-0.01%) @mui/x-charts/ChartsClipPath parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/ChartsLabel 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/ChartsText parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-charts/Toolbar 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: 0B^(0.00%) @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: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%) @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: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @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: 0B^(0.00%) @mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @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: 0B^(0.00%) @mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%) @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 053fc71ba1a60ff65e51bce275d98fe72cd681f2

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #18267 will not alter performance

_{Comparing bernardobelchior:chart-zoom-preview (053fc71) with master (c4abca2)}

Summary

✅ 9 untouched benchmarks

[github-actions[bot]]

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

[github-actions[bot]]

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

[github-actions[bot]]

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

[github-actions[bot]]

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

[github-actions[bot]]

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

[github-actions[bot]]

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

[alexfauquette]

Just a first comment before reviewing the code. The design and the interaction looks nice.

But the y-axis for the line chart and the two axes for the scatter look weird. If I had te create a visualisation for a website I would

• for the line chart do not put a y-axis preview:

  • either a zoom filtering
  • or the range but without showing its content for UI consistency with the x-axis. Something a bit like that

• for the scatter chart: either the same idea of removing the content preview, or at least drastically decrease the mark size in the preview (here is a comparison of the x-axis with a marksize of 1px compared to the current one (4px). IMO the first one looks more professional

[JCQuintas]

Oh yeah, I thought about this too, forgot to mention

• for the scatter chart: either the same idea of removing the content preview, or at least drastically decrease the mark size in the preview (here is a comparison of the x-axis with a marksize of 1px compared to the current one (4px). IMO the first one looks more professional

[alexfauquette]

Should we turn on preview on perf benchmark?

[bernardobelchior]

Should we turn on preview on perf benchmark?

Hm, might be a good idea. Or create a new benchmark. I'll look into it.

[bernardobelchior]

Just a first comment before reviewing the code. The design and the interaction looks nice.

But the y-axis for the line chart and the two axes for the scatter look weird. If I had te create a visualisation for a website I would

• for the line chart do not put a y-axis preview:

  • either a zoom filtering
  • or the range but without showing its content for UI consistency with the x-axis. Something a bit like that

I wanted to ensure the preview is exactly like the main chart. Maybe this is a default we can flip once we add configuration?

preview: { axisIds: ['x'] } // By default, only includes x-axes

What do you think?

• for the scatter chart: either the same idea of removing the content preview, or at least drastically decrease the mark size in the preview (here is a comparison of the x-axis with a marksize of 1px compared to the current one (4px). IMO the first one looks more professional

Do you mean removing the content preview on both axes?

Again, same argument as before: I wanted to maintain the preview similar to the main chart. I agree the second option looks better, but if we override the marker size, IMO we should allow customizing.

Maybe adding a section to the docs explaining how to customize the circle size would be enough?

[alexfauquette]

I wanted to maintain the preview similar to the main chart.

I think this is the root of our diverging point of view. For me a "preview"(maybe "overview" is closer to the point) should be like a summary. A summary is not as beautiful or as detailed as the original. But it's practical. It cuts detailed to bring as much value in a constraint space.

That resume the two point I made about docs

• The line chart y-axis preview brings low value to the user. The only thing we can read from it is the min/max of the charts. But this information is already available in the slider
• The scatter chart can bring a bit of value by showing where in the zoom de we have groups of points. But the bigger the dots are, the less informative it is because they are hiding each other. Basically you know where points are, but lose the notion of density. That's why I propose to preview smaller point by default, and let an option for user to make them bigger

[bernardobelchior]

The line chart y-axis preview brings low value to the user. The only thing we can read from it is the min/max of the charts. But this information is already available in the slider

Are you saying we should disable the y-axis preview in the demo, then? I think that makes sense.

If you meant that the y-axis preview should not render the data points, then I'm not sure. If users don't want to see the preview, then they can disable it. What's the benefit of not rendering the data points?

The scatter chart can bring a bit of value by showing where in the zoom de we have groups of points. But the bigger the dots are, the less informative it is because they are hiding each other. Basically you know where points are, but lose the notion of density. That's why I propose to preview smaller point by default, and let an option for user to make them bigger

Makes sense. I'll reduce the default marker size and add an option in a follow-up PR.

[github-actions[bot]]

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

[alexfauquette]

Are you saying we should disable the y-axis preview in the demo, then? I think that makes sense.

Yes, we can have the option to display it. But not use it in this docs exemple

[github-actions[bot]]

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

[bernardobelchior]

Do you plan to solve the selector refinement in this PR or in a follow up?

Do you mean this? I've just updated this in the last commit. Had some changes that I forgot to revert.