[charts] Fix axis zoom being disabled when not specified in initialZoom (#17500)

Author: bernardobelchior

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.test.ts

@@ -0,0 +1,72 @@
+import { expect } from 'chai';
+import { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { initializeZoomData } from './useChartProZoom';
+
+describe('initializeZoomData', () => {
+  const defaultZoomOptions: DefaultizedZoomOptions = {
+    axisId: 'x',
+    axisDirection: 'x',
+    minStart: 0,
+    maxEnd: 100,
+    step: 5,
+    minSpan: 10,
+    maxSpan: 100,
+    panning: true,
+    filterMode: 'keep',
+  };
+
+  it('should initialize zoom data for all axes based on provided options when no zoom data is given', () => {
+    const options = {
+      x: { ...defaultZoomOptions, axisId: 'x', minStart: 0, maxEnd: 100 },
+      y: { ...defaultZoomOptions, axisDirection: 'y', axisId: 'y', minStart: 10, maxEnd: 50 },
+    } satisfies Record<AxisId, DefaultizedZoomOptions>;
+
+    const result = initializeZoomData(options);
+
+    expect(result).to.deep.equal([
+      { axisId: 'x', start: 0, end: 100 },
+      { axisId: 'y', start: 10, end: 50 },
+    ]);
+  });
+
+  it('should override options with provided zoom data when matching axisId exists', () => {
+    const options = {
+      x: { ...defaultZoomOptions, axisId: 'x', minStart: 0, maxEnd: 100 },
+      y: { ...defaultZoomOptions, axisDirection: 'y', axisId: 'y', minStart: 10, maxEnd: 50 },
+    } satisfies Record<AxisId, DefaultizedZoomOptions>;
+
+    const zoomData: readonly ZoomData[] = [{ axisId: 'x', start: 20, end: 60 }];
+    const result = initializeZoomData(options, zoomData);
+
+    expect(result).to.deep.equal([
+      { axisId: 'x', start: 20, end: 60 },
+      { axisId: 'y', start: 10, end: 50 },
+    ]);
+  });
+
+  it('should ignore zoom data if its axisId is not present in options', () => {
+    const options = {
+      x: { ...defaultZoomOptions, axisId: 'x', minStart: 0, maxEnd: 100 },
+    } satisfies Record<AxisId, DefaultizedZoomOptions>;
+
+    const zoomData: readonly ZoomData[] = [{ axisId: 'y', start: 10, end: 50 }];
+    const result = initializeZoomData(options, zoomData);
+
+    expect(result).to.deep.equal([{ axisId: 'x', start: 0, end: 100 }]);
+  });
+
+  it('should handle an empty options object without errors', () => {
+    const result = initializeZoomData({});
+    expect(result).to.deep.equal([]);
+  });
+
+  it('should handle undefined zoomData gracefully', () => {
+    const options = {
+      x: { ...defaultZoomOptions, axisId: 'x', minStart: 0, maxEnd: 100 },
+    } satisfies Record<AxisId, DefaultizedZoomOptions>;
+
+    const result = initializeZoomData(options, undefined);
+
+    expect(result).to.deep.equal([{ axisId: 'x', start: 0, end: 100 }]);
+  });
+});

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts

@@ -25,13 +25,32 @@ import {
   preventDefault,
   zoomAtPoint,
 } from './useChartProZoom.utils';
+
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>) {
-  return Object.values(options).map(({ axisId, minStart: start, maxEnd: end }) => ({
-    axisId,
-    start,
-    end,
-  }));
+export function initializeZoomData(
+  options: Record<AxisId, DefaultizedZoomOptions>,
+  zoomData?: readonly ZoomData[],
+) {
+  const zoomDataMap = new Map<AxisId, ZoomData>();
+
+  zoomData?.forEach((zoom) => {
+    const option = options[zoom.axisId];
+    if (option) {
+      zoomDataMap.set(zoom.axisId, zoom);
+    }
+  });
+
+  return Object.values(options).map(({ axisId, minStart: start, maxEnd: end }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId)!;
+    }
+
+    return {
+      axisId,
+      start,
+      end,
+    };
+  });
 }
 
 export const useChartProZoom: ChartPlugin<UseChartProZoomSignature> = ({
@@ -461,15 +480,13 @@ useChartProZoom.getInitialState = (params) => {
     ...createZoomLookup('x')(defaultizedXAxis),
     ...createZoomLookup('y')(defaultizedYAxis),
   };
+  const userZoomData =
+    // eslint-disable-next-line no-nested-ternary
+    zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+
   return {
     zoom: {
-      zoomData:
-        // eslint-disable-next-line no-nested-ternary
-        zoomData !== undefined
-          ? zoomData
-          : initialZoom !== undefined
-            ? initialZoom
-            : initializeZoomData(optionsLookup),
+      zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
     },