[charts] Defaultize axis on top level useChartContainerProps (#13817)

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(