@mui/x-charts 8.13.1 → 8.14.1

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createAxisFilterMapper.js

@@ -1,22 +1,4 @@
 import { isDefined } from "../../../isDefined.js";
-import { isOrdinalScale } from "../../../scaleGuards.js";
-export function createAxisFilterMapper(zoomMap, zoomOptions, direction) {
-  return (axisId, axisData, scale) => {
-    const zoomOption = zoomOptions[axisId];
-    if (!zoomOption || zoomOption.filterMode !== 'discard') {
-      return null;
-    }
-    const zoom = zoomMap?.get(axisId);
-    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
-      // No zoom, or zoom with all data visible
-      return null;
-    }
-    if (isOrdinalScale(scale)) {
-      return createDiscreteScaleGetAxisFilter(axisData, zoom.start, zoom.end, direction);
-    }
-    return createContinuousScaleGetAxisFilter(scale, zoom.start, zoom.end, direction, axisData);
-  };
-}
 export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, direction) {
   const maxIndex = axisData?.length ?? 0;
   const minVal = Math.floor(zoomStart * maxIndex / 100);
@@ -30,12 +12,9 @@ export function createDiscreteScaleGetAxisFilter(axisData, zoomStart, zoomEnd, d
     return dataIndex >= minVal && dataIndex < maxVal;
   };
 }
-export function createContinuousScaleGetAxisFilter(scale, zoomStart, zoomEnd, direction, axisData) {
-  let min;
-  let max;
-  [min, max] = scale.domain();
-  min = min instanceof Date ? min.getTime() : min;
-  max = max instanceof Date ? max.getTime() : max;
+export function createContinuousScaleGetAxisFilter(domain, zoomStart, zoomEnd, direction, axisData) {
+  const min = domain[0].valueOf();
+  const max = domain[1].valueOf();
   const minVal = min + zoomStart * (max - min) / 100;
   const maxVal = min + zoomEnd * (max - min) / 100;
   return function filterAxis(value, dataIndex) {

package/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/domain.js

@@ -0,0 +1,77 @@
+import { getScale } from "../../../getScale.js";
+import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
+import { getTickNumber } from "../../../ticks.js";
+function niceDomain(scaleType, domain, tickNumber) {
+  return 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.
+ */
+export 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 = 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.
+ */
+export 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 ? 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/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.js

@@ -1,121 +1,24 @@
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
-import { zoomScaleRange } from "./zoom.js";
-import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
-import { getTickNumber } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
-import { getAxisExtrema } from "./getAxisExtrema.js";
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
-function getRange(drawingArea, axisDirection, axis) {
+export 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;
 }
-export 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;
-}
-export 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);
+export function getNormalizedAxisScale(axis, domain) {
+  const range = [0, 1];
   if (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 = zoomScaleRange(scaleRange, zoomRange);
-    return {
-      scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2)
-    };
+    return scaleBand(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
   }
   if (isPointScaleConfig(axis)) {
-    const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
-    const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
-    return {
-      scale: scalePoint(axis.data, zoomedRange)
-    };
+    return scalePoint(domain, range);
   }
   const scaleType = axis.scaleType ?? 'linear';
-  const domainLimit = getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
-  const [minData, maxData] = 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 = getTickNumber(axis, axisExtrema, defaultTickNumber);
-  const zoomedRange = zoomScaleRange(range, zoomRange);
-  const scale = getScale(scaleType, axisExtrema, zoomedRange);
+  const scale = getScale(scaleType, domain, range);
   if (isSymlogScaleConfig(axis) && axis.constant != null) {
     scale.constant(axis.constant);
   }
-  applyDomainLimit(scale, axis, domainLimit, rawTickNumber);
-  return {
-    scale,
-    tickNumber: rawTickNumber
-  };
-}
-export function getDomainLimit(axis, axisDirection, axisIndex, formattedSeries, preferStrictDomainInLineCharts) {
-  return preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
-}
-export 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.
- */
-export 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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.d.ts

@@ -1,4 +1,4 @@
-import { ComputedAxis } from "../../../../models/axis.js";
+import { ComputedAxis, D3Scale } from "../../../../models/axis.js";
 /**
  * For a pointer coordinate, this function returns the dataIndex associated.
  * Returns `-1` if no dataIndex matches.
@@ -8,4 +8,8 @@ export declare function getAxisIndex(axisConfig: ComputedAxis, pointerValue: num
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export declare function getAxisValue(axisConfig: ComputedAxis, pointerValue: number, dataIndex: number | null): number | Date | null;
+export declare function getAxisValue<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>, axisData: readonly any[] | undefined, pointerValue: number, dataIndex: number | null): number | Date | null;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -46,14 +46,11 @@ export function getAxisIndex(axisConfig, pointerValue) {
  * For a pointer coordinate, this function returns the value associated.
  * Returns `null` if the coordinate has no value associated.
  */
-export function getAxisValue(axisConfig, pointerValue, dataIndex) {
-  const {
-    scale,
-    data: axisData
-  } = axisConfig;
+export function getAxisValue(scale, axisData, pointerValue, dataIndex) {
   if (!isOrdinalScale(scale)) {
     if (dataIndex === null) {
-      return scale.invert(pointerValue);
+      const invertedValue = scale.invert(pointerValue);
+      return Number.isNaN(invertedValue) ? null : invertedValue;
     }
     return axisData[dataIndex];
   }

package/esm/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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -2,11 +2,12 @@ import { createSelector } from "../../utils/selectors.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { computeAxisValue } from "./computeAxisValue.js";
-import { selectorChartZoomAxisFilters, selectorChartZoomOptionsLookup, selectorDefaultXAxisTickNumber, selectorDefaultYAxisTickNumber } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartNormalizedXScales, selectorChartNormalizedYScales, selectorChartXDomains, selectorChartYDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
 import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.js";
-import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
-import { getXAxesScales, getYAxesScales } from "./getAxisScale.js";
+import { getRange } from "./getAxisScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { isOrdinalScale } from "../../../scaleGuards.js";
 function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
   return axisDirection === 'x' ? {
     left: 0,
@@ -24,26 +25,22 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
+export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, 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 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 = getRange(drawingArea, 'x', axis);
+    const zoomedRange = zoomScaleRange(range, [options.minStart, options.maxEnd]);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
   });
+  return scales;
 });
-export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, selectorPreferStrictDomainInLineCharts, selectorChartPreviewXScales, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
+export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartDrawingArea, selectorChartPreviewXScales, 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];
@@ -60,9 +57,7 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
     seriesConfig,
     axisDirection: 'x',
     zoomMap,
-    zoomOptions,
-    getFilters,
-    preferStrictDomainInLineCharts
+    domains
   });
   if (computedAxes.axis[axisId]) {
     return {
@@ -71,26 +66,25 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
   }
   return computedAxes.axis;
 });
-export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
+export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, 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 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 = getRange(drawingArea, 'y', axis);
+    if (isOrdinalScale(scale)) {
+      range = range.reverse();
+    }
+    const zoomedRange = zoomScaleRange(range, [options.minStart, options.maxEnd]);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
   });
+  return scales;
 });
-export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, selectorPreferStrictDomainInLineCharts, selectorChartPreviewYScales, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
+export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartDrawingArea, selectorChartPreviewYScales, 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];
@@ -107,9 +101,7 @@ export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRa
     seriesConfig,
     axisDirection: 'y',
     zoomMap,
-    zoomOptions,
-    getFilters,
-    preferStrictDomainInLineCharts
+    domains
   });
   if (computedAxes.axis[axisId]) {
     return {