@mui/x-charts 8.7.0 → 8.9.0

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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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,6 +91,21 @@ 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 || params.disableAxisListener) {
@@ -167,7 +206,9 @@ useChartCartesianAxis.params = {
   yAxis: true,
   dataset: true,
   onAxisClick: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onHighlightedAxisChange: true,
+  highlightedAxis: true
 };
 useChartCartesianAxis.getDefaultizedParams = ({
   params
@@ -179,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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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 & import("../../../index.js").UseChartInteractionListenerState & 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) => {

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

@@ -0,0 +1,47 @@
+import { AxisItemIdentifier, ChartsAxisProps } from "../../../../models/axis.js";
+export declare const selectorChartsHighlightXAxisIndex: 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightYAxisIndex: 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightXAxisValue: 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+  value: any;
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number;
+}[] | {
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number | null;
+  value: number | Date;
+}[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightYAxisValue: 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("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+  value: any;
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number;
+}[] | {
+  axisId: import("../../../index.js").AxisId;
+  dataIndex: number | null;
+  value: number | Date;
+}[], [id?: import("../../../index.js").AxisId | undefined]>;
+export declare const selectorChartsHighlightXAxis: 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("../../../index.js").ComputedAxis<keyof import("../../../index.js").AxisScaleConfig, any, ChartsAxisProps>[], []>;
+export declare const selectorChartsHighlightYAxis: 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("../../../index.js").ComputedAxis<keyof import("../../../index.js").AxisScaleConfig, any, ChartsAxisProps>[], []>;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxis = exports.selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _selectors = require("../../utils/selectors");
+var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
+var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
+const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
+const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+  if (axisItems !== undefined) {
+    return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
+  }
+  return computedIndex === null ? [] : [{
+    axisId: axis.axisIds[0],
+    dataIndex: computedIndex
+  }];
+};
+const selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
+const selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, axisItems) => {
+  if (axisItems !== undefined) {
+    return axisItems.map(item => (0, _extends2.default)({}, item, {
+      value: axis.axis[item.axisId]?.data?.[item.dataIndex]
+    })).filter(({
+      value
+    }) => value !== undefined);
+  }
+  return computedValue === null ? [] : [{
+    axisId: axis.axisIds[0],
+    dataIndex: computedIndex,
+    value: computedValue
+  }];
+};
+const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+
+/**
+ * Get the scale of the axis with highlight if controlled. The default axis otherwise.
+ * @param controlledItem The controlled value of highlightedAxis
+ * @param axis The axis state after all the processing
+ * @returns axis state
+ */
+const selectAxis = (axisItems, axis) => {
+  if (axisItems === undefined) {
+    return [axis.axis[axis.axisIds[0]]];
+  }
+  const filteredAxes = axisItems.map(item => axis.axis[item.axisId] ?? null).filter(item => item !== null);
+  return filteredAxes;
+};
+const selectorChartsHighlightXAxis = exports.selectorChartsHighlightXAxis = (0, _selectors.createSelector)([selectorChartControlledCartesianAxisHighlight, _useChartCartesianAxisRendering.selectorChartXAxis], selectAxis);
+const selectorChartsHighlightYAxis = exports.selectorChartsHighlightYAxis = (0, _selectors.createSelector)([selectorChartControlledCartesianAxisHighlight, _useChartCartesianAxisRendering.selectorChartYAxis], selectAxis);