[charts] Split defaultizeAxis function into two (#16745)

Author: bernardobelchior

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.ts

@@ -10,64 +10,91 @@ import { AxisConfig, ScaleName } from '../../../../models';
 import { ChartsXAxisProps, ChartsYAxisProps } from '../../../../models/axis';
 import { DatasetType } from '../../../../models/seriesType/config';
 
-export function defaultizeAxis(
+export function defaultizeXAxis(
   inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[] | undefined,
   dataset: Readonly<DatasetType> | undefined,
-  axisName: 'x',
-): AxisConfig<ScaleName, any, ChartsXAxisProps>[];
-export function defaultizeAxis(
-  inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined,
-  dataset: Readonly<DatasetType> | undefined,
-  axisName: 'y',
-): AxisConfig<ScaleName, any, ChartsYAxisProps>[];
-export function defaultizeAxis(
-  inAxis: readonly MakeOptional<AxisConfig, 'id'>[] | undefined,
-  dataset: Readonly<DatasetType> | undefined,
-  axisName: 'x' | 'y',
-): AxisConfig[] {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-
+): Array<AxisConfig<ScaleName, any, ChartsXAxisProps>> {
   const offsets = {
     top: 0,
-    right: 0,
     bottom: 0,
-    left: 0,
     none: 0,
   };
 
   const inputAxes =
-    inAxis && inAxis.length > 0 ? inAxis : [{ id: DEFAULT_AXIS_KEY, scaleType: 'linear' as const }];
+    inAxis && inAxis.length > 0
+      ? inAxis
+      : [{ id: DEFAULT_X_AXIS_KEY, scaleType: 'linear' as const }];
 
   const parsedAxes = inputAxes.map((axisConfig, index) => {
     const dataKey = axisConfig.dataKey;
-    const defaultPosition = axisName === 'x' ? ('bottom' as const) : ('left' as const);
 
     const position = axisConfig.position ?? 'none';
-    const dimension = axisName === 'x' ? 'height' : 'width';
-
-    const height =
-      axisName === 'x'
-        ? DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0)
-        : 0;
-    const width =
-      axisName === 'y'
-        ? DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0)
-        : 0;
+    const defaultHeight =
+      DEFAULT_AXIS_SIZE_HEIGHT + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
 
     const sharedConfig = {
-      id: `defaultized-${axisName}-axis-${index}`,
+      id: `defaultized-x-axis-${index}`,
       // The fist axis is defaultized to the bottom/left
-      ...(index === 0 ? { position: defaultPosition } : {}),
-      height,
-      width,
+      ...(index === 0 ? ({ position: 'bottom' } as const) : {}),
+      height: defaultHeight,
+      offset: offsets[position],
+      ...axisConfig,
+    };
+
+    // Increment the offset for the next axis
+    if (position !== 'none') {
+      offsets[position] += axisConfig.height ?? defaultHeight;
+    }
+
+    // If `dataKey` is NOT provided
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return sharedConfig;
+    }
+
+    if (dataset === undefined) {
+      throw new Error(`MUI X: x-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+
+    // If `dataKey` is provided
+    return {
+      ...sharedConfig,
+      data: dataset.map((d) => d[dataKey]),
+    };
+  });
+
+  return parsedAxes;
+}
+
+export function defaultizeYAxis(
+  inAxis: readonly MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[] | undefined,
+  dataset: Readonly<DatasetType> | undefined,
+): Array<AxisConfig<ScaleName, any, ChartsYAxisProps>> {
+  const offsets = { right: 0, left: 0, none: 0 };
+
+  const inputAxes =
+    inAxis && inAxis.length > 0
+      ? inAxis
+      : [{ id: DEFAULT_Y_AXIS_KEY, scaleType: 'linear' as const }];
+
+  const parsedAxes = inputAxes.map((axisConfig, index) => {
+    const dataKey = axisConfig.dataKey;
+
+    const position = axisConfig.position ?? 'none';
+    const defaultWidth =
+      DEFAULT_AXIS_SIZE_WIDTH + (axisConfig.label ? AXIS_LABEL_DEFAULT_HEIGHT : 0);
+
+    const sharedConfig = {
+      id: `defaultized-y-axis-${index}`,
+      // The first axis is defaultized to the left
+      ...(index === 0 ? ({ position: 'left' } as const) : {}),
+      width: defaultWidth,
       offset: offsets[position],
       ...axisConfig,
     };
 
     // Increment the offset for the next axis
     if (position !== 'none') {
-      offsets[position] +=
-        (axisConfig as any)[dimension] ?? (dimension === 'height' ? height : width);
+      offsets[position] += axisConfig.width ?? defaultWidth;
     }
 
     // If `dataKey` is NOT provided
@@ -76,7 +103,7 @@ export function defaultizeAxis(
     }
 
     if (dataset === undefined) {
-      throw new Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(`MUI X: y-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
 
     // If `dataKey` is provided

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts

@@ -1,7 +1,7 @@
 export { useChartCartesianAxis } from './useChartCartesianAxis';
 export type * from './useChartCartesianAxis.types';
 export * from './useChartCartesianAxisRendering.selectors';
-export { defaultizeAxis } from './defaultizeAxis';
+export { defaultizeXAxis, defaultizeYAxis } from './defaultizeAxis';
 export * from './computeAxisValue';
 export * from './createZoomLookup';
 export * from './zoom.types';

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

@@ -7,7 +7,7 @@ import { rainbowSurgePalette } from '../../../../colorPalettes';
 import { useSelector } from '../../../store/useSelector';
 import { selectorChartDrawingArea } from '../../corePlugins/useChartDimensions/useChartDimensions.selectors';
 import { selectorChartSeriesProcessed } from '../../corePlugins/useChartSeries/useChartSeries.selectors';
-import { defaultizeAxis } from './defaultizeAxis';
+import { defaultizeXAxis, defaultizeYAxis } from './defaultizeAxis';
 import { selectorChartXAxis, selectorChartYAxis } from './useChartCartesianAxisRendering.selectors';
 import { getAxisValue } from './getAxisValue';
 import { getSVGPoint } from '../../../getSVGPoint';
@@ -62,8 +62,8 @@ export const useChartCartesianAxis: ChartPlugin<UseChartCartesianAxisSignature<a
       ...prev,
       cartesianAxis: {
         ...prev.cartesianAxis,
-        x: defaultizeAxis(xAxis, dataset, 'x'),
-        y: defaultizeAxis(yAxis, dataset, 'y'),
+        x: defaultizeXAxis(xAxis, dataset),
+        y: defaultizeYAxis(yAxis, dataset),
       },
     }));
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
@@ -244,8 +244,8 @@ useChartCartesianAxis.getDefaultizedParams = ({ params }) => {
     ...params,
     colors: params.colors ?? rainbowSurgePalette,
     theme: params.theme ?? 'light',
-    defaultizedXAxis: defaultizeAxis(params.xAxis, params.dataset, 'x'),
-    defaultizedYAxis: defaultizeAxis(params.yAxis, params.dataset, 'y'),
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset),
   };
 };