@mui/x-charts 8.13.1 → 8.14.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.d.ts

@@ -0,0 +1,20 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { ContinuousScaleName, DefaultedAxis } from "../../../../models/axis.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { TickParams } from "../../../../hooks/useTicks.js";
+/**
+ * Calculates the initial domain and tick number for a given axis.
+ * The domain should still run through the zoom filterMode after this step.
+ */
+export declare function calculateInitialDomainAndTickNumber(axis: DefaultedAxis<ContinuousScaleName>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], defaultTickNumber: number, preferStrictDomainInLineCharts: boolean | undefined): {
+  domain: [NumberValue, NumberValue];
+  tickNumber: number;
+};
+/**
+ * Calculates the final domain for an axis.
+ * After this step, the domain can be used to create the axis scale.
+ */
+export declare function calculateFinalDomain(axis: Pick<DefaultedAxis<ContinuousScaleName>, 'id' | 'domainLimit' | 'scaleType'> & TickParams & {
+  min?: NumberValue;
+  max?: NumberValue;
+}, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, [minData, maxData]: [number | Date, number | Date], tickNumber: number, preferStrictDomainInLineCharts: boolean | undefined): NumberValue[];

package/internals/plugins/featurePlugins/useChartCartesianAxis/domain.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateFinalDomain = calculateFinalDomain;
+exports.calculateInitialDomainAndTickNumber = calculateInitialDomainAndTickNumber;
+var _getScale = require("../../../getScale");
+var _getAxisDomainLimit = require("./getAxisDomainLimit");
+var _ticks = require("../../../ticks");
+function niceDomain(scaleType, domain, tickNumber) {
+  return (0, _getScale.getScale)(scaleType ?? 'linear', domain, [0, 1]).nice(tickNumber).domain();
+}
+
+/**
+ * Calculates the initial domain and tick number for a given axis.
+ * The domain should still run through the zoom filterMode after this step.
+ */
+function calculateInitialDomainAndTickNumber(axis, axisDirection, axisIndex, formattedSeries, [minData, maxData], defaultTickNumber, preferStrictDomainInLineCharts) {
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  let axisExtrema = getActualAxisExtrema(axis, minData, maxData);
+  if (typeof domainLimit === 'function') {
+    const {
+      min,
+      max
+    } = domainLimit(minData.valueOf(), maxData.valueOf());
+    axisExtrema[0] = min;
+    axisExtrema[1] = max;
+  }
+  const tickNumber = (0, _ticks.getTickNumber)(axis, axisExtrema, defaultTickNumber);
+  if (domainLimit === 'nice') {
+    axisExtrema = niceDomain(axis.scaleType, axisExtrema, tickNumber);
+  }
+  axisExtrema = ['min' in axis ? axis.min ?? axisExtrema[0] : axisExtrema[0], 'max' in axis ? axis.max ?? axisExtrema[1] : axisExtrema[1]];
+  return {
+    domain: axisExtrema,
+    tickNumber
+  };
+}
+
+/**
+ * Calculates the final domain for an axis.
+ * After this step, the domain can be used to create the axis scale.
+ */
+function calculateFinalDomain(axis, axisDirection, axisIndex, formattedSeries, [minData, maxData], tickNumber, preferStrictDomainInLineCharts) {
+  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+  let axisExtrema = getActualAxisExtrema(axis, minData, maxData);
+  if (typeof domainLimit === 'function') {
+    const {
+      min,
+      max
+    } = domainLimit(minData.valueOf(), maxData.valueOf());
+    axisExtrema[0] = min;
+    axisExtrema[1] = max;
+  }
+  if (domainLimit === 'nice') {
+    axisExtrema = niceDomain(axis.scaleType, axisExtrema, tickNumber);
+  }
+  return [axis.min ?? axisExtrema[0], axis.max ?? axisExtrema[1]];
+}
+function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
+  return preferStrictDomainInLineCharts ? (0, _getAxisDomainLimit.getAxisDomainLimit)(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
+}
+
+/**
+ * Get the actual axis extrema considering the user defined min and max values.
+ * @param axisExtrema User defined axis extrema.
+ * @param minData Minimum value from the data.
+ * @param maxData Maximum value from the data.
+ */
+function getActualAxisExtrema(axisExtrema, minData, maxData) {
+  let min = minData;
+  let max = maxData;
+  if ('max' in axisExtrema && axisExtrema.max != null && axisExtrema.max < minData) {
+    min = axisExtrema.max;
+  }
+  if ('min' in axisExtrema && axisExtrema.min != null && axisExtrema.min > minData) {
+    max = axisExtrema.min;
+  }
+  if (!('min' in axisExtrema) && !('max' in axisExtrema)) {
+    return [min, max];
+  }
+  return [axisExtrema.min ?? min, axisExtrema.max ?? max];
+}

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.d.ts

@@ -1,66 +1,5 @@
-import { AxisConfig, AxisId, D3ContinuousScale, D3OrdinalScale, DefaultedAxis } from "../../../../models/axis.js";
-import { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
-import { ChartSeriesConfig } from "../../models/index.js";
-import { ZoomData } from "./zoom.types.js";
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { AxisConfig, ChartsAxisProps, D3Scale, DefaultedAxis, ScaleName } from "../../../../models/axis.js";
 import { ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
-type GetAxesScalesParams<T extends ChartSeriesType = ChartSeriesType> = {
-  drawingArea: ChartDrawingArea;
-  formattedSeries: ProcessedSeries<T>;
-  seriesConfig: ChartSeriesConfig<T>;
-  zoomMap?: Map<AxisId, ZoomData>;
-  /**
-   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
-   */
-  preferStrictDomainInLineCharts?: boolean;
-  defaultTickNumber: number;
-};
-export declare function getXAxesScales<T extends ChartSeriesType>({
-  drawingArea,
-  formattedSeries,
-  axis: axes,
-  seriesConfig,
-  zoomMap,
-  preferStrictDomainInLineCharts,
-  defaultTickNumber
-}: GetAxesScalesParams<T> & {
-  axis?: DefaultedAxis[];
-}): Record<AxisId, ScaleDefinition>;
-export declare function getYAxesScales<T extends ChartSeriesType>({
-  drawingArea,
-  formattedSeries,
-  axis: axes,
-  seriesConfig,
-  zoomMap,
-  preferStrictDomainInLineCharts,
-  defaultTickNumber
-}: GetAxesScalesParams<T> & {
-  axis?: DefaultedAxis[];
-}): Record<AxisId, ScaleDefinition>;
-export type ScaleDefinition = {
-  scale: D3ContinuousScale;
-  tickNumber: number;
-} | {
-  scale: D3OrdinalScale;
-  tickNumber?: never;
-};
-type DomainLimit = 'nice' | 'strict' | ((min: number, max: number) => {
-  min: number;
-  max: number;
-});
-export declare function getDomainLimit(axis: Pick<DefaultedAxis, 'id' | 'domainLimit'>, axisDirection: 'x' | 'y', axisIndex: number, formattedSeries: ProcessedSeries, preferStrictDomainInLineCharts: boolean | undefined): "nice" | "strict" | ((min: number, max: number) => {
-  min: number;
-  max: number;
-});
-export declare function applyDomainLimit(scale: D3ContinuousScale, axis: {
-  min?: number | Date;
-  max?: number | Date;
-}, domainLimit: DomainLimit, rawTickNumber: number): void;
-/**
- * Get the actual axis extrema considering the user defined min and max values.
- * @param axisExtrema User defined axis extrema.
- * @param minData Minimum value from the data.
- * @param maxData Maximum value from the data.
- */
-export declare function getActualAxisExtrema(axisExtrema: Pick<AxisConfig, 'min' | 'max'>, minData: number, maxData: number): [number | Date, number | Date];
-export {};
+export declare function getRange(drawingArea: ChartDrawingArea, axisDirection: 'x' | 'y', axis: AxisConfig<ScaleName, any, ChartsAxisProps>): [number, number];
+export declare function getNormalizedAxisScale(axis: Readonly<DefaultedAxis<ScaleName, any, Readonly<ChartsAxisProps>>>, domain: ReadonlyArray<NumberValue | string>): D3Scale;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.js

@@ -3,129 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.applyDomainLimit = applyDomainLimit;
-exports.getActualAxisExtrema = getActualAxisExtrema;
-exports.getDomainLimit = getDomainLimit;
-exports.getXAxesScales = getXAxesScales;
-exports.getYAxesScales = getYAxesScales;
+exports.getNormalizedAxisScale = getNormalizedAxisScale;
+exports.getRange = getRange;
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
-var _zoom = require("./zoom");
-var _getAxisDomainLimit = require("./getAxisDomainLimit");
-var _ticks = require("../../../ticks");
 var _getScale = require("../../../getScale");
-var _getAxisExtrema = require("./getAxisExtrema");
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return axis.reverse ? [range[1], range[0]] : range;
 }
-function getXAxesScales({
-  drawingArea,
-  formattedSeries,
-  axis: axes = [],
-  seriesConfig,
-  zoomMap,
-  preferStrictDomainInLineCharts,
-  defaultTickNumber
-}) {
-  const scales = {};
-  axes.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
-  });
-  return scales;
-}
-function getYAxesScales({
-  drawingArea,
-  formattedSeries,
-  axis: axes = [],
-  seriesConfig,
-  zoomMap,
-  preferStrictDomainInLineCharts,
-  defaultTickNumber
-}) {
-  const scales = {};
-  axes.forEach((eachAxis, axisIndex) => {
-    const axis = eachAxis;
-    const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
-  });
-  return scales;
-}
-function getAxisScale(axis, axisDirection, zoom, drawingArea, seriesConfig, axisIndex, formattedSeries,
-/**
- * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
- */
-preferStrictDomainInLineCharts, defaultTickNumber) {
-  const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
-  const range = getRange(drawingArea, axisDirection, axis);
+function getNormalizedAxisScale(axis, domain) {
+  const range = [0, 1];
   if ((0, _axis.isBandScaleConfig)(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    // Reverse range because ordinal scales are presented from top to bottom on y-axis
-    const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
-    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
-    return {
-      scale: (0, _d3Scale.scaleBand)(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
-    };
+    return (0, _d3Scale.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
   }
   if ((0, _axis.isPointScaleConfig)(axis)) {
-    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
-    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
-    return {
-      scale: (0, _d3Scale.scalePoint)(axis.data, zoomedRange)
-    };
+    return (0, _d3Scale.scalePoint)(domain, range);
   }
   const scaleType = axis.scaleType ?? 'linear';
-  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
-  const [minData, maxData] = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
-  const axisExtrema = getActualAxisExtrema(axis, minData, maxData);
-  if (typeof domainLimit === 'function') {
-    const {
-      min,
-      max
-    } = domainLimit(minData, maxData);
-    axisExtrema[0] = min;
-    axisExtrema[1] = max;
-  }
-  const rawTickNumber = (0, _ticks.getTickNumber)(axis, axisExtrema, defaultTickNumber);
-  const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
-  const scale = (0, _getScale.getScale)(scaleType, axisExtrema, zoomedRange);
+  const scale = (0, _getScale.getScale)(scaleType, domain, range);
   if ((0, _axis.isSymlogScaleConfig)(axis) && axis.constant != null) {
     scale.constant(axis.constant);
   }
-  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
-  return {
-    scale,
-    tickNumber: rawTickNumber
-  };
-}
-function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
-  return preferStrictDomainInLineCharts ? (0, _getAxisDomainLimit.getAxisDomainLimit)(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
-}
-function applyDomainLimit(scale, axis, domainLimit, rawTickNumber) {
-  if (domainLimit === 'nice') {
-    scale.nice(rawTickNumber);
-  }
-  const [minDomain, maxDomain] = scale.domain();
-  scale.domain([axis.min ?? minDomain, axis.max ?? maxDomain]);
-}
-
-/**
- * Get the actual axis extrema considering the user defined min and max values.
- * @param axisExtrema User defined axis extrema.
- * @param minData Minimum value from the data.
- * @param maxData Maximum value from the data.
- */
-function getActualAxisExtrema(axisExtrema, minData, maxData) {
-  let min = minData;
-  let max = maxData;
-  if (axisExtrema.max != null && axisExtrema.max.valueOf() < minData) {
-    min = axisExtrema.max;
-  }
-  if (axisExtrema.min != null && axisExtrema.min.valueOf() > minData) {
-    max = axisExtrema.min;
-  }
-  return [axisExtrema.min ?? min, axisExtrema.max ?? max];
+  return scale;
 }

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.d.ts

@@ -1,5 +1,5 @@
-import { AxisId } from "../../../../models/axis.js";
-export declare const selectorChartPreviewXScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
+import { AxisId, D3Scale } from "../../../../models/axis.js";
+export declare const selectorChartPreviewXScales: import("reselect").Selector<any, Record<AxisId, D3Scale>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedXAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsXAxisProps>, [axisId: AxisId]>;
-export declare const selectorChartPreviewYScales: import("reselect").Selector<any, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, [axisId: AxisId]>;
+export declare const selectorChartPreviewYScales: import("reselect").Selector<any, Record<AxisId, D3Scale>, [axisId: AxisId]>;
 export declare const selectorChartPreviewComputedYAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsYAxisProps>, [axisId: AxisId]>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -11,8 +11,9 @@ var _computeAxisValue = require("./computeAxisValue");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _constants = require("../../../constants");
-var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
 var _getAxisScale = require("./getAxisScale");
+var _zoom = require("./zoom");
+var _scaleGuards = require("../../../scaleGuards");
 function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
   return axisDirection === 'x' ? {
     left: 0,
@@ -30,26 +31,22 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, _useChartCartesianAxisRendering.selectorDefaultXAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
+const selectorChartPreviewXScales = exports.selectorChartPreviewXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedXScales, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, normalizedXScales, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
-  const zoomMap = new Map([[axisId, {
-    axisId,
-    start: options.minStart,
-    end: options.maxEnd
-  }]]);
-  return (0, _getAxisScale.getXAxesScales)({
-    drawingArea,
-    formattedSeries,
-    axis: xAxes,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+  const scales = {};
+  xAxes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const scale = normalizedXScales[axis.id].copy();
+    const range = (0, _getAxisScale.getRange)(drawingArea, 'x', axis);
+    const zoomedRange = (0, _zoom.zoomScaleRange)(range, [options.minStart, options.maxEnd]);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
   });
+  return scales;
 });
-const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewXScales, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
+const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewXScales, _useChartCartesianAxisRendering.selectorChartXDomains, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, domains, axisId) => {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -66,9 +63,7 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
     seriesConfig,
     axisDirection: 'x',
     zoomMap,
-    zoomOptions,
-    getFilters,
-    preferStrictDomainInLineCharts
+    domains
   });
   if (computedAxes.axis[axisId]) {
     return {
@@ -77,26 +72,25 @@ const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXA
   }
   return computedAxes.axis;
 });
-const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, _useChartCartesianAxisRendering.selectorDefaultYAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
+const selectorChartPreviewYScales = exports.selectorChartPreviewYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartNormalizedYScales, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, normalizedYScales, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
-  const zoomMap = new Map([[axisId, {
-    axisId,
-    start: options.minStart,
-    end: options.maxEnd
-  }]]);
-  return (0, _getAxisScale.getYAxesScales)({
-    drawingArea,
-    formattedSeries,
-    axis: yAxes,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+  const scales = {};
+  yAxes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const scale = normalizedYScales[axis.id].copy();
+    let range = (0, _getAxisScale.getRange)(drawingArea, 'y', axis);
+    if ((0, _scaleGuards.isOrdinalScale)(scale)) {
+      range = range.reverse();
+    }
+    const zoomedRange = (0, _zoom.zoomScaleRange)(range, [options.minStart, options.maxEnd]);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
   });
+  return scales;
 });
-const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartPreviewYScales, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
+const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartDimensions.selectorChartDrawingArea, selectorChartPreviewYScales, _useChartCartesianAxisRendering.selectorChartYDomains, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, domains, axisId) => {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -113,9 +107,7 @@ const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYA
     seriesConfig,
     axisDirection: 'y',
     zoomMap,
-    zoomOptions,
-    getFilters,
-    preferStrictDomainInLineCharts
+    domains
   });
   if (computedAxes.axis[axisId]) {
     return {