@mui/x-charts 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.mjs

@@ -0,0 +1,75 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartZoomOptionsLookup } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
+export const selectorBrush = state => state.brush;
+export const selectorBrushStart = createSelector(selectorBrush, brush => brush?.start);
+export const selectorBrushCurrent = createSelector(selectorBrush, brush => brush?.current);
+export const selectorBrushStartX = createSelector(selectorBrush, brush => brush?.start?.x ?? null);
+export const selectorBrushStartY = createSelector(selectorBrush, brush => brush?.start?.y ?? null);
+export const selectorBrushCurrentX = createSelector(selectorBrush, brush => brush?.current?.x ?? null);
+export const selectorBrushCurrentY = createSelector(selectorBrush, brush => brush?.current?.y ?? null);
+export const selectorBrushState = createSelectorMemoized(selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, (startX, startY, currentX, currentY) => {
+  if (startX === null || startY === null || currentX === null || currentY === null) {
+    return null;
+  }
+  return {
+    start: {
+      x: startX,
+      y: startY
+    },
+    current: {
+      x: currentX,
+      y: currentY
+    }
+  };
+});
+export const selectorBrushConfigNoZoom = createSelector(selectorChartSeriesProcessed, series => {
+  let hasHorizontal = false;
+  let isBothDirections = false;
+  if (series) {
+    Object.entries(series).forEach(([seriesType, seriesData]) => {
+      if (Object.values(seriesData.series).some(s => s.layout === 'horizontal')) {
+        hasHorizontal = true;
+      }
+      if (seriesType === 'scatter' && seriesData.seriesOrder.length > 0) {
+        isBothDirections = true;
+      }
+    });
+  }
+  if (isBothDirections) {
+    return 'xy';
+  }
+  if (hasHorizontal) {
+    return 'y';
+  }
+  return 'x';
+});
+export const selectorBrushConfigZoom = createSelector(selectorChartZoomOptionsLookup, function selectorBrushConfigZoom(optionsLookup) {
+  let hasX = false;
+  let hasY = false;
+  Object.values(optionsLookup).forEach(options => {
+    if (options.axisDirection === 'y') {
+      hasY = true;
+    }
+    if (options.axisDirection === 'x') {
+      hasX = true;
+    }
+  });
+  if (hasX && hasY) {
+    return 'xy';
+  }
+  if (hasY) {
+    return 'y';
+  }
+  if (hasX) {
+    return 'x';
+  }
+  return null;
+});
+export const selectorBrushConfig = createSelector(selectorBrushConfigNoZoom, selectorBrushConfigZoom, (configNoZoom, configZoom) => configZoom ?? configNoZoom);
+export const selectorIsBrushEnabled = createSelector(selectorBrush, brush => brush?.enabled || brush?.isZoomBrushEnabled);
+export const selectorIsBrushSelectionActive = createSelector(selectorIsBrushEnabled, selectorBrush, (isBrushEnabled, brush) => {
+  return isBrushEnabled && brush?.start !== null && brush?.current !== null;
+});
+export const selectorBrushShouldPreventAxisHighlight = createSelector(selectorBrush, selectorIsBrushSelectionActive, (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventHighlight);
+export const selectorBrushShouldPreventTooltip = createSelector(selectorBrush, selectorIsBrushSelectionActive, (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventTooltip);

package/internals/plugins/featurePlugins/useChartBrush/useChartBrush.types.d.mts

@@ -0,0 +1,81 @@
+import { type ChartPluginSignature } from "../../models/index.mjs";
+export type Point = {
+  x: number;
+  y: number;
+};
+export interface UseChartBrushState {
+  brush: {
+    /**
+     * Whether the brush interaction is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Whether the zoom brush interaction is enabled.
+     */
+    isZoomBrushEnabled: boolean;
+    /**
+     * Whether to prevent tooltip from showing during brush interaction.
+     */
+    preventTooltip: boolean;
+    /**
+     * Whether to prevent highlighting during brush interaction.
+     */
+    preventHighlight: boolean;
+    /**
+     * The starting coordinate of the brush interaction.
+     */
+    start: Point | null;
+    /**
+     * The current coordinate of the brush interaction.
+     */
+    current: Point | null;
+  };
+}
+export interface UseChartBrushInstance {
+  /**
+   * Set the brush coordinates.
+   * @param {Point | null} point The point coordinate, if start value is null, it will set both start and current to this value.
+   */
+  setBrushCoordinates: (point: Point | null) => void;
+  /**
+   * Clear the brush coordinates.
+   */
+  clearBrush: () => void;
+  /**
+   * Enable or disable the zoom brush interaction.
+   * @param {boolean} enabled Whether to enable the zoom brush interaction.
+   */
+  setZoomBrushEnabled: (enabled: boolean) => void;
+}
+export interface BrushConfig {
+  /**
+   * Whether the brush interaction is enabled.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Whether to prevent tooltip from showing during brush interaction.
+   * @default true
+   */
+  preventTooltip?: boolean;
+  /**
+   * Whether to prevent highlighting during brush interaction.
+   * @default true
+   */
+  preventHighlight?: boolean;
+}
+export interface UseChartBrushParameters {
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig?: BrushConfig;
+}
+export type UseChartBrushDefaultizedParameters = {
+  brushConfig: Required<BrushConfig>;
+};
+export type UseChartBrushSignature = ChartPluginSignature<{
+  params: UseChartBrushParameters;
+  defaultizedParams: UseChartBrushDefaultizedParameters;
+  state: UseChartBrushState;
+  instance: UseChartBrushInstance;
+}>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.d.mts

@@ -0,0 +1,32 @@
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ChartsXAxisProps, type ChartsAxisProps, type ChartsYAxisProps, type AxisId, type DefaultedXAxis, type DefaultedYAxis, type D3Scale } from "../../../../models/axis.mjs";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import type { ChartDrawingArea } from "../../../../hooks/index.mjs";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { type ComputedAxisConfig } from "./useChartCartesianAxis.types.mjs";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.mjs";
+import { type ZoomData } from "./zoom.types.mjs";
+export type ComputeResult<T extends ChartsAxisProps> = {
+  axis: ComputedAxisConfig<T>;
+  axisIds: AxisId[];
+};
+type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
+  scales: Record<AxisId, D3Scale>;
+  drawingArea: ChartDrawingArea;
+  formattedSeries: ProcessedSeries<T>;
+  seriesConfig: ChartSeriesConfig<T>;
+  zoomMap?: Map<AxisId, ZoomData>;
+  domains: Record<AxisId, {
+    domain: ReadonlyArray<string | NumberValue>;
+    tickNumber?: number;
+  }>;
+};
+export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
+  axis?: DefaultedYAxis[];
+  axisDirection: 'y';
+}): ComputeResult<ChartsYAxisProps>;
+export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
+  axis?: DefaultedXAxis[];
+  axisDirection: 'x';
+}): ComputeResult<ChartsXAxisProps>;
+export {};

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.mjs

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createScalarFormatter } from "../../../defaultValueFormatters.mjs";
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.mjs";
+import { getColorScale, getOrdinalColorScale, getSequentialColorScale } from "../../../colorScale.mjs";
+import { scaleTickNumberByRange } from "../../../ticks.mjs";
+import { getScale } from "../../../getScale.mjs";
+import { isDateData, createDateFormatter } from "../../../dateHelpers.mjs";
+import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.mjs";
+import { isBandScale, isOrdinalScale } from "../../../scaleGuards.mjs";
+function getRange(drawingArea, axisDirection,
+// | 'rotation' | 'radius',
+reverse) {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return reverse ? [range[1], range[0]] : range;
+}
+function shouldIgnoreGapRatios(scale, categoryGapRatio) {
+  const step = scale.step();
+  const paddingPx = step * categoryGapRatio;
+
+  /* If the padding is less than 0.1px, we consider it negligible and ignore it.
+   * This prevents issues where very small gaps cause rendering artifacts or unexpected layouts.
+   * A threshold of 0.1px is chosen as it's generally below the perceptible limit for most displays.
+   */
+  return paddingPx < 0.1;
+}
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+export function computeAxisValue({
+  scales,
+  drawingArea,
+  formattedSeries,
+  axis: allAxis,
+  seriesConfig,
+  axisDirection,
+  zoomMap,
+  domains
+}) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
+  const axisIdsTriggeringTooltip = getAxisTriggerTooltip(axisDirection, seriesConfig, formattedSeries, allAxis[0].id);
+  const completeAxis = {};
+  allAxis.forEach(eachAxis => {
+    const axis = eachAxis;
+    const scale = scales[axis.id];
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
+    const rawTickNumber = domains[axis.id].tickNumber;
+    const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
+    const data = axis.data ?? [];
+    if (isOrdinalScale(scale)) {
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
+      if (isBandScale(scale) && isBandScaleConfig(axis)) {
+        const desiredCategoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const ignoreGapRatios = shouldIgnoreGapRatios(scale, desiredCategoryGapRatio);
+        const categoryGapRatio = ignoreGapRatios ? 0 : desiredCategoryGapRatio;
+        const barGapRatio = ignoreGapRatios ? 0 : axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        completeAxis[axis.id] = _extends({
+          offset: 0,
+          height: 0,
+          categoryGapRatio,
+          barGapRatio,
+          triggerTooltip
+        }, axis, {
+          data,
+          /* Doing this here is technically wrong, but acceptable in practice.
+           * In theory, this should be done in the normalized scale selector, but then we'd need that selector to depend
+           * on the zoom range, which would void its goal (which is to be independent of zoom).
+           * Since we only ignore gap ratios when they're practically invisible, the small errors caused by this
+           * discrepancy will hopefully not be noticeable. */
+          scale: ignoreGapRatios ? scale.copy().padding(0) : scale,
+          tickNumber,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+            values: axis.data
+          }, axis.colorMap)) : getColorScale(axis.colorMap))
+        });
+      }
+      if (isPointScaleConfig(axis)) {
+        completeAxis[axis.id] = _extends({
+          offset: 0,
+          height: 0,
+          triggerTooltip
+        }, axis, {
+          data,
+          scale,
+          tickNumber,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+            values: axis.data
+          }, axis.colorMap)) : getColorScale(axis.colorMap))
+        });
+      }
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis.data, scaleRange, axis.tickNumber);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+      return;
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
+      return;
+    }
+    const continuousAxis = axis;
+    const scaleType = continuousAxis.scaleType ?? 'linear';
+    completeAxis[axis.id] = _extends({
+      offset: 0,
+      height: 0,
+      triggerTooltip
+    }, continuousAxis, {
+      data,
+      scaleType,
+      scale,
+      tickNumber,
+      colorScale: continuousAxis.colorMap && getSequentialColorScale(continuousAxis.colorMap),
+      valueFormatter: axis.valueFormatter ?? createScalarFormatter(tickNumber, getScale(scaleType, range.map(v => scale.invert(v)), range))
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.d.mts

@@ -0,0 +1,7 @@
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type AxisConfig } from "../../../../models/index.mjs";
+import { type ExtremumFilter } from "./useChartCartesianAxis.types.mjs";
+import { type GetZoomAxisFilters, type ZoomAxisFilters } from "./zoom.types.mjs";
+export declare function createDiscreteScaleGetAxisFilter(axisData: AxisConfig['data'], zoomStart: number, zoomEnd: number, direction: 'x' | 'y'): ExtremumFilter;
+export declare function createContinuousScaleGetAxisFilter(domain: readonly NumberValue[], zoomStart: number, zoomEnd: number, direction: 'x' | 'y', axisData: AxisConfig['data']): ExtremumFilter;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;

package/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.mjs

@@ -0,0 +1,43 @@
+import { isDefined } from "../../../isDefined.mjs";
+export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
+  const maxIndex = axisData?.length ?? 0;
+  const minVal = Math.floor(zoomStart * maxIndex / 100);
+  const maxVal = Math.ceil(zoomEnd * maxIndex / 100);
+  return function filterAxis(value, dataIndex) {
+    const val = value[direction] ?? axisData?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    return dataIndex >= minVal && dataIndex < maxVal;
+  };
+}
+export function createContinuousScaleGetAxisFilter(domain, zoomStart, zoomEnd, direction, axisData) {
+  const min = domain[0].valueOf();
+  const max = domain[1].valueOf();
+  const minVal = min + zoomStart * (max - min) / 100;
+  const maxVal = min + zoomEnd * (max - min) / 100;
+  return function filterAxis(value, dataIndex) {
+    const val = value[direction] ?? axisData?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+}
+export const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};

package/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.d.mts

@@ -0,0 +1,4 @@
+import { type AxisConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ScaleName } from "../../../../models/index.mjs";
+import { type AxisId } from "../../../../models/axis.mjs";
+import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.mjs";
+export declare const createZoomLookup: (axisDirection: "x" | "y") => (axes?: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) => Record<AxisId, DefaultizedZoomOptions>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.mjs

@@ -0,0 +1,14 @@
+import { defaultizeZoom } from "./defaultizeZoom.mjs";
+export const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) => {
+  // @ts-ignore
+  const {
+    zoom,
+    id: axisId,
+    reverse
+  } = v;
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection, reverse);
+  if (defaultizedZoom) {
+    acc[axisId] = defaultizedZoom;
+  }
+  return acc;
+}, {});

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.d.mts

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

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultizeXAxis = defaultizeXAxis;
 exports.defaultizeYAxis = defaultizeYAxis;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defaultizeZoom = require("./defaultizeZoom");
 var _constants = require("../../../../constants");
@@ -49,7 +50,7 @@ function defaultizeXAxis(inAxes, dataset, axesGap) {
       return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X Charts: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The x-axis uses `dataKey` but no `dataset` is provided. ' + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the x-axis.' : (0, _formatErrorMessage2.default)(37));
     }
 
     // If `dataKey` is provided
@@ -99,7 +100,7 @@ function defaultizeYAxis(inAxes, dataset, axesGap) {
       return sharedConfig;
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X Charts: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The y-axis uses `dataKey` but no `dataset` is provided. ' + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the y-axis.' : (0, _formatErrorMessage2.default)(38));
     }
 
     // If `dataKey` is provided

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.mjs

@@ -0,0 +1,104 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { defaultizeZoom } from "./defaultizeZoom.mjs";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY, DEFAULT_AXIS_SIZE_HEIGHT, DEFAULT_AXIS_SIZE_WIDTH, AXIS_LABEL_DEFAULT_HEIGHT } from "../../../../constants/index.mjs";
+export function defaultizeXAxis(inAxes, dataset, axesGap) {
+  const offsets = {
+    top: 0,
+    bottom: 0,
+    none: 0
+  };
+  const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
+    id: DEFAULT_X_AXIS_KEY,
+    scaleType: 'linear'
+  }];
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+
+    // The first x-axis is defaultized to the bottom
+    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({
+      offset: offsets[position]
+    }, axisConfig, {
+      id,
+      position,
+      height: axisConfig.height ?? defaultHeight,
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'x', axisConfig.reverse)
+    });
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += sharedConfig.height + axesGap;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += sharedConfig.zoom.slider.size;
+      }
+    }
+
+    // If `dataKey` is NOT provided
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return sharedConfig;
+    }
+    if (dataset === undefined) {
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The x-axis uses `dataKey` but no `dataset` is provided. ' + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the x-axis.' : _formatErrorMessage(37));
+    }
+
+    // If `dataKey` is provided
+    return _extends({}, sharedConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+  return parsedAxes;
+}
+export function defaultizeYAxis(inAxes, dataset, axesGap) {
+  const offsets = {
+    right: 0,
+    left: 0,
+    none: 0
+  };
+  const inputAxes = inAxes && inAxes.length > 0 ? inAxes : [{
+    id: DEFAULT_Y_AXIS_KEY,
+    scaleType: 'linear'
+  }];
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+
+    // The first y-axis is defaultized to the left
+    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({
+      offset: offsets[position]
+    }, axisConfig, {
+      id,
+      position,
+      width: axisConfig.width ?? defaultWidth,
+      zoom: defaultizeZoom(axisConfig.zoom, id, 'y', axisConfig.reverse)
+    });
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += sharedConfig.width + axesGap;
+      if (sharedConfig.zoom?.slider.enabled) {
+        offsets[position] += sharedConfig.zoom.slider.size;
+      }
+    }
+
+    // If `dataKey` is NOT provided
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return sharedConfig;
+    }
+    if (dataset === undefined) {
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: The y-axis uses `dataKey` but no `dataset` is provided. ' + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + 'Either provide a dataset prop or use the data property directly on the y-axis.' : _formatErrorMessage(38));
+    }
+
+    // If `dataKey` is provided
+    return _extends({}, sharedConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+  return parsedAxes;
+}

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.mts

@@ -0,0 +1,20 @@
+import { type AxisId } from "../../../../models/axis.mjs";
+import { type DefaultizedZoomOptions } from "./useChartCartesianAxis.types.mjs";
+import { type ZoomOptions } from "./zoom.types.mjs";
+export declare const defaultZoomOptions: {
+  minStart: number;
+  maxEnd: number;
+  step: number;
+  minSpan: number;
+  maxSpan: number;
+  panning: true;
+  filterMode: "keep";
+  reverse: false;
+  slider: {
+    enabled: false;
+    preview: false;
+    size: number;
+    showTooltip: import("./zoom.types.mjs").ZoomSliderShowTooltip;
+  };
+};
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y", reverse?: boolean) => DefaultizedZoomOptions | undefined;

package/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.mjs

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE, DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.mjs";
+export const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true,
+  filterMode: 'keep',
+  reverse: false,
+  slider: {
+    enabled: false,
+    preview: false,
+    size: DEFAULT_ZOOM_SLIDER_SIZE,
+    showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
+  }
+};
+export const defaultizeZoom = (zoom, axisId, axisDirection, reverse) => {
+  if (!zoom) {
+    return undefined;
+  }
+  if (zoom === true) {
+    return _extends({
+      axisId,
+      axisDirection
+    }, defaultZoomOptions, {
+      reverse: reverse ?? false
+    });
+  }
+  return _extends({
+    axisId,
+    axisDirection
+  }, defaultZoomOptions, {
+    reverse: reverse ?? false
+  }, zoom, {
+    slider: _extends({}, defaultZoomOptions.slider, {
+      size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : DEFAULT_ZOOM_SLIDER_SIZE
+    }, zoom.slider)
+  });
+};

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.d.mts

@@ -0,0 +1,20 @@
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousScaleName, type DefaultedAxis } from "../../../../models/axis.mjs";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/index.mjs";
+import { type TickParams } from "../../../../hooks/useTicks.mjs";
+/**
+ * Calculates the initial domain and tick number for a given axis.
+ * The domain should still run through the zoom filterMode after this step.
+ */
+export declare function calculateInitialDomainAndTickNumber(axis: DefaultedAxis<ContinuousScaleName>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], defaultTickNumber: number, preferStrictDomainInLineCharts: boolean | undefined): {
+  domain: [NumberValue, NumberValue];
+  tickNumber: number;
+};
+/**
+ * Calculates the final domain for an axis.
+ * After this step, the domain can be used to create the axis scale.
+ */
+export declare function calculateFinalDomain(axis: Pick<DefaultedAxis<ContinuousScaleName>, 'id' | 'domainLimit' | 'scaleType'> & TickParams & {
+  min?: NumberValue;
+  max?: NumberValue;
+}, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], tickNumber: number, preferStrictDomainInLineCharts: boolean | undefined): NumberValue[];