@mui/x-charts 8.6.0 → 8.8.0

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

@@ -17,6 +17,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
   filterMode: 'keep',
   slider: {
     enabled: false,
+    preview: false,
     size: _constants.DEFAULT_ZOOM_SLIDER_SIZE,
     showTooltip: _constants.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
@@ -35,7 +36,9 @@ const defaultizeZoom = (zoom, axisId, axisDirection) => {
     axisId,
     axisDirection
   }, defaultZoomOptions, zoom, {
-    slider: (0, _extends2.default)({}, defaultZoomOptions.slider, zoom.slider)
+    slider: (0, _extends2.default)({}, defaultZoomOptions.slider, {
+      size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? _constants.DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : _constants.DEFAULT_ZOOM_SLIDER_SIZE
+    }, zoom.slider)
   });
 };
 exports.defaultizeZoom = defaultizeZoom;

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

@@ -0,0 +1,7 @@
+import { AxisConfig } from "../../../../models/axis.js";
+import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+export declare const getAxisDomainLimit: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", axisIndex: number, formattedSeries: ProcessedSeries<T | "line">) => "nice" | "strict" | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisDomainLimit = void 0;
+const getAxisDomainLimit = (axis, axisDirection, axisIndex, formattedSeries) => {
+  if (axis.domainLimit !== undefined) {
+    return axis.domainLimit;
+  }
+  if (axisDirection === 'x') {
+    for (const seriesId of formattedSeries.line?.seriesOrder ?? []) {
+      const series = formattedSeries.line.series[seriesId];
+      if (series.xAxisId === axis.id || series.xAxisId === undefined && axisIndex === 0) {
+        return 'strict';
+      }
+    }
+  }
+  return 'nice';
+};
+exports.getAxisDomainLimit = getAxisDomainLimit;

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

@@ -3,6 +3,8 @@ export type * from "./useChartCartesianAxis.types.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";
+export * from "./useChartCartesianHighlight.selectors.js";
+export * from "./useChartCartesianAxisPreview.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

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

@@ -63,6 +63,30 @@ Object.keys(_useChartCartesianInteraction).forEach(function (key) {
     }
   });
 });
+var _useChartCartesianHighlight = require("./useChartCartesianHighlight.selectors");
+Object.keys(_useChartCartesianHighlight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianHighlight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianHighlight[key];
+    }
+  });
+});
+var _useChartCartesianAxisPreview = require("./useChartCartesianAxisPreview.selectors");
+Object.keys(_useChartCartesianAxisPreview).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartCartesianAxisPreview[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartCartesianAxisPreview[key];
+    }
+  });
+});
 var _defaultizeAxis = require("./defaultizeAxis");
 var _computeAxisValue = require("./computeAxisValue");
 Object.keys(_computeAxisValue).forEach(function (key) {

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

@@ -1,19 +1,19 @@
-export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartCartesianAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("../../../../colorPalettes");
 var _useSelector = require("../../../store/useSelector");
@@ -19,6 +21,8 @@ var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.
 var _getAxisValue = require("./getAxisValue");
 var _getSVGPoint = require("../../../getSVGPoint");
 var _useChartInteraction = require("../useChartInteraction");
+var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+var _useLazySelectorEffect = require("../../utils/useLazySelectorEffect");
 const useChartCartesianAxis = ({
   params,
   store,
@@ -29,7 +33,8 @@ const useChartCartesianAxis = ({
   const {
     xAxis,
     yAxis,
-    dataset
+    dataset,
+    onHighlightedAxisChange
   } = params;
   if (process.env.NODE_ENV !== 'production') {
     const ids = [...(xAxis ?? []), ...(yAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
@@ -49,6 +54,25 @@ const useChartCartesianAxis = ({
     axis: yAxisWithScale,
     axisIds: yAxisIds
   } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
+  (0, _useAssertModelConsistency.useAssertModelConsistency)({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'Chart',
+    propName: 'highlightedAxis',
+    controlled: params.highlightedAxis,
+    defaultValue: undefined
+  });
+  (0, _useEnhancedEffect.default)(() => {
+    if (params.highlightedAxis !== undefined) {
+      store.update(prevState => {
+        if (prevState.controlledCartesianAxisHighlight === params.highlightedAxis) {
+          return prevState;
+        }
+        return (0, _extends2.default)({}, prevState, {
+          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
@@ -67,41 +91,69 @@ const useChartCartesianAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store]);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
+  (0, _useLazySelectorEffect.useLazySelectorEffect)(store, _useChartCartesianInteraction.selectorChartAxisInteraction, (prevAxisInteraction, nextAxisInteraction) => {
+    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);
+    }
+  }, !onHighlightedAxisChange);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
       return () => {};
     }
-    const handleOut = () => {
-      instance.cleanInteraction?.();
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
-      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
-        return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
+    });
+    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?.();
       }
-      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = (0, _getSVGPoint.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);
     };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
   React.useEffect(() => {
@@ -110,11 +162,10 @@ const useChartCartesianAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event.detail.srcEvent);
       const xIndex = (0, _getAxisValue.getAxisIndex)(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : (0, _getAxisValue.getAxisIndex)(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -137,17 +188,16 @@ const useChartCartesianAxis = ({
           }
         });
       });
-      onAxisClick(event, {
+      onAxisClick(event.detail.srcEvent, {
         dataIndex,
         axisValue,
         seriesValues
       });
-    };
-    element.addEventListener('click', handleMouseClick);
+    });
     return () => {
-      element.removeEventListener('click', handleMouseClick);
+      axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
   return {};
 };
 exports.useChartCartesianAxis = useChartCartesianAxis;
@@ -156,7 +206,9 @@ useChartCartesianAxis.params = {
   yAxis: true,
   dataset: true,
   onAxisClick: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onHighlightedAxisChange: true,
+  highlightedAxis: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
@@ -168,9 +220,11 @@ useChartCartesianAxis.getDefaultizedParams = ({
     defaultizedYAxis: (0, _defaultizeAxis.defaultizeYAxis)(params.yAxis, params.dataset)
   });
 };
-useChartCartesianAxis.getInitialState = params => ({
+useChartCartesianAxis.getInitialState = params => (0, _extends2.default)({
   cartesianAxis: {
     x: params.defaultizedXAxis,
     y: params.defaultizedYAxis
   }
+}, params.highlightedAxis === undefined ? {} : {
+  controlledCartesianAxisHighlight: params.highlightedAxis
 });

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

@@ -1,6 +1,6 @@
 import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis } from "../../../../models/axis.js";
+import type { ComputedAxis, ScaleName, AxisId, ChartsAxisData, YAxis, XAxis, DefaultedXAxis, DefaultedYAxis, AxisItemIdentifier } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
@@ -36,6 +36,19 @@ export interface UseChartCartesianAxisParameters<S extends ScaleName = ScaleName
    * @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.
@@ -67,6 +80,10 @@ export interface UseChartCartesianAxisState {
     x: DefaultedXAxis[];
     y: DefaultedYAxis[];
   };
+  /**
+   * The controlled axis item highlighted.
+   */
+  controlledCartesianAxisHighlight?: AxisItemIdentifier[];
 }
 export type ExtremumFilter = (value: {
   x: number | Date | string | null;

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

@@ -0,0 +1,3 @@
+import { AxisId } from "../../../../models/axis.js";
+export declare const selectorChartPreviewComputedXAxis: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").ComputedAxisConfig<import("../../../index.js").ChartsXAxisProps>, [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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedXAxis = void 0;
+var _selectors = require("../../utils/selectors");
+var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _computeAxisValue = require("./computeAxisValue");
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _constants = require("../../../constants");
+function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
+  return axisDirection === 'x' ? {
+    left: 0,
+    top: 0,
+    width: mainChartDrawingArea.width,
+    height: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    right: mainChartDrawingArea.width,
+    bottom: _constants.ZOOM_SLIDER_PREVIEW_SIZE
+  } : {
+    left: 0,
+    top: 0,
+    width: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    height: mainChartDrawingArea.height,
+    right: _constants.ZOOM_SLIDER_PREVIEW_SIZE,
+    bottom: mainChartDrawingArea.height
+  };
+}
+const selectorChartPreviewComputedXAxis = exports.selectorChartPreviewComputedXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, 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
+  }]]);
+  const computedAxes = (0, _computeAxisValue.computeAxisValue)({
+    drawingArea,
+    formattedSeries,
+    axis: xAxes,
+    seriesConfig,
+    axisDirection: 'x',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});
+const selectorChartPreviewComputedYAxis = exports.selectorChartPreviewComputedYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartZoomOptionsLookup, _useChartCartesianAxisRendering.selectorChartZoomAxisFilters, _useChartDimensions.selectorChartDrawingArea, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, 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
+  }]]);
+  const computedAxes = (0, _computeAxisValue.computeAxisValue)({
+    drawingArea,
+    formattedSeries,
+    axis: yAxes,
+    seriesConfig,
+    axisDirection: 'y',
+    zoomMap,
+    zoomOptions,
+    getFilters
+  });
+  if (computedAxes.axis[axisId]) {
+    return {
+      [axisId]: computedAxes.axis[axisId]
+    };
+  }
+  return computedAxes.axis;
+});

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

@@ -4,17 +4,17 @@ export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, Z
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
  */
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, boolean | undefined, []>;
-export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, Map<AxisId, ZoomData> | undefined, []>;
-export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,15 +23,20 @@ export declare const selectorChartZoomOptionsLookup: import("reselect").Selector
   [x: number]: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
 }, []>;
 export declare const selectorChartAxisZoomOptionsLookup: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions, [axisId: AxisId]>;
+export declare const selectorChartZoomAxisFilters: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}>, import("./zoom.types.js").GetZoomAxisFilters | undefined, []>;
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
-export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYAxis = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -13,6 +13,7 @@ var _computeAxisValue = require("./computeAxisValue");
 var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _createZoomLookup = require("./createZoomLookup");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
+var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -45,7 +46,7 @@ const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMa
   formattedSeries,
   direction: 'y'
 }));
-const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
+const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xMapper, yMapper, xAxis, yAxis) => {
   if (xMapper === undefined || yMapper === undefined) {
     // Early return if there is no zoom.
     return undefined;
@@ -74,7 +75,7 @@ const selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorCha
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
@@ -82,9 +83,10 @@ const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSel
   axisDirection: 'x',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
@@ -92,7 +94,8 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSel
   axisDirection: 'y',
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }));
 const selectorChartAxis = exports.selectorChartAxis = (0, _selectors.createSelector)([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 const selectorChartRawAxis = exports.selectorChartRawAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {