[charts] Support axis with single value (mui#14191)

packages/x-charts/src/BarChart/extremums.test.ts

@@ -55,8 +55,8 @@ describe('BarChart - extremums', () => {
 
       it('should correctly get Infinity when empty data', () => {
         const [x, y] = getExtremumX(buildData([], 'horizontal'));
-        expect(x).to.equal(null);
-        expect(y).to.equal(null);
+        expect(x).to.equal(Infinity);
+        expect(y).to.equal(-Infinity);
       });
     });
   });

packages/x-charts/src/BarChart/extremums.ts

@@ -22,19 +22,15 @@ const getValueExtremum: ExtremumGetter<'bar'> = (params) => {
     .reduce(
       (acc: ExtremumGetterResult, seriesId) => {
         const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce(
-          (seriesAcc, values) => [
-            Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])),
-            Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]])),
-          ],
-          series[seriesId].stackedData[0],
-        ) ?? [null, null];
+          (seriesAcc, values) => {
+            return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+          },
+          [Infinity, -Infinity],
+        ) ?? [Infinity, -Infinity];
 
-        return [
-          acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]),
-          acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1]),
-        ];
+        return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
       },
-      [null, null],
+      [Infinity, -Infinity],
     );
 };
 

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

@@ -13,6 +13,8 @@ import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
+import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from '../internals/isBandScale';
 
 const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => {
   const { classes, position } = ownerState;
@@ -194,10 +196,11 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   });
 
   const domain = xScale.domain();
-  if (domain.length === 0 || domain[0] === domain[1]) {
-    // Skip axis rendering if
-    // - the data is empty (for band and point axis)
-    // - No data is associated to the axis (other scale types)
+  const ordinalAxis = isBandScale(xScale);
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  if ((ordinalAxis && domain.length === 0) || (!ordinalAxis && domain.some(isInfinity))) {
     return null;
   }
   return (

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

@@ -10,6 +10,8 @@ import { ChartsYAxisProps } from '../models/axis';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
+import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from '../internals/isBandScale';
 
 const useUtilityClasses = (ownerState: ChartsYAxisProps & { theme: Theme }) => {
   const { classes, position } = ownerState;
@@ -145,10 +147,11 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   });
 
   const domain = yScale.domain();
-  if (domain.length === 0 || domain[0] === domain[1]) {
-    // Skip axis rendering if
-    // - the data is empty (for band and point axis)
-    // - No data is associated to the axis (other scale types)
+  const ordinalAxis = isBandScale(yScale);
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  if ((ordinalAxis && domain.length === 0) || (!ordinalAxis && domain.some(isInfinity))) {
     return null;
   }
 

packages/x-charts/src/LineChart/extremums.ts

@@ -1,7 +1,4 @@
-import {
-  ExtremumGetter,
-  ExtremumGetterResult,
-} from '../context/PluginProvider/ExtremumGetter.types';
+import { ExtremumGetter } from '../context/PluginProvider/ExtremumGetter.types';
 
 export const getExtremumX: ExtremumGetter<'line'> = (params) => {
   const { axis } = params;
@@ -11,23 +8,20 @@ export const getExtremumX: ExtremumGetter<'line'> = (params) => {
   return [minX, maxX];
 };
 
-type GetValuesTypes = (d: [number, number]) => [number, number];
+type GetValues = (d: [number, number]) => [number, number];
 
 function getSeriesExtremums(
-  getValues: GetValuesTypes,
+  getValues: GetValues,
   stackedData: [number, number][],
-): ExtremumGetterResult {
-  if (stackedData.length === 0) {
-    return [null, null];
-  }
-  return stackedData.reduce((seriesAcc, stackedValue) => {
-    const [base, value] = getValues(stackedValue);
-
-    if (seriesAcc[0] === null) {
-      return [Math.min(base, value), Math.max(base, value)] as [number, number];
-    }
-    return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
-  }, getValues(stackedData[0]));
+): [number, number] {
+  return stackedData.reduce<[number, number]>(
+    (seriesAcc, stackedValue) => {
+      const [base, value] = getValues(stackedValue);
+
+      return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
+    },
+    [Infinity, -Infinity],
+  );
 }
 
 export const getExtremumY: ExtremumGetter<'line'> = (params) => {
@@ -39,28 +33,21 @@ export const getExtremumY: ExtremumGetter<'line'> = (params) => {
       return yAxisId === axis.id || (isDefaultAxis && yAxisId === undefined);
     })
     .reduce(
-      (acc: ExtremumGetterResult, seriesId) => {
+      (acc, seriesId) => {
         const { area, stackedData } = series[seriesId];
         const isArea = area !== undefined;
 
         // Since this series is not used to display an area, we do not consider the base (the d[0]).
-        const getValues: GetValuesTypes =
+        const getValues: GetValues =
           isArea && axis.scaleType !== 'log' && typeof series[seriesId].baseline !== 'string'
             ? (d) => d
             : (d) => [d[1], d[1]];
 
         const seriesExtremums = getSeriesExtremums(getValues, stackedData);
 
-        if (acc[0] === null) {
-          return seriesExtremums;
-        }
-        if (seriesExtremums[0] === null) {
-          return acc;
-        }
-
         const [seriesMin, seriesMax] = seriesExtremums;
         return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
       },
-      [null, null],
+      [Infinity, -Infinity],
     );
 };

packages/x-charts/src/ScatterChart/extremums.ts

@@ -7,12 +7,6 @@ const mergeMinMax = (
   acc: ExtremumGetterResult,
   val: ExtremumGetterResult,
 ): ExtremumGetterResult => {
-  if (acc[0] === null || acc[1] === null) {
-    return val;
-  }
-  if (val[0] === null || val[1] === null) {
-    return acc;
-  }
   return [Math.min(acc[0], val[0]), Math.max(acc[1], val[1])];
 };
 
@@ -24,18 +18,17 @@ export const getExtremumX: ExtremumGetter<'scatter'> = (params) => {
       const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
       return axisId === axis.id || (axisId === undefined && isDefaultAxis);
     })
-    .reduce(
-      (acc: ExtremumGetterResult, seriesId) => {
-        const seriesMinMax = series[seriesId].data.reduce(
+    .reduce<ExtremumGetterResult>(
+      (acc, seriesId) => {
+        const seriesMinMax = series[seriesId].data.reduce<ExtremumGetterResult>(
           (accSeries: ExtremumGetterResult, { x }) => {
-            const val = [x, x] as ExtremumGetterResult;
-            return mergeMinMax(accSeries, val);
+            return mergeMinMax(accSeries, [x, x]);
           },
-          [null, null],
+          [Infinity, -Infinity],
         );
         return mergeMinMax(acc, seriesMinMax);
       },
-      [null, null] as ExtremumGetterResult,
+      [Infinity, -Infinity],
     );
 };
 
@@ -47,17 +40,16 @@ export const getExtremumY: ExtremumGetter<'scatter'> = (params) => {
       const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
       return axisId === axis.id || (axisId === undefined && isDefaultAxis);
     })
-    .reduce(
-      (acc: ExtremumGetterResult, seriesId) => {
-        const seriesMinMax = series[seriesId].data.reduce(
-          (accSeries: ExtremumGetterResult, { y }) => {
-            const val = [y, y] as ExtremumGetterResult;
-            return mergeMinMax(accSeries, val);
+    .reduce<ExtremumGetterResult>(
+      (acc, seriesId) => {
+        const seriesMinMax = series[seriesId].data.reduce<ExtremumGetterResult>(
+          (accSeries, { y }) => {
+            return mergeMinMax(accSeries, [y, y]);
           },
-          [null, null],
+          [Infinity, -Infinity],
         );
         return mergeMinMax(acc, seriesMinMax);
       },
-      [null, null] as ExtremumGetterResult,
+      [Infinity, -Infinity],
     );
 };

packages/x-charts/src/context/CartesianProvider/getAxisExtremum.ts

@@ -18,19 +18,9 @@ const axisExtremumCallback = <T extends CartesianChartSeriesType>(
     series,
     axis,
     isDefaultAxis,
-  }) ?? [null, null];
+  }) ?? [Infinity, -Infinity];
 
-  const [minData, maxData] = acc;
-
-  if (minData === null || maxData === null) {
-    return [minChartTypeData!, maxChartTypeData!];
-  }
-
-  if (minChartTypeData === null || maxChartTypeData === null) {
-    return [minData, maxData];
-  }
-
-  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+  return [Math.min(minChartTypeData, acc[0]), Math.max(maxChartTypeData, acc[1])];
 };
 
 export const getAxisExtremum = (
@@ -44,6 +34,6 @@ export const getAxisExtremum = (
   return charTypes.reduce<ExtremumGetterResult>(
     (acc, charType) =>
       axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries),
-    [null, null],
+    [Infinity, -Infinity],
   );
 };

packages/x-charts/src/context/PluginProvider/ExtremumGetter.types.ts

@@ -16,7 +16,7 @@ type ExtremumGetterParams<T extends ChartSeriesType> = {
   isDefaultAxis: boolean;
 };
 
-export type ExtremumGetterResult = [number, number] | [null, null];
+export type ExtremumGetterResult = [number, number];
 
 export type ExtremumGetter<T extends ChartSeriesType> = (
   params: ExtremumGetterParams<T>,

packages/x-charts/src/hooks/useTicks.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AxisConfig, D3Scale } from '../models/axis';
 import { isBandScale } from '../internals/isBandScale';
+import { isInfinity } from '../internals/isInfinity';
 
 export interface TickParams {
   /**
@@ -145,8 +146,10 @@ export function useTicks(
       }));
     }
 
-    if (scale.domain().length === 0 || scale.domain()[0] === scale.domain()[1]) {
-      // The axis should not be visible, so ticks should also be hidden.
+    const domain = scale.domain();
+    // Skip axis rendering if no data is available
+    // - The domains contains Infinity for continuous scales.
+    if (domain.some(isInfinity)) {
       return [];
     }
 

packages/x-charts/src/internals/isInfinity.ts

@@ -0,0 +1,3 @@
+export function isInfinity(v: any): v is number {
+  return typeof v === 'number' && !Number.isFinite(v);
+}