@mui/x-charts 8.28.2 → 8.29.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.mjs

@@ -0,0 +1,224 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useStoreEffect } from '@mui/x-internals/store';
+import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
+import { warnOnce } from '@mui/x-internals/warning';
+import { rainbowSurgePalette } from "../../../../colorPalettes/index.mjs";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
+import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.mjs";
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.mjs";
+import { getAxisIndex } from "./getAxisValue.mjs";
+import { getSVGPoint } from "../../../getSVGPoint.mjs";
+import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.mjs";
+import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.mjs";
+import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
+export const useChartCartesianAxis = ({
+  params,
+  store,
+  seriesConfig,
+  svgRef,
+  instance
+}) => {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    onHighlightedAxisChange
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
+  const {
+    axis: xAxisWithScale,
+    axisIds: xAxisIds
+  } = store.use(selectorChartXAxis);
+  const {
+    axis: yAxisWithScale,
+    axisIds: yAxisIds
+  } = store.use(selectorChartYAxis);
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'highlightedAxis',
+    controlled: params.highlightedAxis,
+    defaultValue: undefined
+  });
+  useEnhancedEffect(() => {
+    if (params.highlightedAxis !== undefined) {
+      store.set('controlledCartesianAxisHighlight', params.highlightedAxis);
+    }
+  }, [store, params.highlightedAxis]);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartCartesianAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.set('cartesianAxis', {
+      x: defaultizeXAxis(xAxis, dataset),
+      y: defaultizeYAxis(yAxis, dataset)
+    });
+  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
+  const usedXAxis = xAxisIds[0];
+  const usedYAxis = yAxisIds[0];
+  useStoreEffect(store, selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
+    if (!onHighlightedAxisChange) {
+      return;
+    }
+    if (Object.is(prevAxisInteraction, nextAxisInteraction)) {
+      return;
+    }
+    if (prevAxisInteraction.length !== nextAxisInteraction.length) {
+      onHighlightedAxisChange(nextAxisInteraction);
+      return;
+    }
+    if (prevAxisInteraction?.some(({
+      axisId,
+      dataIndex
+    }, itemIndex) => nextAxisInteraction[itemIndex].axisId !== axisId || nextAxisInteraction[itemIndex].dataIndex !== dataIndex)) {
+      onHighlightedAxisChange(nextAxisInteraction);
+    }
+  });
+  const hasInteractionPlugin = checkHasInteractionPlugin(instance);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!isInteractionEnabled || !hasInteractionPlugin || !element || params.disableAxisListener) {
+      return () => {};
+    }
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        instance.cleanInteraction();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction();
+      }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = getSVGPoint(element, srvEvent);
+
+      // Release the pointer capture if we are panning, as this would cause the tooltip to
+      // be locked to the first "section" it touches.
+      if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId) && !target?.closest('[data-charts-zoom-slider]')) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
+      }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate(svgPoint);
+    };
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
+    return () => {
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
+    };
+  }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled, hasInteractionPlugin]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
+      let dataIndex = null;
+      let isXAxis = false;
+      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
+      isXAxis = xIndex !== -1;
+      dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
+      const USED_AXIS_ID = isXAxis ? xAxisIds[0] : yAxisIds[0];
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => AXIS_CLICK_SERIES_TYPES.has(seriesType)).forEach(seriesType => {
+        // @ts-ignore
+        const seriesTypeConfig = processedSeries[seriesType];
+        seriesTypeConfig?.seriesOrder.forEach(seriesId => {
+          const seriesItem = seriesTypeConfig.series[seriesId];
+          const providedXAxisId = seriesItem.xAxisId;
+          const providedYAxisId = seriesItem.yAxisId;
+          const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
+          if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            // @ts-ignore This is safe because users need to opt in to use range bar series.
+            // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+            // Which adds the proper type to the series data.
+            // TODO(v9): Remove this ts-ignore when we can make the breaking change to ChartsAxisData.
+            seriesValues[seriesId] = seriesItem.data[dataIndex];
+          }
+        });
+      });
+      onAxisClick(event.detail.srcEvent, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    });
+    return () => {
+      axisClickHandler.cleanup();
+    };
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
+  return {};
+};
+useChartCartesianAxis.params = {
+  xAxis: true,
+  yAxis: true,
+  dataset: true,
+  onAxisClick: true,
+  disableAxisListener: true,
+  onHighlightedAxisChange: true,
+  highlightedAxis: true
+};
+useChartCartesianAxis.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    colors: params.colors ?? rainbowSurgePalette,
+    theme: params.theme ?? 'light',
+    defaultizedXAxis: defaultizeXAxis(params.xAxis, params.dataset),
+    defaultizedYAxis: defaultizeYAxis(params.yAxis, params.dataset)
+  });
+};
+useChartCartesianAxis.getInitialState = params => _extends({
+  cartesianAxis: {
+    x: params.defaultizedXAxis,
+    y: params.defaultizedYAxis
+  }
+}, params.highlightedAxis === undefined ? {} : {
+  controlledCartesianAxisHighlight: params.highlightedAxis
+});

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.d.mts

@@ -0,0 +1,100 @@
+import type { ChartPluginSignature } from "../../models/index.mjs";
+import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.mjs";
+import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.mjs";
+import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
+import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.mjs";
+import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
+import type { ChartsAxisProps } from "../../../../ChartsAxis/index.mjs";
+import type { UseChartBrushSignature } from "../useChartBrush/index.mjs";
+/**
+ * The axes' configuration after computing.
+ * An axis in this state already contains a scale function and all the necessary properties to be rendered.
+ */
+export type ComputedAxisConfig<AxisProps extends ChartsAxisProps> = {
+  [axisId: AxisId]: ComputedAxis<ScaleName, any, AxisProps>;
+};
+export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName> {
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis?: ReadonlyArray<XAxis<S>>;
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis?: ReadonlyArray<YAxis<S>>;
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset?: Readonly<DatasetType>;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange?: (axisItems: AxisItemIdentifier[]) => void;
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis?: AxisItemIdentifier[];
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+}
+export type UseChartCartesianAxisDefaultizedParameters<S extends ScaleName = ScaleName> = UseChartCartesianAxisParameters<S> & {
+  defaultizedXAxis: DefaultedXAxis<S>[];
+  defaultizedYAxis: DefaultedYAxis<S>[];
+};
+export interface DefaultedZoomSliderOptions extends Omit<NonNullable<Required<ZoomOptions['slider']>>, 'showTooltip'> {
+  showTooltip: ZoomSliderShowTooltip;
+}
+export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slider'>> {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  slider: DefaultedZoomSliderOptions;
+  reverse: boolean;
+}
+export interface UseChartCartesianAxisState {
+  /**
+   * @ignore - state populated by the useChartProZoom plugin
+   */
+  zoom?: {
+    isInteracting: boolean;
+    zoomData: readonly ZoomData[];
+  };
+  cartesianAxis: {
+    x: DefaultedXAxis[];
+    y: DefaultedYAxis[];
+  };
+  /**
+   * The controlled axis item highlighted.
+   */
+  controlledCartesianAxisHighlight?: AxisItemIdentifier[];
+}
+export type ExtremumFilter = (value: {
+  x: number | Date | string | null;
+  y: number | Date | string | null;
+}, dataIndex: number) => boolean;
+export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  params: UseChartCartesianAxisParameters;
+  defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
+  state: UseChartCartesianAxisState;
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
+}>;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.d.mts

@@ -0,0 +1,11 @@
+import { type UseChartCartesianAxisSignature } from "./useChartCartesianAxis.types.mjs";
+import { type DefaultedXAxis, type DefaultedYAxis } from "../../../../models/axis.mjs";
+import { type ChartState } from "../../models/chart.mjs";
+export declare const selectorChartCartesianAxisState: (state: ChartState<[], [UseChartCartesianAxisSignature]>) => {
+  x: DefaultedXAxis[];
+  y: DefaultedYAxis[];
+} | undefined;
+export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedXAxis[] | undefined;
+export declare const selectorChartRawXAxis: SelectorChartRawXAxisType;
+export type SelectorChartRawYAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(state: State) => DefaultedYAxis[] | undefined;
+export declare const selectorChartRawYAxis: SelectorChartRawYAxisType;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.d.mts

@@ -0,0 +1,4 @@
+import { type BarItemIdentifier } from "../../../../models/index.mjs";
+export declare const selectorBarItemAtPosition: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, svgPoint: Pick<DOMPoint, "x" | "y">) => BarItemIdentifier | undefined;

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.mjs

@@ -0,0 +1,83 @@
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
+import { getBandSize } from "../../../getBandSize.mjs";
+import { isBandScale } from "../../../scaleGuards.mjs";
+import { getDataIndexForOrdinalScaleValue } from "../../../invertScale.mjs";
+export const selectorBarItemAtPosition = createSelector(selectorChartXAxis, selectorChartYAxis, selectorChartSeriesProcessed, function selectorBarItemAtPosition({
+  axis: xAxes,
+  axisIds: xAxisIds
+}, {
+  axis: yAxes,
+  axisIds: yAxisIds
+}, processedSeries, svgPoint) {
+  const {
+    series,
+    stackingGroups = []
+  } = processedSeries?.bar ?? {};
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  let item = undefined;
+  for (let stackIndex = 0; stackIndex < stackingGroups.length; stackIndex += 1) {
+    const group = stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const aSeries = (series ?? {})[seriesId];
+      const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+      const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+      const xAxis = xAxes[xAxisId];
+      const yAxis = yAxes[yAxisId];
+      const bandAxis = aSeries.layout === 'horizontal' ? yAxis : xAxis;
+      const continuousAxis = aSeries.layout === 'horizontal' ? xAxis : yAxis;
+      const bandScale = bandAxis.scale;
+      const svgPointBandCoordinate = aSeries.layout === 'horizontal' ? svgPoint.y : svgPoint.x;
+      if (!isBandScale(bandScale)) {
+        continue;
+      }
+      const dataIndex = getDataIndexForOrdinalScaleValue(bandScale, svgPointBandCoordinate);
+      const {
+        barWidth,
+        offset
+      } = getBandSize(bandScale.bandwidth(), stackingGroups.length, bandAxis.barGapRatio);
+      const barOffset = stackIndex * (barWidth + offset);
+      const bandValue = bandAxis.data?.[dataIndex];
+      if (bandValue == null) {
+        continue;
+      }
+      const bandStart = bandScale(bandValue);
+      if (bandStart == null) {
+        continue;
+      }
+      const bandBarStart = bandStart + barOffset;
+      const bandBarEnd = bandBarStart + barWidth;
+      const bandBarMin = Math.min(bandBarStart, bandBarEnd);
+      const bandBarMax = Math.max(bandBarStart, bandBarEnd);
+      if (svgPointBandCoordinate >= bandBarMin && svgPointBandCoordinate <= bandBarMax) {
+        // The point is inside the band for this series
+        const svgPointContinuousCoordinate = aSeries.layout === 'horizontal' ? svgPoint.x : svgPoint.y;
+        const bar = aSeries.visibleStackedData[dataIndex];
+        const start = continuousAxis.scale(bar[0]);
+        const end = continuousAxis.scale(bar[1]);
+        if (start == null || end == null) {
+          continue;
+        }
+        const continuousMin = Math.min(start, end);
+        const continuousMax = Math.max(start, end);
+        if (svgPointContinuousCoordinate >= continuousMin && svgPointContinuousCoordinate <= continuousMax) {
+          item = {
+            seriesId,
+            dataIndex
+          };
+        }
+      }
+    }
+  }
+  if (item) {
+    return {
+      type: 'bar',
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    };
+  }
+  return undefined;
+});

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

@@ -0,0 +1,13 @@
+import { type AxisId, type D3Scale } from "../../../../models/axis.mjs";
+export declare const selectorChartPreviewXScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, axisId: AxisId) => Record<AxisId, D3Scale>;
+export declare const selectorChartPreviewComputedXAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, axisId: AxisId) => import("./useChartCartesianAxis.types.mjs").ComputedAxisConfig<import("../../../index.mjs").ChartsXAxisProps>;
+export declare const selectorChartPreviewYScales: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.mjs").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, axisId: AxisId) => Record<AxisId, D3Scale>;
+export declare const selectorChartPreviewComputedYAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}, axisId: AxisId) => import("./useChartCartesianAxis.types.mjs").ComputedAxisConfig<import("../../../index.mjs").ChartsYAxisProps>;

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

@@ -0,0 +1,122 @@
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.mjs";
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
+import { computeAxisValue } from "./computeAxisValue.mjs";
+import { selectorChartXAxisWithDomains, selectorChartYAxisWithDomains, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.mjs";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.mjs";
+import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.mjs";
+import { getNormalizedAxisScale, getRange } from "./getAxisScale.mjs";
+import { zoomScaleRange } from "./zoom.mjs";
+import { isOrdinalScale } from "../../../scaleGuards.mjs";
+function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
+  return axisDirection === 'x' ? {
+    left: 0,
+    top: 0,
+    width: mainChartDrawingArea.width,
+    height: ZOOM_SLIDER_PREVIEW_SIZE,
+    right: mainChartDrawingArea.width,
+    bottom: ZOOM_SLIDER_PREVIEW_SIZE
+  } : {
+    left: 0,
+    top: 0,
+    width: ZOOM_SLIDER_PREVIEW_SIZE,
+    height: mainChartDrawingArea.height,
+    right: ZOOM_SLIDER_PREVIEW_SIZE,
+    bottom: mainChartDrawingArea.height
+  };
+}
+export const selectorChartPreviewXScales = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartXAxisWithDomains, function selectorChartPreviewXScales(xAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
+  const hasAxis = xAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const scales = {};
+  xAxes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
+    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 = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartDrawingArea, selectorChartPreviewXScales, selectorChartXAxisWithDomains, (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
+  axes,
+  domains
+}, axisId) => {
+  const hasAxis = axes?.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
+  }]]);
+  const computedAxes = computeAxisValue({
+    scales,
+    drawingArea,
+    formattedSeries,
+    axis: axes,
+    seriesConfig,
+    axisDirection: 'x',
+    zoomMap,
+    domains
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});
+export const selectorChartPreviewYScales = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartZoomOptionsLookup, selectorChartYAxisWithDomains, function selectorChartPreviewYScales(yAxes, chartDrawingArea, zoomOptions, {
+  domains: unfilteredDomains
+}, axisId) {
+  const hasAxis = yAxes?.some(axis => axis.id === axisId);
+  const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
+  const options = zoomOptions[axisId];
+  const scales = {};
+  yAxes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const scale = getNormalizedAxisScale(axis, unfilteredDomains[axis.id].domain);
+    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 = createSelectorMemoized(selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartDrawingArea, selectorChartPreviewYScales, selectorChartYAxisWithDomains, (formattedSeries, seriesConfig, zoomOptions, chartDrawingArea, scales, {
+  axes,
+  domains
+}, axisId) => {
+  const hasAxis = axes?.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
+  }]]);
+  const computedAxes = computeAxisValue({
+    scales,
+    drawingArea,
+    formattedSeries,
+    axis: axes,
+    seriesConfig,
+    axisDirection: 'y',
+    zoomMap,
+    domains
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});