[charts] Fix zoom option reactivity (mui#16262)

lauri865 · Jan 20, 2025 · de8366b · de8366b
1 parent e0e7466
commit de8366b
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts
@@ -0,0 +1,15 @@
+import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models';
+import { defaultizeZoom } from './defaultizeZoom';
+
+export const creatZoomLookup = (
+  axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[],
+) =>
+  axes.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
+    const { zoom, id: axisId } = v;
+    const defaultizedZoom = defaultizeZoom(zoom, axisId, 'x');
+    if (defaultizedZoom) {
+      acc[axisId] = defaultizedZoom;
+    }
+    return acc;
+  }, {});
diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts
@@ -1,12 +1,22 @@
-import { ChartRootSelector, createSelector } from '@mui/x-charts/internals';
+import {
+  ChartRootSelector,
+  createSelector,
+  selectorChartRawXAxis,
+  selectorChartRawYAxis,
+} from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from './useChartProZoom.types';
+import { creatZoomLookup } from './creatZoomLookup';
 
 export const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature> = (state) =>
   state.zoom;
 
+const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup);
+
+const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup);
+
 export const selectorChartZoomOptionsLookup = createSelector(
-  selectorChartZoomState,
-  (zoom) => zoom.optionsLookup,
+  [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup],
+  (xLookup, yLookup) => ({ ...xLookup, ...yLookup }),
 );
 
 export const selectorChartZoomData = createSelector(

diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts
@@ -10,7 +10,7 @@ import {
   ZoomData,
 } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from './useChartProZoom.types';
-import { defaultizeZoom } from './defaultizeZoom';
+import { creatZoomLookup } from './creatZoomLookup';
 import {
   getDiff,
   getHorizontalCenterRatio,
@@ -80,6 +80,7 @@ export const useChartProZoom: ChartPlugin<UseChartProZoomSignature> = ({
     () => Object.values(optionsLookup).some((v) => v.panning) || false,
     [optionsLookup],
   );
+
   const isDraggingRef = React.useRef(false);
   const touchStartRef = React.useRef<{ x: number; y: number; zoomData: ZoomData[] } | null>(null);
   React.useEffect(() => {
@@ -372,22 +373,8 @@ useChartProZoom.params = {
 
 useChartProZoom.getDefaultizedParams = ({ params }) => {
   const optionsLookup = {
-    ...params.defaultizedXAxis.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
-      const { zoom, id: axisId } = v;
-      const defaultizedZoom = defaultizeZoom(zoom, axisId, 'x');
-      if (defaultizedZoom) {
-        acc[axisId] = defaultizedZoom;
-      }
-      return acc;
-    }, {}),
-    ...params.defaultizedYAxis.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
-      const { zoom, id: axisId } = v;
-      const defaultizedZoom = defaultizeZoom(zoom, axisId, 'y');
-      if (defaultizedZoom) {
-        acc[axisId] = defaultizedZoom;
-      }
-      return acc;
-    }, {}),
+    ...creatZoomLookup(params.defaultizedXAxis),
+    ...creatZoomLookup(params.defaultizedYAxis),
   };
 
   return {
@@ -399,7 +386,6 @@ useChartProZoom.getDefaultizedParams = ({ params }) => {
 useChartProZoom.getInitialState = (params) => {
   return {
     zoom: {
-      optionsLookup: params.optionsLookup,
       zoomData:
         params.initialZoom === undefined
           ? initializeZoomData(params.optionsLookup)

diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts
@@ -31,10 +31,6 @@ export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters &
 
 export interface UseChartProZoomState {
   zoom: {
-    /**
-     * The zoom options for each axis.
-     */
-    optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
     /**
      * Whether the user is currently interacting with the chart.
      * This is useful to disable animations while the user is interacting.

diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts
@@ -1,5 +1,6 @@
 export { useChartCartesianAxis } from './useChartCartesianAxis';
 export type * from './useChartCartesianAxis.types';
+export * from './useChartCartesianAxis.selectors';
 export { defaultizeAxis } from './defaultizeAxis';
 export * from './computeAxisValue';
 export * from './zoom.types';
diff --git a/...internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts b/...internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts
@@ -44,10 +44,7 @@ const selectorChartZoomMap = createSelector(
   (zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData),
 );
 
-const selectorChartZoomOptionsLookup = createSelector(
-  selectorChartZoomState,
-  (zoom) => zoom?.optionsLookup,
-);
+const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined);
 
 const selectorChartXFilter = createSelector(
   [
@@ -96,6 +93,7 @@ const selectorChartZoomAxisFilters = createSelector(
     }
 
     const xFilters = xAxis.reduce<ZoomAxisFilters>((acc, axis, index) => {
+      // @ts-expect-error The type is defined in the pro package
       const filter = xMapper(axis, index);
       if (filter !== null) {
         acc[axis.id] = filter;
@@ -104,6 +102,7 @@ const selectorChartZoomAxisFilters = createSelector(
     }, {});
 
     const yFilters = yAxis.reduce<ZoomAxisFilters>((acc, axis, index) => {
+      // @ts-expect-error The type is defined in the pro package
       const filter = yMapper(axis, index);
       if (filter !== null) {
         acc[axis.id] = filter;

diff --git a/...src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.ts b/...src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.ts
@@ -66,7 +66,6 @@ export interface UseChartCartesianAxisState {
    * @ignore - state populated by the useChartProZoomPlugin
    */
   zoom?: {
-    optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
     isInteracting: boolean;
     zoomData: ZoomData[];
   };