[charts] Allow Zoom to be controllable

[JCQuintas]

• Had to change the internal usage of setZoomData([]) to setZoomData(() => []) to work with controllable state
• Small adjustments to zoom and pan logic to work with the setZoomData usage change

Basic usage

const Component = () => {
  const [zoom, setZoom] = React.useState<ZoomData[]>([
    {
      axisId: 'my-x-axis',
      start: 20,
      end: 40,
    },
  ]);

  return (
    <div>
      <Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
        Reset zoom
      </Button>
      <Chart
        {...chartProps}
        zoom={zoom}
        onZoomChange={setZoom}
        xAxis={[
          {
            zoom: true,
            id: 'my-x-axis',
          },
        ]}
      />
    </div>
  );
}

[JCQuintas]

Currently axisId is required. Should we allow {start,end} to be passed when there is only one zoom enabled?

[JCQuintas]

Currently the user can use an empty array in the controlled zoom. We then fill it up correctly on the first user interaction. Though I'm not sure we should enforce the correct usage from the start?

[alexfauquette]

I'm not sure we should enforce the correct usage from the start?

I don't see issue asking users to start with the correct behavior.

I assume most of the use-cases will be useState([ { axisId: 'my-x-axis', start: 0, end: 100 } ])

[JCQuintas]

We got to intialize the data regardless for uncontrolled charts 😅

[alexfauquette]

From its usage it does not really look like an initializer.

I would expect that initializeZoomData is used to initialize the state. For example in the default value of the useControlledProps. But you use it at the beginning of every zoom interaction.

Either you consider it more as a cleaner function that ensure the axis are relevant with the options.
Then I would move the usage of this function in the value = React.useMemo(... of the provider to call it only once.

Or it's an initializer and it should be called once in the useControlledProps.

Notice that this solution does not support the case of a user adding/removing the zoom option of an axis. It's an edge case so no need for it to be fixed. Maybe other a highlight in the docs such as

You can not switch an axis from zoom: false to zoom: true.
The current workaround is to control the zoomData and add this new zoomable axis to it.

[mui-bot]

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

Updated pages:

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

Generated by 🚫 dangerJS against 43ab3fa

[alexfauquette]

I'm not sure we should enforce the correct usage from the start?

I don't see issue asking users to start with the correct behavior.

I assume most of the use-cases will be useState([ { axisId: 'my-x-axis', start: 0, end: 100 } ])

[alexfauquette]

What about moving them in a .types.ts files such that we only export types

Suggested change

	{ "name": "ZAxisContextProviderProps", "kind": "TypeAlias" },
	{ "name": "ZoomContext", "kind": "Variable" },
	{ "name": "ZoomData", "kind": "TypeAlias" },
	{ "name": "ZoomOptions", "kind": "TypeAlias" },
	{ "name": "ZoomProps", "kind": "TypeAlias" },
	{ "name": "ZoomProvider", "kind": "Function" }
	{ "name": "ZoomData", "kind": "TypeAlias" },
	{ "name": "ZoomOptions", "kind": "TypeAlias" },
	{ "name": "ZoomProps", "kind": "TypeAlias" },

[JCQuintas]

I've changed it to only export things that are actually useful for the user. Also documented useZoom and <ZoomSetup/> a bit

[github-actions]

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

[JCQuintas]

@alexfauquette this is ready for review

[alexfauquette]

From its usage it does not really look like an initializer.

I would expect that initializeZoomData is used to initialize the state. For example in the default value of the useControlledProps. But you use it at the beginning of every zoom interaction.

Either you consider it more as a cleaner function that ensure the axis are relevant with the options.
Then I would move the usage of this function in the value = React.useMemo(... of the provider to call it only once.

Or it's an initializer and it should be called once in the useControlledProps.

Notice that this solution does not support the case of a user adding/removing the zoom option of an axis. It's an edge case so no need for it to be fixed. Maybe other a highlight in the docs such as

You can not switch an axis from zoom: false to zoom: true.
The current workaround is to control the zoomData and add this new zoomable axis to it.

[alexfauquette]

🚀