@mui/x-charts 8.2.0 → 8.3.0

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -1,6 +1,41 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
+export declare const selectorChartMargin: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => import("./useChartDimensions.types.js").ChartMargin) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    margin: import("./useChartDimensions.types.js").ChartMargin;
+    width: number;
+    height: number;
+    propsWidth: number | undefined;
+    propsHeight: number | undefined;
+  }) => import("./useChartDimensions.types.js").ChartMargin;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    margin: import("./useChartDimensions.types.js").ChartMargin;
+    width: number;
+    height: number;
+    propsWidth: number | undefined;
+    propsHeight: number | undefined;
+  }) => import("./useChartDimensions.types.js").ChartMargin) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("./useChartDimensions.types.js").ChartMargin;
+  dependencies: [ChartRootSelector<UseChartDimensionsSignature>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import("reselect").weakMapMemoize;
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+};
 export declare const selectorChartDrawingArea: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<import("../../../index.js").UseChartCartesianAxisState>) => {

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js

@@ -1,7 +1,7 @@
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartBottomAxisSize, selectorChartLeftAxisSize, selectorChartRightAxisSize, selectorChartTopAxisSize } from "../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js";
 export const selectorChartDimensionsState = state => state.dimensions;
-const selectorChartMargin = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
+export const selectorChartMargin = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.margin);
 const selectorChartWidth = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.width);
 const selectorChartHeight = createSelector(selectorChartDimensionsState, dimensionsState => dimensionsState.height);
 const selectorChartTopMargin = createSelector(selectorChartMargin, margin => margin.top);

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.ts

@@ -1,5 +1,4 @@
-import { AxisConfig, ScaleName } from "../../../../models/index.js";
-import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId } from "../../../../models/axis.js";
+import { ChartsXAxisProps, ChartsAxisProps, ChartsYAxisProps, AxisId, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { ChartDrawingArea } from "../../../../hooks/index.js";
 import { ChartSeriesConfig } from "../../models/seriesConfig/index.js";
@@ -19,11 +18,11 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   getFilters?: GetZoomAxisFilters;
 };
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
-  axis?: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+  axis?: DefaultedYAxis[];
   axisDirection: 'y';
 }): ComputeResult<ChartsYAxisProps>;
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
-  axis?: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+  axis?: DefaultedXAxis[];
   axisDirection: 'x';
 }): ComputeResult<ChartsXAxisProps>;
 export {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.ts

@@ -1,5 +1,13 @@
+import { ZoomOptions } from "./zoom.types.js";
 import { XAxis, YAxis } from "../../../../models/index.js";
 import { DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
 import { DatasetType } from "../../../../models/seriesType/config.js";
-export declare function defaultizeXAxis(inAxes: readonly XAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedXAxis[];
-export declare function defaultizeYAxis(inAxes: readonly YAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedYAxis[];
+type InXAxis = XAxis & {
+  zoom?: boolean | ZoomOptions;
+};
+export declare function defaultizeXAxis(inAxes: readonly InXAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedXAxis[];
+type InYAxis = YAxis & {
+  zoom?: boolean | ZoomOptions;
+};
+export declare function defaultizeYAxis(inAxes: readonly InYAxis[] | undefined, dataset: Readonly<DatasetType> | undefined): DefaultedYAxis[];
+export {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
+import { defaultizeZoom } from "./defaultizeZoom.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.js";
 export function defaultizeXAxis(inAxes, dataset) {
   const offsets = {
@@ -17,17 +19,22 @@ export function defaultizeXAxis(inAxes, dataset) {
     const defaultPosition = index === 0 ? 'bottom' : 'none';
     const position = axisConfig.position ?? defaultPosition;
     const defaultHeight = DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const id = axisConfig.id ?? `defaultized-x-axis-${index}`;
     const sharedConfig = _extends({
-      id: `defaultized-x-axis-${index}`,
       offset: offsets[position]
     }, axisConfig, {
+      id,
       position,
-      height: axisConfig.height ?? defaultHeight
+      height: axisConfig.height ?? defaultHeight,
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'x')
     });
 
     // Increment the offset for the next axis
     if (position !== 'none') {
       offsets[position] += sharedConfig.height;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += ZOOM_SLIDER_SIZE;
+      }
     }
 
     // If `dataKey` is NOT provided
@@ -62,17 +69,22 @@ export function defaultizeYAxis(inAxes, dataset) {
     const defaultPosition = index === 0 ? 'left' : 'none';
     const position = axisConfig.position ?? defaultPosition;
     const defaultWidth = DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+    const id = axisConfig.id ?? `defaultized-y-axis-${index}`;
     const sharedConfig = _extends({
-      id: `defaultized-y-axis-${index}`,
       offset: offsets[position]
     }, axisConfig, {
+      id,
       position,
-      width: axisConfig.width ?? defaultWidth
+      width: axisConfig.width ?? defaultWidth,
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'y')
     });
 
     // Increment the offset for the next axis
     if (position !== 'none') {
       offsets[position] += sharedConfig.width;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += ZOOM_SLIDER_SIZE;
+      }
     }
 
     // If `dataKey` is NOT provided

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.js

@@ -6,7 +6,10 @@ const defaultZoomOptions = {
   minSpan: 10,
   maxSpan: 100,
   panning: true,
-  filterMode: 'keep'
+  filterMode: 'keep',
+  slider: {
+    enabled: false
+  }
 };
 export const defaultizeZoom = (zoom, axisId, axisDirection) => {
   if (!zoom) {
@@ -21,5 +24,7 @@ export const defaultizeZoom = (zoom, axisId, axisDirection) => {
   return _extends({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom);
+  }, defaultZoomOptions, zoom, {
+    slider: _extends({}, defaultZoomOptions.slider, zoom.slider)
+  });
 };

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.js

@@ -1,6 +1,7 @@
+import { ZOOM_SLIDER_SIZE } from "../../../constants.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { createSelector } from "../../utils/selectors.js";
-export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) : acc, 0));
-export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) : acc, 0));
-export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) : acc, 0));
-export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) : acc, 0));
+export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'left' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis], yAxis => (yAxis ?? []).reduce((acc, axis) => axis.position === 'right' ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'top' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));
+export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis], xAxis => (xAxis ?? []).reduce((acc, axis) => axis.position === 'bottom' ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0));

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.ts

@@ -47,9 +47,10 @@ export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = Sca
   defaultizedXAxis: DefaultedXAxis<S>[];
   defaultizedYAxis: DefaultedYAxis<S>[];
 };
-export interface DefaultizedZoomOptions extends Required<ZoomOptions> {
+export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
+  slider: NonNullable<Required<ZoomOptions['slider']>>;
 }
 export interface UseChartCartesianAxisState {
   /**

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -38,6 +38,38 @@ export declare const selectorChartZoomIsInteracting: ((state: import("../../core
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
+export declare const selectorChartZoomMap: ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => Map<AxisId, ZoomData> | undefined) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    isInteracting: boolean;
+    zoomData: readonly ZoomData[];
+  } | undefined) => Map<AxisId, ZoomData> | undefined;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    isInteracting: boolean;
+    zoomData: readonly ZoomData[];
+  } | undefined) => Map<AxisId, ZoomData> | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => Map<AxisId, ZoomData> | undefined;
+  dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+    isInteracting: boolean;
+    zoomData: readonly ZoomData[];
+  } | undefined];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import("reselect").weakMapMemoize;
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+};
 export declare const selectorChartZoomOptionsLookup: ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => {
@@ -179,6 +211,133 @@ export declare const selectorChartZoomOptionsLookup: ((state: import("../../core
   memoize: typeof import("reselect").weakMapMemoize;
   argsMemoize: typeof import("reselect").weakMapMemoize;
 };
+export declare const selectorChartAxisZoomOptionsLookup: ((state: any, axisId: AxisId) => import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>, resultFuncArgs_2: AxisId) => import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
+  memoizedResultFunc: ((resultFuncArgs_0: Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>, resultFuncArgs_2: AxisId) => import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
+  dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>;
+    memoizedResultFunc: ((resultFuncArgs_0: import("../../../index.js").DefaultedXAxis[] | undefined) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>;
+    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+      cacheKey: import("../../models/index.js").ChartStateCacheKey;
+    }) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined;
+      memoizedResultFunc: ((resultFuncArgs_0: {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined) => import("../../../index.js").DefaultedXAxis[] | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => import("../../../index.js").DefaultedXAxis[] | undefined;
+      dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      memoize: typeof import("reselect").weakMapMemoize;
+      argsMemoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, ((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+    cacheKey: import("../../models/index.js").ChartStateCacheKey;
+  }) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: import("../../../index.js").DefaultedYAxis[] | undefined) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>;
+    memoizedResultFunc: ((resultFuncArgs_0: import("../../../index.js").DefaultedYAxis[] | undefined) => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => Record<AxisId, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions>;
+    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+      cacheKey: import("../../models/index.js").ChartStateCacheKey;
+    }) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined;
+      memoizedResultFunc: ((resultFuncArgs_0: {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined) => import("../../../index.js").DefaultedYAxis[] | undefined) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => import("../../../index.js").DefaultedYAxis[] | undefined;
+      dependencies: [(state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+        x: import("../../../index.js").DefaultedXAxis[];
+        y: import("../../../index.js").DefaultedYAxis[];
+      } | undefined];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      memoize: typeof import("reselect").weakMapMemoize;
+      argsMemoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, (state: any, axisId: AxisId) => AxisId];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import("reselect").weakMapMemoize;
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+};
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -20,10 +20,11 @@ const selectorChartZoomState = state => state.zoom;
  */
 
 export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom?.isInteracting);
-const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+export const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
 const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, createZoomLookup('x'));
 const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, createZoomLookup('y'));
 export const selectorChartZoomOptionsLookup = createSelector([selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], (xLookup, yLookup) => _extends({}, xLookup, yLookup));
+export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup, (state, axisId) => axisId], (xLookup, yLookup, axisId) => xLookup[axisId] ?? yLookup[axisId]);
 const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
   zoomMap,
   zoomOptions,

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.d.ts

@@ -67,6 +67,16 @@ export interface ZoomOptions {
    * @default 'keep'
    */
   filterMode?: ZoomFilterMode;
+  /**
+   * Configures the zoom slider. The slider is an element that shows the zoomed range and allows its manipulation.
+   */
+  slider?: ZoomSliderOptions;
+}
+export interface ZoomSliderOptions {
+  /**
+   * If `true`, the slider will be shown.
+   */
+  enabled?: boolean;
 }
 export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
 export type GetZoomAxisFilters = (params: {

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -1,25 +1,40 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export const useChartHighlight = ({
   store,
-  params,
-  models
+  params
 }) => {
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'highlightedItem',
+    controlled: params.highlightedItem,
+    defaultValue: null
+  });
   useEnhancedEffect(() => {
-    store.update(prevState => _extends({}, prevState, {
+    store.update(prevState => prevState.highlight.item === params.highlightedItem ? prevState : _extends({}, prevState, {
       highlight: _extends({}, prevState.highlight, {
-        item: models.highlightedItem.value
+        item: params.highlightedItem
       })
     }));
-  }, [store, models.highlightedItem.value]);
+  }, [store, params.highlightedItem]);
   const clearHighlight = useEventCallback(() => {
     params.onHighlightChange?.(null);
-    models.highlightedItem.setControlledValue(null);
+    store.update(prev => _extends({}, prev, {
+      highlight: {
+        item: null
+      }
+    }));
   });
   const setHighlight = useEventCallback(newItem => {
     params.onHighlightChange?.(newItem);
-    models.highlightedItem.setControlledValue(newItem);
+    store.update(prev => _extends({}, prev, {
+      highlight: {
+        item: newItem
+      }
+    }));
   });
   return {
     instance: {
@@ -28,14 +43,14 @@ export const useChartHighlight = ({
     }
   };
 };
-useChartHighlight.models = {
-  highlightedItem: {
-    getDefaultValue: () => null
-  }
-};
+useChartHighlight.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  highlightedItem: params.highlightedItem ?? null
+});
 useChartHighlight.getInitialState = params => ({
   highlight: {
-    item: params.highlightedItem ?? null
+    item: params.highlightedItem
   }
 });
 useChartHighlight.params = {

package/esm/internals/plugins/models/helpers.d.ts

@@ -2,6 +2,5 @@ import type { ChartAnyPluginSignature, ChartPlugin } from "./plugin.js";
 type IsAny<T> = 0 extends 1 & T ? true : false;
 export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
 export type MergeSignaturesProperty<TSignatures extends readonly any[], TProperty extends keyof ChartAnyPluginSignature> = TSignatures extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends ChartAnyPluginSignature ? P[TProperty] & MergeSignaturesProperty<R, TProperty> : {} : {};
-export type ConvertPluginsIntoSignatures<TPlugins extends readonly ChartPlugin<ChartAnyPluginSignature>[]> = TPlugins extends readonly [plugin: infer TPlugin, ...otherPlugin: infer R] ? R extends readonly ChartPlugin<any>[] ? TPlugin extends ChartPlugin<infer TSignature> ? readonly [TSignature, ...ConvertPluginsIntoSignatures<R>] : never : never : [];
 export type ConvertSignaturesIntoPlugins<TSignatures extends readonly ChartAnyPluginSignature[]> = TSignatures extends readonly [signature: infer TSignature, ...otherSignatures: infer R] ? R extends readonly ChartAnyPluginSignature[] ? TSignature extends ChartAnyPluginSignature ? readonly [ChartPlugin<TSignature>, ...ConvertSignaturesIntoPlugins<R>] : never : never : [];
 export {};

package/esm/internals/plugins/models/plugin.d.ts

@@ -12,11 +12,6 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
    * The parameters after being processed with the default values.
    */
   params: ChartUsedDefaultizedParams<TSignature>;
-  /**
-   * The store of controlled properties.
-   * If they are not controlled by the user, they will be initialized by the plugin.
-   */
-  models: ChartUsedControlModels<TSignature>;
   /**
    * The store that can be used to access the state of other plugins.
    */
@@ -38,9 +33,6 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
    */
   seriesConfig: ChartSeriesConfig<any>;
 }
-type ChartControlModelsInitializer<TSignature extends ChartAnyPluginSignature> = { [TControlled in keyof TSignature['models']]: {
-  getDefaultValue: (params: TSignature['defaultizedParams']) => Exclude<TSignature['defaultizedParams'][TControlled], undefined>;
-} };
 type ChartResponse<TSignature extends ChartAnyPluginSignature> = OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> & OptionalIfEmpty<'instance', TSignature['instance']>;
 export type ChartPluginSignature<T extends {
   params?: {};
@@ -83,14 +75,6 @@ export type ChartPluginSignature<T extends {
   publicAPI: T extends {
     publicAPI: {};
   } ? T['publicAPI'] : {};
-  /**
-   * A helper for controlled properties.
-   * Properties defined here can be controlled by the user. If they are not controlled, they will be initialized by the plugin.
-   */
-  models: T extends {
-    defaultizedParams: {};
-    modelNames: keyof T['defaultizedParams'];
-  } ? { [TControlled in T['modelNames']]-?: ChartControlModel<Exclude<T['defaultizedParams'][TControlled], undefined>> } : {};
   /**
    * Any plugins that this plugin depends on.
    */
@@ -110,7 +94,6 @@ export type ChartAnyPluginSignature = ChartPluginSignature<{
   instance: any;
   publicAPI: any;
   state: any;
-  modelNames: any;
   dependencies: any;
   optionalDependencies: any;
 }>;
@@ -124,14 +107,6 @@ export type ChartUsedInstance<TSignature extends ChartAnyPluginSignature> = Plug
    */
   $$signature: TSignature;
 };
-export interface ChartControlModel<TValue> {
-  name: string;
-  value: TValue;
-  setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
-  isControlled: boolean;
-}
-type RemoveSetValue<Models extends Record<string, ChartControlModel<any>>> = { [K in keyof Models]: Omit<Models[K], 'setValue'> };
-export type ChartUsedControlModels<TSignature extends ChartAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<ChartRequiredPlugins<TSignature>, 'models'>>;
 export type ChartUsedStore<TSignature extends ChartAnyPluginSignature> = ChartStore<[TSignature, ...TSignature['dependencies']], TSignature['optionalDependencies']>;
 export type ChartPlugin<TSignature extends ChartAnyPluginSignature> = {
   /**
@@ -152,11 +127,6 @@ export type ChartPlugin<TSignature extends ChartAnyPluginSignature> = {
    * @returns {TSignature['state']} The initial state of the plugin.
    */
   getInitialState?: (params: ChartUsedDefaultizedParams<TSignature>, currentState: MergeSignaturesProperty<ChartRequiredPlugins<TSignature>, 'state'>, seriesConfig: ChartSeriesConfig<any>) => TSignature['state'];
-  /**
-   * The configuration of properties that can be controlled by the user.
-   * If they are not controlled, they will be initialized by the plugin.
-   */
-  models?: ChartControlModelsInitializer<TSignature>;
   /**
    * An object where each property used by the plugin is set to `true`.
    */

package/esm/internals/store/useCharts.d.ts

@@ -23,4 +23,4 @@ export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatur
     chartRootRef: React.RefObject<HTMLDivElement | null>;
   };
 };
-export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;
+export declare function useChartApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): React.RefObject<T>;

package/esm/internals/store/useCharts.js

@@ -3,7 +3,6 @@ import useId from '@mui/utils/useId';
 import { ChartStore } from "../plugins/utils/ChartStore.js";
 import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
 import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
-import { useChartModels } from "./useChartModels.js";
 let globalId = 0;
 
 /**
@@ -23,7 +22,6 @@ export function useCharts(inPlugins, props, seriesConfig) {
     props
   });
   pluginParams.id = pluginParams.id ?? chartId;
-  const models = useChartModels(plugins, pluginParams);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useChartApiInitialization(props.apiRef);
@@ -53,11 +51,10 @@ export function useCharts(inPlugins, props, seriesConfig) {
       store: storeRef.current,
       svgRef: innerSvgRef,
       chartRootRef: innerChartRootRef,
-      seriesConfig,
-      models
+      seriesConfig
     });
     if (pluginResponse.publicAPI) {
-      Object.assign(publicAPI, pluginResponse.publicAPI);
+      Object.assign(publicAPI.current, pluginResponse.publicAPI);
     }
     if (pluginResponse.instance) {
       Object.assign(instance, pluginResponse.instance);
@@ -66,7 +63,7 @@ export function useCharts(inPlugins, props, seriesConfig) {
   plugins.forEach(runPlugin);
   const contextValue = React.useMemo(() => ({
     store: storeRef.current,
-    publicAPI,
+    publicAPI: publicAPI.current,
     instance,
     svgRef: innerSvgRef,
     chartRootRef: innerChartRootRef
@@ -75,14 +72,16 @@ export function useCharts(inPlugins, props, seriesConfig) {
     contextValue
   };
 }
+function initializeInputApiRef(inputApiRef) {
+  if (inputApiRef.current == null) {
+    inputApiRef.current = {};
+  }
+  return inputApiRef;
+}
 export function useChartApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
-    if (inputApiRef.current == null) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      inputApiRef.current = {};
-    }
-    return inputApiRef.current;
+    return initializeInputApiRef(inputApiRef);
   }
-  return fallbackPublicApiRef.current;
+  return fallbackPublicApiRef;
 }

package/esm/locales/enUS.d.ts

@@ -8,6 +8,8 @@ export declare const enUS: {
         localeText: {
           loading?: string | undefined;
           noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
         };
       };
     };