[charts] Defaultize axis on top level useChartContainerProps

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -33,6 +33,8 @@ const ChartContainerPro = React.forwardRef(function ChartContainer(
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
+    xAxis,
+    yAxis,
   } = useChartContainerProps(props, ref);
 
   useLicenseVerifier('x-charts-pro', releaseInfo);
@@ -41,7 +43,7 @@ const ChartContainerPro = React.forwardRef(function ChartContainer(
     <DrawingProvider {...drawingProviderProps}>
       <ColorProvider {...colorProviderProps}>
         <SeriesContextProvider {...seriesContextProps}>
-          <ZoomProvider xAxis={props.xAxis} yAxis={props.yAxis}>
+          <ZoomProvider xAxis={xAxis} yAxis={yAxis}>
             <CartesianContextProviderPro {...cartesianContextProps}>
               <ZAxisContextProvider {...zAxisContextProps}>
                 <InteractionProvider>

packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx

@@ -8,36 +8,43 @@ import {
 } from '@mui/x-charts/internals';
 import { useZoom } from '../ZoomProvider/useZoom';
 
-const { normalizeAxis, computeValue } = cartesianProviderUtils;
+const { computeValue } = cartesianProviderUtils;
 
 export interface CartesianContextProviderProProps extends CartesianContextProviderProps {}
 
 function CartesianContextProviderPro(props: CartesianContextProviderProProps) {
-  const {
-    xAxis: inXAxis,
-    yAxis: inYAxis,
-    dataset,
-    xExtremumGetters,
-    yExtremumGetters,
-    children,
-  } = props;
+  const { xAxis, yAxis, dataset, xExtremumGetters, yExtremumGetters, children } = props;
 
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
   const { zoomData } = useZoom();
 
-  const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-
-  const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-
   const xValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x', zoomData),
-    [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData],
+    () =>
+      computeValue({
+        drawingArea,
+        formattedSeries,
+        axis: xAxis,
+        extremumGetters: xExtremumGetters,
+        dataset,
+        axisDirection: 'x',
+        zoomData,
+      }),
+    [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData],
   );
 
   const yValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y', zoomData),
-    [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData],
+    () =>
+      computeValue({
+        drawingArea,
+        formattedSeries,
+        axis: yAxis,
+        extremumGetters: yExtremumGetters,
+        dataset,
+        axisDirection: 'y',
+        zoomData,
+      }),
+    [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData],
   );
 
   const value = React.useMemo(

packages/x-charts-pro/src/context/ZoomProvider/Zoom.types.ts

@@ -74,6 +74,6 @@ export type DefaultizedZoomOptions = Required<ZoomOptions> & {
 };
 
 export type AxisConfigForZoom = {
-  id?: AxisId;
+  id: AxisId;
   zoom?: ZoomOptions | boolean;
 };

packages/x-charts-pro/src/context/ZoomProvider/ZoomProvider.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { cartesianProviderUtils } from '@mui/x-charts/internals';
 import { ZoomContext, ZoomState } from './ZoomContext';
 import { defaultizeZoom } from './defaultizeZoom';
 import { AxisConfigForZoom, ZoomData } from './Zoom.types';
 
-const { defaultizeAxis } = cartesianProviderUtils;
-
 type ZoomProviderProps = {
   children: React.ReactNode;
   /**
@@ -22,22 +19,19 @@ type ZoomProviderProps = {
   yAxis?: AxisConfigForZoom[];
 };
 
-export function ZoomProvider({ children, xAxis: inXAxis, yAxis: inYAxis }: ZoomProviderProps) {
+export function ZoomProvider({ children, xAxis, yAxis }: ZoomProviderProps) {
   const [isInteracting, setIsInteracting] = React.useState<boolean>(false);
 
   const options = React.useMemo(
     () =>
-      [
-        ...defaultizeZoom(defaultizeAxis(inXAxis, 'x'), 'x'),
-        ...defaultizeZoom(defaultizeAxis(inYAxis, 'y'), 'y'),
-      ].reduce(
+      [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce(
         (acc, v) => {
           acc[v.axisId] = v;
           return acc;
         },
         {} as ZoomState['options'],
       ),
-    [inXAxis, inYAxis],
+    [xAxis, yAxis],
   );
 
   const [zoomData, setZoomData] = React.useState<ZoomData[]>(() =>

packages/x-charts-pro/src/context/ZoomProvider/defaultizeZoom.ts

@@ -1,4 +1,4 @@
-import { MakeRequired, isDefined } from '@mui/x-charts/internals';
+import { isDefined } from '@mui/x-charts/internals';
 import { AxisConfigForZoom, DefaultizedZoomOptions } from './Zoom.types';
 
 const defaultZoomOptions = {
@@ -11,7 +11,7 @@ const defaultZoomOptions = {
 };
 
 export const defaultizeZoom = (
-  axis: MakeRequired<AxisConfigForZoom, 'id'>[] | undefined,
+  axis: AxisConfigForZoom[] | undefined,
   axisDirection: 'x' | 'y',
 ): DefaultizedZoomOptions[] => {
   if (!axis) {

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -22,16 +22,30 @@ import {
 import { ChartsPluginType } from '../models/plugin';
 import { ChartSeriesType } from '../models/seriesType/config';
 import { useChartContainerProps } from './useChartContainerProps';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { MakeOptional } from '../models/helpers';
 
 export type ChartContainerProps = Omit<
   ChartsSurfaceProps &
     Omit<SeriesContextProviderProps, 'seriesFormatters'> &
     Omit<DrawingProviderProps, 'svgRef'> &
-    Omit<CartesianContextProviderProps, 'xExtremumGetters' | 'yExtremumGetters'> &
+    Pick<CartesianContextProviderProps, 'dataset'> &
     ZAxisContextProviderProps &
     HighlightedProviderProps,
   'children'
 > & {
+  /**
+   * 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'>[];
   children?: React.ReactNode;
   /**
    * An array of plugins defining how to preprocess data.

packages/x-charts/src/ChartContainer/useChartContainerProps.ts

@@ -8,6 +8,7 @@ import type { ChartContainerProps } from './ChartContainer';
 import { useChartContainerHooks } from './useChartContainerHooks';
 import { HighlightedProviderProps } from '../context';
 import { ChartsSurfaceProps } from '../ChartsSurface';
+import { useDefaultizeAxis } from './useDefaultizeAxis';
 
 export const useChartContainerProps = (
   props: ChartContainerProps,
@@ -43,6 +44,8 @@ export const useChartContainerProps = (
     colorProcessors,
   } = useChartContainerHooks(ref, plugins);
 
+  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis);
+
   const drawingProviderProps: Omit<DrawingProviderProps, 'children'> = {
     width,
     height,
@@ -62,8 +65,8 @@ export const useChartContainerProps = (
   };
 
   const cartesianContextProps: Omit<CartesianContextProviderProps, 'children'> = {
-    xAxis,
-    yAxis,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
     dataset,
     xExtremumGetters,
     yExtremumGetters,
@@ -99,5 +102,7 @@ export const useChartContainerProps = (
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
   };
 };

packages/x-charts/src/ChartContainer/useDefaultizeAxis.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { MakeOptional } from '../models/helpers';
+import { AxisConfig, ScaleName } from '../models';
+import { ChartsAxisProps } from '../models/axis';
+
+const defaultizeAxis = (
+  inAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined,
+  axisName: 'x' | 'y',
+) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+
+  return [
+    ...(inAxis?.map((axis, index) => ({ id: `defaultized-${axisName}-axis-${index}`, ...axis })) ??
+      []),
+    ...(inAxis === undefined || inAxis.findIndex(({ id }) => id === DEFAULT_AXIS_KEY) === -1
+      ? [{ id: DEFAULT_AXIS_KEY, scaleType: 'linear' as const }]
+      : []),
+  ];
+};
+
+export const useDefaultizeAxis = (
+  inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined,
+  inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, 'id'>[] | undefined,
+) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+
+  return [xAxis, yAxis];
+};

packages/x-charts/src/context/CartesianProvider/CartesianProvider.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
 import { DatasetType } from '../../models/seriesType/config';
-import { MakeOptional } from '../../models/helpers';
 import { useDrawingArea } from '../../hooks/useDrawingArea';
 import { useSeries } from '../../hooks/useSeries';
 import { CartesianContext } from './CartesianContext';
-import { normalizeAxis } from './normalizeAxis';
 import { computeValue } from './computeValue';
 import { ExtremumGettersConfig } from '../../models';
 
@@ -15,13 +13,13 @@ export type CartesianContextProviderProps = {
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
+  xAxis: AxisConfig<ScaleName, any, ChartsXAxisProps>[];
   /**
    * 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'>[];
+  yAxis: AxisConfig<ScaleName, any, ChartsYAxisProps>[];
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
@@ -38,30 +36,35 @@ export type CartesianContextProviderProps = {
 };
 
 function CartesianContextProvider(props: CartesianContextProviderProps) {
-  const {
-    xAxis: inXAxis,
-    yAxis: inYAxis,
-    dataset,
-    xExtremumGetters,
-    yExtremumGetters,
-    children,
-  } = props;
+  const { xAxis, yAxis, dataset, xExtremumGetters, yExtremumGetters, children } = props;
 
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
 
-  const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-
-  const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-
   const xValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'),
-    [drawingArea, formattedSeries, xAxis, xExtremumGetters],
+    () =>
+      computeValue({
+        drawingArea,
+        formattedSeries,
+        axis: xAxis,
+        extremumGetters: xExtremumGetters,
+        dataset,
+        axisDirection: 'x',
+      }),
+    [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset],
   );
 
   const yValues = React.useMemo(
-    () => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'),
-    [drawingArea, formattedSeries, yAxis, yExtremumGetters],
+    () =>
+      computeValue({
+        drawingArea,
+        formattedSeries,
+        axis: yAxis,
+        extremumGetters: yExtremumGetters,
+        dataset,
+        axisDirection: 'y',
+      }),
+    [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset],
   );
 
   const value = React.useMemo(