[charts] Use plugin system for series and axes

[alexfauquette]

This PR is an attempt to migrate the axes, series and zoom to the plugin framework.

Modifications

Renaming that could be extracted

• SeriesFormatterResult -> SeriesProcessorResult
• SeriesFormatter -> SeriesProcessor
• SeriesFormatterParams -> SeriesProcessorParams
• ExtremumGetter -> CartesianExtremumGetter
• ChartsPlugin -> ChartSeriesTypeConfig the definition of extremums, cologetter, ... for a series type

Logic

Instance

The isPointInside got moved from the drawing area to the instance. It's our first instance method 🎉

Renaming plugins

The plugins props which was an array of configuration objects, defining for each series how to compute the extremums, preprocess the data, ... is now an object called seriesConfig. That's only sementic modification

- plugins={[ barConfig, lineConfig ]}
+ seriesConfig={{ bar: barConfig, line: lineConfig }}

Selector usage

The data modification is now done in selectors. We have 3 states: series, cartesianAxes, and zoom which describe the state of the chart.

One issue with this strategy is that useXAxis() is defined in the MIT package. And if we want to have the BarPlot supporting zoom out of the box for pro users, we need to have the zoom selectors that get zoom data.

The workaround is to put types and selectors for zoom in the MIT package. But populate and manage the state in the pro package.

Zoom API

The zoom seems to be working ok. The new API proposed it the following one:

• onZoomChange now provide the new zoom value in its argument.
• zoom props is replaced by initialZoom which is only used to initialize the zoom.
• The apiRef get a method setZoomData that use can call to set the zoom data. Maybe setZoom would be a better name

Changelog

charts

The useZoom and <ZoomSetup /> are removed.
The zoom feature is now always present if you use the ChartContainerPro which make those helper useless.

The zoom is not controllable any more.
It's now an internal state for which you can:

• Specify an initial state with the initialZoom prop.
• Set a value with apiRef.current.setZoomData() see

To learn more visit the related demonstration.

[mui-bot]

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

Updated pages:

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

Generated by 🚫 dangerJS against 8a016f1

[JCQuintas]

Shouldn't this be inside the setZoomDataCallback instead? 🤔

[github-actions]

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

[alexfauquette]

@JCQuintas The only comment I did not handle is

Regarding moving zoom to an imperative API, I'm not sure it is the right choice. We might want to fix/improve how the zoom works, or provide some sort of useZoom() hook that handles everything for the user instead of making them create and handle the useState themselves.

The two are not a strict opposite.
I think providing an imperative interface is a nice way to help user make some custom external interaction, like a button to zoom-out, zoom on last day, while keeping the hand on interaction management to provide higher level customization such as zoom speed, min/max zoom, ....

[JCQuintas]

Odd changes in this: https://app.argos-ci.com/mui/mui-x/builds/29054/129939133

[alexfauquette]

I might have fixed an issue by moving to plugins

in next.mui.com the cell is 150px large, but its content is only 130px because of 10px padding on both sizes.

But the charts SVG consider a 150 width in it's viewBox

In the preview the viewBox is correct

But it does not explain the issue with the pie chart. But for this demo fairly badely designed, because it's 3 charts with auto-size next to the other so each chart influence the size of it's neighbour. SOmetine when ou resize the container som pie chart will update and some other not 🙈