@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.8

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

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { createSelector } from "../../utils/selectors.js";
+import { computeAxisValue } from "./computeAxisValue.js";
+import { createAxisFilterMapper, createGetAxisFilters } from "./createAxisFilterMapper.js";
+export const createZoomMap = zoom => {
+  const zoomItemMap = new Map();
+  zoom.forEach(zoomItem => {
+    zoomItemMap.set(zoomItem.axisId, zoomItem);
+  });
+  return zoomItemMap;
+};
+export const selectorChartCartesianAxisState = state => state.cartesianAxis;
+const selectorChartZoomState = state => state.zoom;
+export const selectorChartRawXAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.x);
+export const selectorChartRawYAxis = createSelector(selectorChartCartesianAxisState, axis => axis?.y);
+
+/**
+ * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
+ */
+
+const selectorChartZoomMap = createSelector(selectorChartZoomState, zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
+const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, zoom => zoom?.optionsLookup);
+const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'x'
+}));
+const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartSeriesConfig, selectorChartSeriesProcessed], (zoomMap, zoomOptions, seriesConfig, formattedSeries) => zoomMap && zoomOptions && createAxisFilterMapper({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction: 'y'
+}));
+const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+  if (xMapper === undefined || yMapper === undefined) {
+    // Early return if there is no zoom.
+    return undefined;
+  }
+  const xFilters = xAxis.reduce((acc, axis, index) => {
+    const filter = xMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  const yFilters = yAxis.reduce((acc, axis, index) => {
+    const filter = yMapper(axis, index);
+    if (filter !== null) {
+      acc[axis.id] = filter;
+    }
+    return acc;
+  }, {});
+  if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+    return undefined;
+  }
+  return createGetAxisFilters(_extends({}, xFilters, yFilters));
+});
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+export const selectorChartXAxis = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'x',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));
+export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'y',
+  zoomMap,
+  zoomOptions,
+  getFilters
+}));

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

@@ -0,0 +1,76 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartPluginSignature } from '../../models';
+import { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
+import { AxisDefaultized, ScaleName, ChartsXAxisProps, ChartsYAxisProps, AxisId, AxisConfig } from '../../../../models/axis';
+import { UseChartSeriesSignature } from '../../corePlugins/useChartSeries';
+import { ZoomData, ZoomOptions } from './zoom.types';
+export type DefaultizedAxisConfig<AxisProps> = {
+    [axisId: AxisId]: AxisDefaultized<ScaleName, any, AxisProps>;
+};
+export type CartesianContextState = {
+    /**
+     * Mapping from x-axis key to scaling configuration.
+     */
+    xAxis: DefaultizedAxisConfig<ChartsXAxisProps>;
+    /**
+     * Mapping from y-axis key to scaling configuration.
+     */
+    yAxis: DefaultizedAxisConfig<ChartsYAxisProps>;
+    /**
+     * The x-axes IDs sorted by order they got provided.
+     */
+    xAxisIds: AxisId[];
+    /**
+     * The y-axes IDs sorted by order they got provided.
+     */
+    yAxisIds: AxisId[];
+};
+export interface UseChartCartesianAxisParameters {
+    /**
+     * The configuration of the x-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+    /**
+     * The configuration of the y-axes.
+     * If not provided, a default axis config is used.
+     * An array of [[AxisConfig]] objects.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
+    dataset?: DatasetType;
+}
+export type UseChartCartesianAxisDefaultizedParameters = UseChartCartesianAxisParameters & {
+    defaultizedXAxis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+    defaultizedYAxis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+};
+export interface DefaultizedZoomOptions extends Required<ZoomOptions> {
+    axisId: AxisId;
+    axisDirection: 'x' | 'y';
+}
+export interface UseChartCartesianAxisState {
+    /**
+     * @ignore - state populated by the useChartProZoomPlugin
+     */
+    zoom?: {
+        optionsLookup: Record<AxisId, DefaultizedZoomOptions>;
+        isInteracting: boolean;
+        zoomData: ZoomData[];
+    };
+    cartesianAxis: {
+        x: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
+        y: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
+    };
+}
+export type ExtremumFilter = (value: {
+    x: number | Date | string | null;
+    y: number | Date | string | null;
+}, dataIndex: number) => boolean;
+export interface UseChartCartesianAxisInstance {
+}
+export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+    params: UseChartCartesianAxisParameters;
+    defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+    state: UseChartCartesianAxisState;
+    dependencies: [UseChartSeriesSignature<SeriesType>];
+}>;

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

@@ -0,0 +1,18 @@
+import { AxisId } from '../../../../models/axis';
+import type { ExtremumFilter } from './useChartCartesianAxis.types';
+export type ZoomData = {
+    axisId: AxisId;
+    start: number;
+    end: number;
+};
+export type ZoomFilterMode = 'keep' | 'discard';
+export interface ZoomOptions {
+    filterMode?: ZoomFilterMode;
+}
+export type ZoomAxisFilters = Record<AxisId, ExtremumFilter>;
+export type GetZoomAxisFilters = (params: {
+    currentAxisId: AxisId | undefined;
+    seriesXAxisId?: AxisId;
+    seriesYAxisId?: AxisId;
+    isDefaultAxis: boolean;
+}) => ExtremumFilter;

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -1,6 +1,6 @@
 import { ChartRootSelector } from '../../utils/selectors';
 import { UseChartInteractionSignature } from './useChartInteraction.types';
-export declare const selectorChartsInteractionItem: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionItem: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => import("../../../..").BarItemIdentifier | import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").PieItemIdentifier | null) & {
     clearCache: () => void;
@@ -28,10 +28,10 @@ export declare const selectorChartsInteractionItem: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => import("./useChartInteraction.types").AxisInteractionData) & {
     clearCache: () => void;
@@ -59,10 +59,10 @@ export declare const selectorChartsInteractionAxis: ((state: import("../../coreP
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionXAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => {
     value: number | Date | string;
@@ -102,10 +102,10 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionYAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => {
     value: number | Date | string;
@@ -145,10 +145,10 @@ export declare const selectorChartsInteractionYAxis: ((state: import("../../core
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionItemIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionItemIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
@@ -162,7 +162,7 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
         cacheKey: import("../../models").ChartStateCacheKey;
     }) => import("../../../..").BarItemIdentifier | import("../../../..").ScatterItemIdentifier | import("../../../..").LineItemIdentifier | import("../../../..").PieItemIdentifier | null) & {
         clearCache: () => void;
@@ -190,18 +190,18 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        memoize: typeof import("reselect").weakMapMemoize;
         argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
@@ -221,7 +221,7 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
         cacheKey: import("../../models").ChartStateCacheKey;
     }) => {
         value: number | Date | string;
@@ -261,18 +261,18 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        memoize: typeof import("reselect").weakMapMemoize;
         argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean) & {
     clearCache: () => void;
@@ -292,7 +292,7 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         resetResultsCount: () => void;
     };
     lastResult: () => boolean;
-    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+    dependencies: [((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
         cacheKey: import("../../models").ChartStateCacheKey;
     }) => {
         value: number | Date | string;
@@ -332,18 +332,18 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        memoize: typeof import("reselect").weakMapMemoize;
         argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
+export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../../models").ChartStateCacheKey;
 }) => boolean | undefined) & {
     clearCache: () => void;
@@ -371,6 +371,6 @@ export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import(
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };

package/internals/plugins/featurePlugins/useChartZAxis/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartZAxis } from './useChartZAxis';
+export type * from './useChartZAxis.types';
+export * from './useChartZAxis.selectors';

package/internals/plugins/featurePlugins/useChartZAxis/index.js

@@ -0,0 +1,2 @@
+export { useChartZAxis } from "./useChartZAxis.js";
+export * from "./useChartZAxis.selectors.js";

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '../../models';
+import { UseChartZAxisSignature } from './useChartZAxis.types';
+export declare const useChartZAxis: ChartPlugin<UseChartZAxisSignature>;

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.js

@@ -0,0 +1,86 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+function addDefaultId(axisConfig, defaultId) {
+  if (axisConfig.id !== undefined) {
+    return axisConfig;
+  }
+  return _extends({
+    id: defaultId
+  }, axisConfig);
+}
+function processColorMap(axisConfig) {
+  if (!axisConfig.colorMap) {
+    return axisConfig;
+  }
+  return _extends({}, axisConfig, {
+    colorScale: axisConfig.colorMap.type === 'ordinal' && axisConfig.data ? getOrdinalColorScale(_extends({
+      values: axisConfig.data
+    }, axisConfig.colorMap)) : getColorScale(axisConfig.colorMap.type === 'continuous' ? _extends({
+      min: axisConfig.min,
+      max: axisConfig.max
+    }, axisConfig.colorMap) : axisConfig.colorMap)
+  });
+}
+function getZAxisState(zAxis, dataset) {
+  if (!zAxis || zAxis.length === 0) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const zAxisLookup = {};
+  const axisIds = [];
+  zAxis.forEach((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+    const defaultizedId = axisConfig.id ?? `defaultized-z-axis-${index}`;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      zAxisLookup[defaultizedId] = processColorMap(addDefaultId(axisConfig, defaultizedId));
+      axisIds.push(defaultizedId);
+      return;
+    }
+    if (dataset === undefined) {
+      throw new Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    zAxisLookup[defaultizedId] = processColorMap(addDefaultId(_extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    }), defaultizedId));
+    axisIds.push(defaultizedId);
+  });
+  return {
+    axis: zAxisLookup,
+    axisIds
+  };
+}
+export const useChartZAxis = ({
+  params,
+  store
+}) => {
+  const {
+    zAxis,
+    dataset
+  } = params;
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartZAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.update(prev => _extends({}, prev, {
+      zAxis: getZAxisState(zAxis, dataset)
+    }));
+  }, [zAxis, dataset, store]);
+  return {};
+};
+useChartZAxis.params = {
+  zAxis: true,
+  dataset: true
+};
+useChartZAxis.getInitialState = params => ({
+  zAxis: getZAxisState(params.zAxis, params.dataset)
+});

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -0,0 +1,45 @@
+import { ChartState } from '../../models/chart';
+import { UseChartZAxisSignature } from './useChartZAxis.types';
+export declare const selectorChartZAxis: ((state: import("../../corePlugins/useChartId/useChartId.types").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../../..").ChartsSeriesConfig> & import("./useChartZAxis.types").UseChartZAxisState & Partial<{}> & {
+    cacheKey: import("../../models").ChartStateCacheKey;
+}) => {
+    axis: {
+        [axisId: string]: import("../../..").ZAxisDefaultized;
+    };
+    axisIds: import("../../..").AxisId[];
+}) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: ChartState<[UseChartZAxisSignature]>) => {
+        axis: {
+            [axisId: string]: import("../../..").ZAxisDefaultized;
+        };
+        axisIds: import("../../..").AxisId[];
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: ChartState<[UseChartZAxisSignature]>) => {
+        axis: {
+            [axisId: string]: import("../../..").ZAxisDefaultized;
+        };
+        axisIds: import("../../..").AxisId[];
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        axis: {
+            [axisId: string]: import("../../..").ZAxisDefaultized;
+        };
+        axisIds: import("../../..").AxisId[];
+    };
+    dependencies: [(state: ChartState<[UseChartZAxisSignature]>) => ChartState<[UseChartZAxisSignature]>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.js

@@ -0,0 +1,3 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectRootState = state => state;
+export const selectorChartZAxis = createSelector([selectRootState], state => state.zAxis);

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.types.d.ts

@@ -0,0 +1,39 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { ChartPluginSignature } from '../../models';
+import { DatasetType } from '../../../../models/seriesType/config';
+import { AxisId } from '../../../../models/axis';
+import { ZAxisConfig, ZAxisDefaultized } from '../../../../models/z-axis';
+type DefaultizedZAxisConfig = {
+    [axisId: string]: ZAxisDefaultized;
+};
+export interface UseChartZAxisParameters {
+    /**
+     * The configuration of the z-axes.
+     */
+    zAxis?: MakeOptional<ZAxisConfig, 'id'>[];
+    /**
+     * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+     */
+    dataset?: DatasetType;
+}
+export type UseChartZAxisDefaultizedParameters = UseChartZAxisParameters;
+export interface UseChartZAxisState {
+    zAxis: {
+        /**
+         * Mapping from z-axis key to scaling configuration.
+         */
+        axis: DefaultizedZAxisConfig;
+        /**
+         * The z-axes IDs sorted by order they got provided.
+         */
+        axisIds: AxisId[];
+    };
+}
+export interface UseChartZAxisInstance {
+}
+export type UseChartZAxisSignature = ChartPluginSignature<{
+    params: UseChartZAxisParameters;
+    defaultizedParams: UseChartZAxisDefaultizedParameters;
+    state: UseChartZAxisState;
+}>;
+export {};

package/internals/plugins/models/index.d.ts

@@ -1,3 +1,4 @@
 export * from './helpers';
 export * from './plugin';
 export * from './chart';
+export * from './seriesConfig';

package/internals/plugins/models/index.js

@@ -1,3 +1,4 @@
 export * from "./helpers.js";
 export * from "./plugin.js";
-export * from "./chart.js";
+export * from "./chart.js";
+export * from "./seriesConfig/index.js";

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

@@ -2,13 +2,21 @@ import * as React from 'react';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
 import type { ChartCorePluginSignatures } from '../corePlugins';
 import { ChartStore } from '../utils/ChartStore';
+import { ChartSeriesConfig } from './seriesConfig';
 export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature> {
     instance: ChartUsedInstance<TSignature>;
     params: ChartUsedDefaultizedParams<TSignature>;
+    models: ChartUsedControlModels<TSignature>;
     store: ChartUsedStore<TSignature>;
     svgRef: React.RefObject<SVGSVGElement | null>;
     plugins: ChartPlugin<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?: {};
@@ -16,6 +24,7 @@ export type ChartPluginSignature<T extends {
     instance?: {};
     publicAPI?: {};
     state?: {};
+    modelNames?: keyof T['defaultizedParams'];
     dependencies?: readonly ChartAnyPluginSignature[];
     optionalDependencies?: readonly ChartAnyPluginSignature[];
 }> = {
@@ -34,6 +43,12 @@ export type ChartPluginSignature<T extends {
     publicAPI: T extends {
         publicAPI: {};
     } ? T['publicAPI'] : {};
+    models: T extends {
+        defaultizedParams: {};
+        modelNames: keyof T['defaultizedParams'];
+    } ? {
+        [TControlled in T['modelNames']]-?: ChartControlModel<Exclude<T['defaultizedParams'][TControlled], undefined>>;
+    } : {};
     dependencies: T extends {
         dependencies: Array<any>;
     } ? T['dependencies'] : [];
@@ -45,6 +60,7 @@ export type ChartAnyPluginSignature = {
     state: any;
     instance: any;
     params: any;
+    models: any;
     defaultizedParams: any;
     dependencies: any;
     optionalDependencies: any;
@@ -55,7 +71,7 @@ type ChartRequiredPlugins<TSignature extends ChartAnyPluginSignature> = [
     ...TSignature['dependencies']
 ];
 type PluginPropertyWithDependencies<TSignature extends ChartAnyPluginSignature, TProperty extends keyof ChartAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<ChartRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
-export type ChartUsedParams<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
+export type ChartUsedParams<TSignature extends ChartAnyPluginSignature> = MergeSignaturesProperty<TSignature['dependencies'], 'defaultizedParams'> & PluginPropertyWithDependencies<TSignature, 'params'>;
 type ChartUsedDefaultizedParams<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
 export type ChartUsedInstance<TSignature extends ChartAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
@@ -63,13 +79,27 @@ 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']
 ]>;
 export type ChartPlugin<TSignature extends ChartAnyPluginSignature> = {
     (options: ChartPluginOptions<TSignature>): ChartResponse<TSignature>;
-    getInitialState?: (params: ChartUsedDefaultizedParams<TSignature>) => TSignature['state'];
+    getInitialState?: (params: ChartUsedDefaultizedParams<TSignature>, currentState: MergeSignaturesProperty<ChartRequiredPlugins<TSignature>, 'state'>, seriesConfig: ChartSeriesConfig<any>) => TSignature['state'];
+    models?: ChartControlModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;
+    getDefaultizedParams?: (options: {
+        params: ChartUsedParams<TSignature>;
+    }) => TSignature['defaultizedParams'];
 };
 export {};

package/internals/plugins/models/seriesConfig/colorProcessor.types.d.ts

@@ -0,0 +1,5 @@
+import type { AxisDefaultized } from '../../../../models/axis';
+import type { DefaultizedSeriesType } from '../../../../models/seriesType';
+import type { ZAxisDefaultized } from '../../../../models/z-axis';
+import type { ChartSeriesType } from '../../../../models/seriesType/config';
+export type ColorProcessor<TSeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<TSeriesType>, xAxis?: AxisDefaultized, yAxis?: AxisDefaultized, zAxis?: ZAxisDefaultized) => (dataIndex: number) => string;