[charts] Fix infinite tick number when zoom range is zero (#17750)

Author: bernardobelchior

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

@@ -46,24 +46,6 @@ export interface TickParams {
   tickLabelPlacement?: 'middle' | 'tick';
 }
 
-export function getTickNumber(
-  params: TickParams & {
-    range: number[];
-    domain: any[];
-  },
-) {
-  const { tickMaxStep, tickMinStep, tickNumber, range, domain } = params;
-
-  const maxTicks =
-    tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
-  const minTicks =
-    tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-
-  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
-
-  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
-}
-
 const offsetRatio = {
   start: 0,
   extremities: 0,

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

@@ -13,7 +13,7 @@ import {
 } from '../../../../models/axis';
 import { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
 import { getColorScale, getOrdinalColorScale } from '../../../colorScale';
-import { getTickNumber } from '../../../../hooks/useTicks';
+import { getTickNumber, scaleTickNumberByRange } from '../../../ticks';
 import { getScale } from '../../../getScale';
 import { zoomScaleRange } from './zoom';
 import { getAxisExtremum } from './getAxisExtremum';
@@ -200,7 +200,7 @@ export function computeAxisValue<T extends ChartSeriesType>({
     }
 
     const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtremums });
-    const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
 
     const zoomedRange = zoomScaleRange(range, zoomRange);
 

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.ts

@@ -12,7 +12,7 @@ import {
 } from '../../../../models/axis';
 import { ChartSeriesType, PolarChartSeriesType } from '../../../../models/seriesType/config';
 import { getColorScale, getOrdinalColorScale } from '../../../colorScale';
-import { getTickNumber } from '../../../../hooks/useTicks';
+import { getTickNumber, scaleTickNumberByRange } from '../../../ticks';
 import { getScale } from '../../../getScale';
 import { getAxisExtremum } from './getAxisExtremum';
 import type { ChartDrawingArea } from '../../../../hooks';
@@ -200,7 +200,7 @@ export function computeAxisValue<T extends ChartSeriesType>({
     }
 
     const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtremums });
-    const tickNumber = rawTickNumber / ((range[1] - range[0]) / 100);
+    const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
 
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

packages/x-charts/src/internals/ticks.test.ts

@@ -0,0 +1,14 @@
+import { expect } from 'chai';
+import { scaleTickNumberByRange } from './ticks';
+
+describe('scaleTickNumberByRange', () => {
+  it('should return 1 when rangeGap is 0 (range start and end are the same)', () => {
+    const result = scaleTickNumberByRange(10, [50, 50]);
+    expect(result).to.equal(1);
+  });
+
+  it('should correctly scale tickNumber based on range', () => {
+    const result = scaleTickNumberByRange(100, [0, 50]);
+    expect(result).to.equal(200);
+  });
+});

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

@@ -0,0 +1,30 @@
+import type { TickParams } from '../hooks/useTicks';
+
+export function getTickNumber(
+  params: TickParams & {
+    range: number[];
+    domain: any[];
+  },
+) {
+  const { tickMaxStep, tickMinStep, tickNumber, range, domain } = params;
+
+  const maxTicks =
+    tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks =
+    tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
+}
+
+export function scaleTickNumberByRange(tickNumber: number, range: number[]) {
+  const rangeGap = range[1] - range[0];
+
+  /* If the range start and end are the same, `tickNumber` will become infinity, so we default to 1. */
+  if (rangeGap === 0) {
+    return 1;
+  }
+
+  return tickNumber / ((range[1] - range[0]) / 100);
+}