[charts] Fix zoom filter regression (#16507)

Co-authored-by: Jose C Quintas Jr <[email protected]>

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

@@ -1,29 +1,13 @@
 import {
   ChartRootSelector,
   createSelector,
-  selectorChartRawXAxis,
-  selectorChartRawYAxis,
+  selectorChartZoomOptionsLookup,
 } 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('x'));
-
-const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y'));
-
-export const selectorChartZoomOptionsLookup = createSelector(
-  [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup],
-  (xLookup, yLookup) => ({ ...xLookup, ...yLookup }),
-);
-
-export const selectorChartZoomData = createSelector(
-  selectorChartZoomState,
-  (zoom) => zoom.zoomData,
-);
-
 export const selectorChartZoomIsInteracting = createSelector(
   selectorChartZoomState,
   (zoom) => zoom.isInteracting,

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

@@ -8,9 +8,10 @@ import {
   getSVGPoint,
   selectorChartDrawingArea,
   ZoomData,
+  creatZoomLookup,
+  selectorChartZoomOptionsLookup,
 } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from './useChartProZoom.types';
-import { creatZoomLookup } from './creatZoomLookup';
 import {
   getDiff,
   getHorizontalCenterRatio,
@@ -21,7 +22,6 @@ import {
   preventDefault,
   zoomAtPoint,
 } from './useChartProZoom.utils';
-import { selectorChartZoomOptionsLookup } from './useChartProZoom.selectors';
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>) {
@@ -372,24 +372,20 @@ useChartProZoom.params = {
 };
 
 useChartProZoom.getDefaultizedParams = ({ params }) => {
-  const optionsLookup = {
-    ...creatZoomLookup('x')(params.defaultizedXAxis),
-    ...creatZoomLookup('y')(params.defaultizedYAxis),
-  };
-
   return {
     ...params,
-    optionsLookup,
   };
 };
 
 useChartProZoom.getInitialState = (params) => {
+  const optionsLookup = {
+    ...creatZoomLookup('x')(params.defaultizedXAxis),
+    ...creatZoomLookup('y')(params.defaultizedYAxis),
+  };
   return {
     zoom: {
       zoomData:
-        params.initialZoom === undefined
-          ? initializeZoomData(params.optionsLookup)
-          : params.initialZoom,
+        params.initialZoom === undefined ? initializeZoomData(optionsLookup) : params.initialZoom,
       isInteracting: false,
     },
   };

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

@@ -1,8 +1,6 @@
 import {
-  AxisId,
   UseChartSeriesSignature,
   ChartPluginSignature,
-  DefaultizedZoomOptions,
   UseChartCartesianAxisSignature,
   UseChartCartesianAxisDefaultizedParameters,
   ZoomData,
@@ -22,12 +20,7 @@ export interface UseChartProZoomParameters {
 }
 
 export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters &
-  UseChartCartesianAxisDefaultizedParameters & {
-    /**
-     * The zoom options for each axis.
-     */
-    optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
-  };
+  UseChartCartesianAxisDefaultizedParameters;
 
 export interface UseChartProZoomState {
   zoom: {

packages/x-charts-pro/src/typeOverloads/modules.ts

@@ -1,12 +1,11 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
-import { AxisId } from '@mui/x-charts/internals';
+import { AxisId, ZoomOptions } from '@mui/x-charts/internals';
 import {
   HeatmapItemIdentifier,
   HeatmapSeriesType,
   DefaultizedHeatmapSeriesType,
   HeatmapValueType,
 } from '../models/seriesType/heatmap';
-import { ZoomOptions as ZoomOptionsPro } from '../internals/plugins/useChartProZoom/zoom.types';
 
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
@@ -20,9 +19,7 @@ declare module '@mui/x-charts/internals' {
     };
   }
 
-  interface ZoomOptions extends ZoomOptionsPro {}
-
-  interface DefaultizedZoomOptions extends Required<ZoomOptionsPro> {
+  interface DefaultizedZoomOptions extends Required<ZoomOptions> {
     axisId: AxisId;
     axisDirection: 'x' | 'y';
   }

packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts → packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts

@@ -1,11 +1,13 @@
-import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
-import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../../../models';
+import { AxisId } from '../../../../models/axis';
 import { defaultizeZoom } from './defaultizeZoom';
+import { DefaultizedZoomOptions } from './useChartCartesianAxis.types';
 
 export const creatZoomLookup =
   (axisDirection: 'x' | 'y') =>
-  (axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) =>
+  (axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[] = []) =>
     axes.reduce<Record<AxisId, DefaultizedZoomOptions>>((acc, v) => {
+      // @ts-ignore
       const { zoom, id: axisId } = v;
       const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection);
       if (defaultizedZoom) {

packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts → packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts

@@ -1,4 +1,6 @@
-import { AxisId, DefaultizedZoomOptions, ZoomOptions } from '@mui/x-charts/internals';
+import { AxisId } from '../../../../models/axis';
+import { DefaultizedZoomOptions } from './useChartCartesianAxis.types';
+import { ZoomOptions } from './zoom.types';
 
 const defaultZoomOptions: Required<ZoomOptions> = {
   minStart: 0,

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts

@@ -3,4 +3,5 @@ export type * from './useChartCartesianAxis.types';
 export * from './useChartCartesianAxis.selectors';
 export { defaultizeAxis } from './defaultizeAxis';
 export * from './computeAxisValue';
+export * from './creatZoomLookup';
 export * from './zoom.types';

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts

@@ -10,6 +10,7 @@ import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
 import { ChartState } from '../../models/chart';
 import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
 import { ZoomAxisFilters, ZoomData } from './zoom.types';
+import { creatZoomLookup } from './creatZoomLookup';
 
 export const createZoomMap = (zoom: ZoomData[]) => {
   const zoomItemMap = new Map<AxisId, ZoomData>();
@@ -44,7 +45,14 @@ const selectorChartZoomMap = createSelector(
   (zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData),
 );
 
-const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined);
+const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x'));
+
+const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y'));
+
+export const selectorChartZoomOptionsLookup = createSelector(
+  [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup],
+  (xLookup, yLookup) => ({ ...xLookup, ...yLookup }),
+);
 
 const selectorChartXFilter = createSelector(
   [
@@ -93,7 +101,6 @@ 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;
@@ -102,7 +109,6 @@ 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;

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts

@@ -7,7 +7,57 @@ export type ZoomData = { axisId: AxisId; start: number; end: number };
 export type ZoomFilterMode = 'keep' | 'discard';
 
 export interface ZoomOptions {
-  filterMode?: ZoomFilterMode;
+  /**
+   * The starting percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 0
+   */
+  minStart?: number;
+  /**
+   * The ending percentage of the zoom range. In the range of 0 to 100.
+   *
+   * @default 100
+   */
+  maxEnd?: number;
+  /**
+   * The step size of the zooming function. Defines the granularity of the zoom.
+   *
+   * @default 5
+   */
+  step?: number;
+  /**
+   * Restricts the minimum span size in the range of 0 to 100.
+   *
+   * If the span size is smaller than the minSpan, the span will be resized to the minSpan.
+   *
+   * @default 10
+   */
+  minSpan?: number;
+  /**
+   * Restricts the maximum span size in the range of 0 to 100.
+   *
+   * If the span size is larger than the maxSpan, the span will be resized to the maxSpan.
+   *
+   * @default 100
+   */
+  maxSpan?: number;
+  /**
+   * Set to `false` to disable panning. Useful when you want to pan programmatically,
+   * or to show only a specific section of the chart.
+   *
+   * @default true
+   */
+  panning?: boolean;
+  /**
+   * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+   *
+   * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+   * - `discard`: The data outside the zoomed range is discarded for the other axes.
+   *    The other axes will be adjusted to fit the zoomed range.
+   *
+   * @default 'keep'
+   */
+  filterMode?: 'discard' | 'keep';
 }
 
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;