@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -0,0 +1,175 @@
+'use client';
+
+/* eslint-disable react-compiler/react-compiler */
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+import { DEFAULT_MARGINS } from "../../../../constants/index.js";
+import { selectorChartDimensionsState } from "./useChartDimensions.selectors.js";
+const MAX_COMPUTE_RUN = 10;
+export const useChartDimensions = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const hasInSize = params.width !== undefined && params.height !== undefined;
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
+  // States only used for the initialization of the size.
+  const [innerWidth, setInnerWidth] = React.useState(0);
+  const [innerHeight, setInnerHeight] = React.useState(0);
+  const computeSize = React.useCallback(() => {
+    const mainEl = svgRef?.current;
+    if (!mainEl) {
+      return {};
+    }
+    const win = ownerWindow(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    store.update(prev => {
+      const prevWidth = prev.dimensions.width + prev.dimensions.left + prev.dimensions.right;
+      const prevHeight = prev.dimensions.height + prev.dimensions.top + prev.dimensions.bottom;
+      if (prevWidth === newWidth && prevHeight === newHeight) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        dimensions: _extends({}, prev.dimensions, {
+          width: newWidth - prev.dimensions.left - prev.dimensions.right,
+          height: newHeight - prev.dimensions.top - prev.dimensions.bottom
+        })
+      });
+    });
+    return {
+      height: newHeight,
+      width: newWidth
+    };
+  }, [store, svgRef]);
+  store.update(prev => {
+    if ((params.width === undefined || prev.dimensions.propsWidth === params.width) && (params.height === undefined || prev.dimensions.propsHeight === params.height)) {
+      return prev;
+    }
+    return _extends({}, prev, {
+      dimensions: _extends({}, prev.dimensions, {
+        width: params.width === undefined ? prev.dimensions.width : params.width - prev.dimensions.left - prev.dimensions.right,
+        height: params.height === undefined ? prev.dimensions.height : params.height - prev.dimensions.top - prev.dimensions.bottom,
+        propsWidth: params.width,
+        propsHeight: params.height
+      })
+    });
+  });
+  React.useEffect(() => {
+    // Ensure the error detection occurs after the first rendering.
+    stateRef.current.displayError = true;
+  }, []);
+
+  // This effect is used to compute the size of the container on the initial render.
+  // It is not bound to the raf loop to avoid an unwanted "resize" event.
+  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
+  useEnhancedEffect(() => {
+    // computeRun is used to avoid infinite loops.
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== innerWidth || computedSize.height !== innerHeight) {
+      stateRef.current.computeRun += 1;
+      if (computedSize.width !== undefined) {
+        setInnerWidth(computedSize.width);
+      }
+      if (computedSize.height !== undefined) {
+        setInnerHeight(computedSize.height);
+      }
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [innerHeight, innerWidth, computeSize, hasInSize]);
+  useEnhancedEffect(() => {
+    if (hasInSize) {
+      return () => {};
+    }
+    computeSize();
+    const elementToObserve = svgRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, hasInSize, svgRef]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (stateRef.current.displayError && params.width === undefined && innerWidth === 0) {
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      stateRef.current.displayError = false;
+    }
+    if (stateRef.current.displayError && params.height === undefined && innerHeight === 0) {
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      stateRef.current.displayError = false;
+    }
+  }
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }, options) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    const drawingArea = selectorChartDimensionsState(store.value);
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
+  }, [store.value]);
+  return {
+    instance: {
+      isPointInside
+    }
+  };
+};
+useChartDimensions.params = {
+  width: true,
+  height: true,
+  margin: true
+};
+useChartDimensions.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  margin: params.margin ? _extends({}, DEFAULT_MARGINS, params.margin) : DEFAULT_MARGINS
+});
+useChartDimensions.getInitialState = ({
+  width,
+  height,
+  margin
+}) => ({
+  dimensions: _extends({}, margin, {
+    width: (width ?? 0) - margin.left - margin.right,
+    height: (height ?? 0) - margin.top - margin.bottom,
+    propsWidth: width,
+    propsHeight: height
+  })
+});

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

@@ -0,0 +1,25 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartDimensionsState = state => state.dimensions;
+export const selectorChartDrawingArea = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width,
+  left: dimensionsState.left,
+  right: dimensionsState.right,
+  height: dimensionsState.height,
+  top: dimensionsState.top,
+  bottom: dimensionsState.bottom
+}));
+export const selectorChartPropsSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.propsWidth,
+  height: dimensionsState.propsHeight
+}));
+export const selectorChartContainerSize = createSelector(selectorChartDimensionsState, dimensionsState => ({
+  width: dimensionsState.width + dimensionsState.left + dimensionsState.right,
+  height: dimensionsState.height + dimensionsState.top + dimensionsState.bottom
+}));
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartHasIntrinsicSize = createSelector(selectorChartContainerSize, svgSize => svgSize.width > 0 && svgSize.height > 0);

package/modern/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/corePlugins/useChartId/index.js

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

package/modern/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === undefined || params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: id,
+    providedChartId: id
+  }
+});

package/modern/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/modern/internals/plugins/corePlugins/useChartId/useChartId.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};

package/modern/internals/plugins/corePlugins/useChartSeries/index.js

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

package/modern/{context/SeriesProvider → internals/plugins/corePlugins/useChartSeries}/processSeries.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from "../../internals/defaultizeColor.js";
+import { defaultizeColor } from "../../../defaultizeColor.js";
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -11,11 +11,14 @@ import { defaultizeColor } from "../../internals/defaultizeColor.js";
 export const preprocessSeries = ({
   series,
   colors,
-  seriesFormatters,
+  seriesConfig,
   dataset
 }) => {
   // Group series by type
   const seriesGroups = {};
+  // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
+  // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
+
   series.forEach((seriesData, seriesIndex) => {
     const {
       id = `auto-generated-id-${seriesIndex}`,
@@ -35,13 +38,13 @@ export const preprocessSeries = ({
     }, defaultizeColor(seriesData, seriesIndex, colors));
     seriesGroups[type].seriesOrder.push(id);
   });
-  const formattedSeries = {};
+  const processedSeries = {};
   // Apply formatter on a type group
-  Object.keys(seriesFormatters).forEach(type => {
+  Object.keys(seriesConfig).forEach(type => {
     const group = seriesGroups[type];
     if (group !== undefined) {
-      formattedSeries[type] = seriesFormatters[type]?.(group, dataset) ?? seriesGroups[type];
+      processedSeries[type] = seriesConfig[type]?.seriesProcessor?.(group, dataset) ?? seriesGroups[type];
     }
   });
-  return formattedSeries;
+  return processedSeries;
 };

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -0,0 +1,72 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
+import { preprocessSeries } from "./processSeries.js";
+export const useChartSeries = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    series,
+    dataset,
+    theme,
+    colors
+  } = params;
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartSeries`
+  // 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, {
+      series: _extends({}, prev.series, {
+        processedSeries: preprocessSeries({
+          series,
+          colors: typeof colors === 'function' ? colors(theme) : colors,
+          seriesConfig,
+          dataset
+        })
+      })
+    }));
+  }, [colors, dataset, series, theme, seriesConfig, store]);
+  return {};
+};
+useChartSeries.params = {
+  dataset: true,
+  series: true,
+  colors: true,
+  theme: true
+};
+const EMPTY_ARRAY = [];
+useChartSeries.getDefaultizedParams = ({
+  params
+}) => _extends({
+  series: EMPTY_ARRAY
+}, params, {
+  colors: params.colors ?? rainbowSurgePalette,
+  theme: params.theme ?? 'light'
+});
+useChartSeries.getInitialState = ({
+  series = [],
+  colors,
+  theme,
+  dataset
+}, _, seriesConfig) => {
+  return {
+    series: {
+      seriesConfig,
+      processedSeries: preprocessSeries({
+        series,
+        colors: typeof colors === 'function' ? colors(theme) : colors,
+        seriesConfig,
+        dataset
+      })
+    }
+  };
+};

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js

@@ -0,0 +1,4 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartSeriesState = state => state.series;
+export const selectorChartSeriesProcessed = createSelector(selectorChartSeriesState, seriesState => seriesState.processedSeries);
+export const selectorChartSeriesConfig = createSelector(selectorChartSeriesState, seriesState => seriesState.seriesConfig);

package/modern/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/corePlugins/useChartSeries/useColorProcessor.js

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector } from "../../../store/useSelector.js";
+import { useStore } from "../../../store/useStore.js";
+import { selectorChartSeriesConfig } from "./useChartSeries.selectors.js";
+export function useColorProcessor(seriesType) {
+  const store = useStore();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const colorProcessors = React.useMemo(() => {
+    const rep = {};
+    Object.keys(seriesConfig).forEach(seriesT => {
+      rep[seriesT] = seriesConfig[seriesT].colorProcessor;
+    });
+    return rep;
+  }, [seriesConfig]);
+  if (!seriesType) {
+    return colorProcessors;
+  }
+  return colorProcessors[seriesType];
+}

package/modern/internals/{computeAxisValue.js → plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js}

@@ -1,26 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
-import { getTickNumber } from "../hooks/useTicks.js";
-import { getScale } from "./getScale.js";
-import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
-import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
-function getRange(drawingArea, axisDirection, axis) {
-  if (axisDirection === 'rotation') {
-    const {
-      startAngle = 0,
-      endAngle = startAngle + 360
-    } = axis;
-    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
-  }
-  if (axisDirection === 'radius') {
-    const {
-      minRadius = 0,
-      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
-    } = axis;
-    return [minRadius, maxRadius];
-  }
+import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
+import { getTickNumber } from "../../../../hooks/useTicks.js";
+import { getScale } from "../../../getScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+function getRange(drawingArea, axisDirection,
+// | 'rotation' | 'radius',
+axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
@@ -37,22 +25,26 @@ export function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
-  extremumGetters,
+  seriesConfig,
   axisDirection,
-  zoomData,
+  zoomMap,
   zoomOptions,
   getFilters
 }) {
+  if (allAxis === undefined) {
+    return {
+      axis: {},
+      axisIds: []
+    };
+  }
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoomOption = zoomOptions?.[axis.id];
-    const zoom = zoomData?.find(({
-      axisId
-    }) => axisId === axis.id);
+    const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.js

@@ -0,0 +1,61 @@
+import { isDefined } from "../../../isDefined.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
+import { getScale } from "../../../getScale.js";
+export const createAxisFilterMapper = ({
+  zoomMap,
+  zoomOptions,
+  seriesConfig,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  const zoomOption = zoomOptions[axis.id];
+  if (!zoomOption || zoomOption.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomMap?.get(axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = getAxisExtremum(axis, direction, seriesConfig, axisIndex, formattedSeries);
+  }
+  let min;
+  let max;
+  const continuousScaleType = !scaleType || scaleType === 'band' || scaleType === 'point' ? 'linear' : scaleType;
+  [min, max] = getScale(continuousScaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[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;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    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/modern/{context/ChartDataProvider/useDefaultizeAxis.js → internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.js}

@@ -1,9 +1,6 @@
-'use client';
-
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
-const defaultizeAxis = (inAxis, dataset, axisName) => {
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../../../constants/index.js";
+export function defaultizeAxis(inAxis, dataset, axisName) {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({
     id: `defaultized-${axisName}-axis-${index}`
@@ -24,9 +21,4 @@ const defaultizeAxis = (inAxis, dataset, axisName) => {
       data: dataset.map(d => d[dataKey])
     });
   });
-};
-export const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  return [xAxis, yAxis];
-};
+}

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js

@@ -0,0 +1,22 @@
+import { isCartesianSeriesType } from "../../../isCartesian.js";
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const getter = axisDirection === 'x' ? seriesConfig[chartType].xExtremumGetter : seriesConfig[chartType].yExtremumGetter;
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+    getFilters
+  }) ?? [Infinity, -Infinity];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters) => {
+  const charTypes = Object.keys(seriesConfig).filter(isCartesianSeriesType);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/index.js

@@ -0,0 +1,5 @@
+export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
+export * from "./useChartCartesianAxis.selectors.js";
+export { defaultizeAxis } from "./defaultizeAxis.js";
+export * from "./computeAxisValue.js";
+export * from "./zoom.types.js";

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

@@ -0,0 +1,68 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
+import { useSelector } from "../../../store/useSelector.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+import { selectorChartSeriesState } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { defaultizeAxis } from "./defaultizeAxis.js";
+export const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const formattedSeries = useSelector(store, selectorChartSeriesState);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // 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, {
+      cartesianAxis: _extends({}, prev.cartesianAxis, {
+        x: defaultizeAxis(xAxis, dataset, 'x'),
+        y: defaultizeAxis(yAxis, dataset, 'y')
+      })
+    }));
+  }, [seriesConfig, drawingArea, formattedSeries, xAxis, yAxis, dataset, store]);
+  return {};
+};
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    colors: params.colors ?? rainbowSurgePalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
+    defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y')
+  });
+};
+useChartCartesianAxis.getInitialState = params => ({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+});