Address PR feedback

Author: bernardobelchior

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

@@ -25,7 +25,12 @@ import { ComputedAxisConfig, DefaultizedZoomOptions } from './useChartCartesianA
 import { ProcessedSeries } from '../../corePlugins/useChartSeries/useChartSeries.types';
 import { GetZoomAxisFilters, ZoomData } from './zoom.types';
 import { getAxisTriggerTooltip } from './getAxisTriggerTooltip';
-import { ScaleDefinition } from './getAxisScale';
+import {
+  applyDomainLimit,
+  getDomainLimit,
+  getLimitedDomain,
+  ScaleDefinition,
+} from './getAxisScale';
 import { isBandScale, isOrdinalScale } from '../../../scaleGuards';
 
 function getRange(
@@ -57,6 +62,10 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   zoomMap?: Map<AxisId, ZoomData>;
   zoomOptions?: Record<AxisId, DefaultizedZoomOptions>;
   getFilters?: GetZoomAxisFilters;
+  /**
+   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+   */
+  preferStrictDomainInLineCharts?: boolean;
 };
 
 export function computeAxisValue<T extends ChartSeriesType>(
@@ -81,6 +90,7 @@ export function computeAxisValue<T extends ChartSeriesType>({
   zoomMap,
   zoomOptions,
   getFilters,
+  preferStrictDomainInLineCharts,
 }: ComputeCommonParams<T> & {
   axis?: DefaultedAxis[];
   axisDirection: 'x' | 'y';
@@ -108,7 +118,6 @@ export function computeAxisValue<T extends ChartSeriesType>({
     const zoom = zoomMap?.get(axis.id);
     const zoomRange: [number, number] = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
-    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
 
     const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
 
@@ -177,6 +186,7 @@ export function computeAxisValue<T extends ChartSeriesType>({
     const scaleType = continuousAxis.scaleType ?? ('linear' as const);
     const tickNumber = scaleTickNumberByRange(rawTickNumber, zoomRange);
 
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
     if (filter) {
       const [minData, maxData] = getAxisExtremum(
         axis,
@@ -188,6 +198,16 @@ export function computeAxisValue<T extends ChartSeriesType>({
       );
       scale = scale.copy();
       scale.domain([minData, maxData]);
+
+      const domainLimit = getDomainLimit(
+        axis,
+        axisDirection,
+        axisIndex,
+        formattedSeries,
+        preferStrictDomainInLineCharts,
+      );
+      scale.domain(getLimitedDomain([axis.min ?? minData, axis.max ?? maxData], domainLimit));
+      applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
     }
 
     completeAxis[axis.id] = {

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

@@ -3,7 +3,7 @@ import { CartesianChartSeriesType } from '../../../../models/seriesType/config';
 import { ProcessedSeries } from '../../corePlugins/useChartSeries';
 
 export const getAxisDomainLimit = <T extends CartesianChartSeriesType>(
-  axis: AxisConfig,
+  axis: Pick<AxisConfig, 'id' | 'domainLimit'>,
   axisDirection: 'x' | 'y',
   axisIndex: number,
   formattedSeries: ProcessedSeries<T | 'line'>,

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

@@ -183,17 +183,15 @@ function getAxisScale<T extends ChartSeriesType>(
 
   const scaleType = axis.scaleType ?? ('linear' as const);
 
-  const domainLimit = preferStrictDomainInLineCharts
-    ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries)
-    : (axis.domainLimit ?? 'nice');
-
-  const axisExtrema = [axis.min ?? minData, axis.max ?? maxData];
+  const domainLimit = getDomainLimit(
+    axis,
+    axisDirection,
+    axisIndex,
+    formattedSeries,
+    preferStrictDomainInLineCharts,
+  );
 
-  if (typeof domainLimit === 'function') {
-    const { min, max } = domainLimit(minData, maxData);
-    axisExtrema[0] = min;
-    axisExtrema[1] = max;
-  }
+  const axisExtrema = getLimitedDomain([axis.min ?? minData, axis.max ?? maxData], domainLimit);
 
   const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtrema });
 
@@ -205,12 +203,47 @@ function getAxisScale<T extends ChartSeriesType>(
     (scale as ScaleSymLog<number, number>).constant(axis.constant);
   }
 
+  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
+
+  return { scale, tickNumber: rawTickNumber };
+}
+
+type DomainLimit = 'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number });
+
+export function getDomainLimit(
+  axis: Pick<DefaultedAxis, 'id' | 'domainLimit'>,
+  axisDirection: 'x' | 'y',
+  axisIndex: number,
+  formattedSeries: ProcessedSeries,
+  preferStrictDomainInLineCharts: boolean | undefined,
+) {
+  return preferStrictDomainInLineCharts
+    ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries)
+    : (axis.domainLimit ?? 'nice');
+}
+
+export function getLimitedDomain(
+  extrema: [number | Date, number | Date],
+  domainLimit: DomainLimit,
+) {
+  if (typeof domainLimit === 'function') {
+    const { min, max } = domainLimit(extrema[0], extrema[1]);
+    return [min, max];
+  }
+
+  return extrema;
+}
+
+export function applyDomainLimit(
+  scale: D3ContinuousScale,
+  axis: { min?: number | Date; max?: number | Date },
+  domainLimit: DomainLimit,
+  rawTickNumber: number,
+) {
   if (domainLimit === 'nice') {
     scale.nice(rawTickNumber);
   }
 
   const [minDomain, maxDomain] = scale.domain();
   scale.domain([axis.min ?? minDomain, axis.max ?? maxDomain]);
-
-  return { scale, tickNumber: rawTickNumber };
 }

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

@@ -88,6 +88,7 @@ export const selectorChartPreviewComputedXAxis = createSelector(
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
     selectorChartDrawingArea,
+    selectorPreferStrictDomainInLineCharts,
     selectorChartPreviewXScales,
     (_, axisId: AxisId) => axisId,
   ],
@@ -99,6 +100,7 @@ export const selectorChartPreviewComputedXAxis = createSelector(
     zoomOptions,
     getFilters,
     chartDrawingArea,
+    preferStrictDomainInLineCharts,
     scales,
     axisId,
   ) => {
@@ -174,6 +176,7 @@ export const selectorChartPreviewComputedYAxis = createSelector(
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
     selectorChartDrawingArea,
+    selectorPreferStrictDomainInLineCharts,
     selectorChartPreviewYScales,
     (_, axisId: AxisId) => axisId,
   ],
@@ -184,6 +187,7 @@ export const selectorChartPreviewComputedYAxis = createSelector(
     zoomOptions,
     getFilters,
     chartDrawingArea,
+    preferStrictDomainInLineCharts,
     scales,
     axisId,
   ) => {
@@ -205,6 +209,7 @@ export const selectorChartPreviewComputedYAxis = createSelector(
       zoomMap,
       zoomOptions,
       getFilters,
+      preferStrictDomainInLineCharts,
     });
 
     if (computedAxes.axis[axisId]) {

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

@@ -182,9 +182,20 @@ export const selectorChartXAxis = createSelector(
     selectorChartZoomMap,
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
+    selectorPreferStrictDomainInLineCharts,
     selectorChartXScales,
   ],
-  (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, scales) =>
+  (
+    axis,
+    drawingArea,
+    formattedSeries,
+    seriesConfig,
+    zoomMap,
+    zoomOptions,
+    getFilters,
+    preferStrictDomainInLineCharts,
+    scales,
+  ) =>
     computeAxisValue({
       scales,
       drawingArea,
@@ -195,6 +206,7 @@ export const selectorChartXAxis = createSelector(
       zoomMap,
       zoomOptions,
       getFilters,
+      preferStrictDomainInLineCharts,
     }),
 );
 
@@ -207,9 +219,20 @@ export const selectorChartYAxis = createSelector(
     selectorChartZoomMap,
     selectorChartZoomOptionsLookup,
     selectorChartZoomAxisFilters,
+    selectorPreferStrictDomainInLineCharts,
     selectorChartYScales,
   ],
-  (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, scales) =>
+  (
+    axis,
+    drawingArea,
+    formattedSeries,
+    seriesConfig,
+    zoomMap,
+    zoomOptions,
+    getFilters,
+    preferStrictDomainInLineCharts,
+    scales,
+  ) =>
     computeAxisValue({
       scales,
       drawingArea,
@@ -220,6 +243,7 @@ export const selectorChartYAxis = createSelector(
       zoomMap,
       zoomOptions,
       getFilters,
+      preferStrictDomainInLineCharts,
     }),
 );