@mui/x-charts 8.13.1 → 8.14.1

package/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findClosestPoints = findClosestPoints;
+var _scaleGuards = require("../../../scaleGuards");
+function findClosestPoints(flatbush, drawingArea, seriesData, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPointX, svgPointY, maxRadius = Infinity, maxResults = 1) {
+  const originalXScale = xScale.copy();
+  const originalYScale = yScale.copy();
+  originalXScale.range([0, 1]);
+  originalYScale.range([0, 1]);
+  const excludeIfOutsideDrawingArea = function excludeIfOutsideDrawingArea(index) {
+    const x = originalXScale(seriesData[index].x);
+    const y = originalYScale(seriesData[index].y);
+    return x >= xZoomStart && x <= xZoomEnd && y >= yZoomStart && y <= yZoomEnd;
+  };
+
+  // We need to convert the distance from the original range [0, 1] to the current drawing area
+  // so the comparison is done on pixels instead of normalized values.
+  // fx and fy are the factors to convert the distance from [0, 1] to the current drawing area.
+  const fx = xScale.range()[1] - xScale.range()[0];
+  const fy = yScale.range()[1] - yScale.range()[0];
+  const fxSq = fx * fx;
+  const fySq = fy * fy;
+  function sqDistFn(dx, dy) {
+    return fxSq * dx * dx + fySq * dy * dy;
+  }
+  const pointX = originalXScale(invertScale(xScale, svgPointX, dataIndex => seriesData[dataIndex].x));
+  const pointY = originalYScale(invertScale(yScale, svgPointY, dataIndex => seriesData[dataIndex].y));
+  return flatbush.neighbors(pointX, pointY, maxResults, maxRadius != null ? maxRadius * maxRadius : Infinity, excludeIfOutsideDrawingArea, sqDistFn);
+}
+function invertScale(scale, value, getDataPoint) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return getDataPoint(dataIndex);
+  }
+  return scale.invert(value);
+}

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -11,13 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
-var _useScale = require("../../../../hooks/useScale");
 var _getSVGPoint = require("../../../getSVGPoint");
 var _useSelector = require("../../../store/useSelector");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
+var _findClosestPoints = require("./findClosestPoints");
 const useChartClosestPoint = ({
   svgRef,
   params,
@@ -43,9 +42,7 @@ const useChartClosestPoint = ({
     series,
     seriesOrder
   } = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed)?.scatter ?? {};
-  const voronoiRef = React.useRef({});
-  const delauneyRef = React.useRef(undefined);
-  const lastFind = React.useRef(undefined);
+  const flatbushMap = (0, _useSelector.useSelector)(store, zoomIsInteracting ? _useChartCartesianAxis.selectorChartSeriesEmptyFlatbushMap : _useChartCartesianAxis.selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -55,52 +52,6 @@ const useChartClosestPoint = ({
       }
     }));
   }, [store, disableVoronoi]);
-  (0, _useEnhancedEffect.default)(() => {
-    // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
-
-    if (zoomIsInteracting || seriesOrder === undefined || series === undefined || disableVoronoi) {
-      // If there is no scatter chart series
-      return;
-    }
-    voronoiRef.current = {};
-    let points = [];
-    seriesOrder.forEach(seriesId => {
-      const {
-        data,
-        xAxisId,
-        yAxisId
-      } = series[seriesId];
-      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
-      const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-      const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-      const seriesPoints = [];
-      const seriesIndexes = [];
-      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
-        const {
-          x,
-          y
-        } = data[dataIndex];
-        const pointX = getXPosition(x);
-        const pointY = getYPosition(y);
-        if (instance.isPointInside(pointX, pointY)) {
-          seriesPoints.push(pointX);
-          seriesPoints.push(pointY);
-          seriesIndexes.push(dataIndex);
-        }
-      }
-      voronoiRef.current[seriesId] = {
-        seriesId,
-        seriesIndexes,
-        startIndex: points.length,
-        endIndex: points.length + seriesPoints.length,
-        markerSize: series[seriesId].markerSize
-      };
-      points = points.concat(seriesPoints);
-    });
-    delauneyRef.current = new _d3Delaunay.Delaunay(points);
-    lastFind.current = undefined;
-  }, [zoomIsInteracting, defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance, disableVoronoi]);
   React.useEffect(() => {
     if (svgRef.current === null || disableVoronoi) {
       return undefined;
@@ -110,40 +61,48 @@ const useChartClosestPoint = ({
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
-        lastFind.current = undefined;
         return 'outside-chart';
       }
-      if (!delauneyRef.current) {
-        return 'no-point-found';
-      }
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
-      if (closestPointIndex === undefined) {
-        return 'no-point-found';
+      let closestPoint = undefined;
+      for (const seriesId of seriesOrder ?? []) {
+        const aSeries = (series ?? {})[seriesId];
+        const flatbush = flatbushMap.get(seriesId);
+        if (!flatbush) {
+          continue;
+        }
+        const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+        const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+        const xAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.getSnapshot(), xAxisId);
+        const yAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.getSnapshot(), yAxisId);
+        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
+        const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
+        const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
+        const yZoomEnd = (yAxisZoom?.end ?? 100) / 100;
+        const xScale = xAxis[xAxisId].scale;
+        const yScale = yAxis[yAxisId].scale;
+        const closestPointIndex = (0, _findClosestPoints.findClosestPoints)(flatbush, drawingArea, aSeries.data, xScale, yScale, xZoomStart, xZoomEnd, yZoomStart, yZoomEnd, svgPoint.x, svgPoint.y, maxRadius)[0];
+        if (closestPointIndex === undefined) {
+          continue;
+        }
+        const point = aSeries.data[closestPointIndex];
+        const scaledX = xScale(point.x);
+        const scaledY = yScale(point.y);
+        const distSq = (scaledX - svgPoint.x) ** 2 + (scaledY - svgPoint.y) ** 2;
+        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
+          closestPoint = {
+            dataIndex: closestPointIndex,
+            seriesId,
+            distanceSq: distSq
+          };
+        }
       }
-      lastFind.current = closestPointIndex;
-      const closestSeries = Object.values(voronoiRef.current).find(value => {
-        return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
-      });
-      if (closestSeries === undefined) {
+      if (closestPoint === undefined) {
         return 'no-point-found';
       }
-
-      // The point index in the series with id=closestSeries.seriesId.
-      const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
-      const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
-      const maxRadius = voronoiMaxRadius === 'item' ? closestSeries.markerSize : voronoiMaxRadius;
-      if (maxRadius !== undefined) {
-        const pointX = delauneyRef.current.points[2 * closestPointIndex];
-        const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];
-        const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
-        if (dist2 > maxRadius ** 2) {
-          // The closest point is too far to be considered.
-          return 'outside-voronoi-max-radius';
-        }
-      }
       return {
-        seriesId: closestSeries.seriesId,
-        dataIndex
+        seriesId: closestPoint.seriesId,
+        dataIndex: closestPoint.dataIndex
       };
     }
 
@@ -218,7 +177,7 @@ const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -30,9 +30,14 @@ const useChartHighlight = ({
   }, [store, params.highlightedItem]);
   const clearHighlight = (0, _useEventCallback.default)(() => {
     params.onHighlightChange?.(null);
+    const prevItem = store.getSnapshot().highlight.item;
+    if (prevItem === null) {
+      return;
+    }
     store.update(prev => (0, _extends2.default)({}, prev, {
       highlight: {
-        item: null
+        item: null,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -44,7 +49,8 @@ const useChartHighlight = ({
     params.onHighlightChange?.(newItem);
     store.update(prev => (0, _extends2.default)({}, prev, {
       highlight: {
-        item: newItem
+        item: newItem,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -63,7 +69,8 @@ useChartHighlight.getDefaultizedParams = ({
 });
 useChartHighlight.getInitialState = params => ({
   highlight: {
-    item: params.highlightedItem
+    item: params.highlightedItem,
+    lastUpdate: 'pointer'
   }
 });
 useChartHighlight.params = {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -8,24 +8,24 @@ export declare const selectorChartsHighlightScopePerSeriesId: import("reselect")
 }, Map<SeriesId, Partial<HighlightScope> | undefined>, any[]>;
 export declare const selectorChartsHighlightedItem: 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, HighlightItemData | null, any[]>;
 export declare const selectorChartsHighlightScope: 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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, Partial<HighlightScope> | null, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, Partial<HighlightScope> | null, any[]>;
 export declare const selectorChartsIsHighlightedCallback: 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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsFadedCallback: 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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
 export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
 export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -8,6 +8,7 @@ var _selectors = require("../../utils/selectors");
 var _createIsHighlighted = require("./createIsHighlighted");
 var _createIsFaded = require("./createIsFaded");
 var _highlightStates = require("./highlightStates");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
 const selectHighlight = state => state.highlight;
 const selectSeries = state => state.series;
 const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScopePerSeriesId = (0, _selectors.createSelector)([selectSeries], series => {
@@ -21,8 +22,8 @@ const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightS
   });
   return map;
 });
-const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight], function selectorChartsHighlightedItem(highlight) {
-  return highlight.item;
+const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardItem], function selectorChartsHighlightedItem(highlight, keyboardItem) {
+  return highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
 });
 const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0, _selectors.createSelector)([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {

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

@@ -28,6 +28,7 @@ export type HighlightItemData = {
    */
   dataIndex?: number;
 };
+export type HighlightUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartHighlightInstance {
   /**
    * Remove all highlight.
@@ -59,6 +60,11 @@ export interface UseChartHighlightState {
      * The item currently highlighted.
      */
     item: HighlightItemData | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: HighlightUpdateSource;
   };
 }
 export type UseChartHighlightSignature = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -139,7 +139,11 @@ const useChartKeyboardNavigation = ({
         }
         if (newFocusedItem !== prevState.keyboardNavigation.item) {
           event.preventDefault();
-          return (0, _extends2.default)({}, prevState, prevState.interaction && {
+          return (0, _extends2.default)({}, prevState, prevState.highlight && {
+            highlight: (0, _extends2.default)({}, prevState.highlight, {
+              lastUpdate: 'keyboard'
+            })
+          }, prevState.interaction && {
             interaction: (0, _extends2.default)({}, prevState.interaction, {
               lastUpdate: 'keyboard'
             })

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -34,4 +34,12 @@ export declare const selectorChartsKeyboardYAxisIndex: import("reselect").Select
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardItem: 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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, {
+  seriesId: SeriesId;
+  dataIndex: number | undefined;
+} | null, any[]>;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
 var _selectors = require("../../utils/selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
@@ -36,4 +36,13 @@ const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis,
   };
 };
 const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
-const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed], createSelectAxisHighlight('y'));
+const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed], createSelectAxisHighlight('y'));
+const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex], function selectorChartsKeyboardItem(seriesType, seriesId, dataIndex) {
+  if (seriesId === undefined) {
+    return null;
+  }
+  return {
+    seriesId,
+    dataIndex: seriesType === 'line' ? undefined : dataIndex
+  };
+});

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

@@ -2,6 +2,7 @@ import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../useChartHighlight/index.js";
 export interface UseChartKeyboardNavigationInstance {}
 type SeriesItemIdentifier = {
   /**
@@ -31,6 +32,6 @@ export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
   defaultizedParams: UseChartKeyboardNavigationParameters;
   instance: UseChartKeyboardNavigationInstance;
   state: UseChartKeyboardNavigationState;
-  optionalDependencies: [UseChartInteractionSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartHighlightSignature];
 }>;
 export {};

package/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -91,7 +91,7 @@ function computeAxisValue({
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
-    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+    if (!(0, _axis.isContinuousScaleConfig)(axis)) {
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
       return;
     }

package/internals/scaleGuards.d.ts

@@ -1,11 +1,17 @@
 import type { ScaleBand } from '@mui/x-charts-vendor/d3-scale';
 import { D3OrdinalScale, D3Scale } from "../models/axis.js";
-export declare function isOrdinalScale<T extends {
+export declare function isOrdinalScale<Domain extends {
   toString(): string;
-}>(scale: D3Scale<T>): scale is D3OrdinalScale<T>;
-export declare function isBandScale<T extends {
+} = {
   toString(): string;
-}>(scale: D3Scale<T>): scale is ScaleBand<T>;
-export declare function isPointScale<T extends {
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is D3OrdinalScale<Domain>;
+export declare function isBandScale<Domain extends {
   toString(): string;
-}>(scale: D3Scale<T>): scale is D3OrdinalScale<T>;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is ScaleBand<Domain>;
+export declare function isPointScale<Domain extends {
+  toString(): string;
+} = {
+  toString(): string;
+}, Range = number, Output = number>(scale: D3Scale<Domain, Range, Output>): scale is D3OrdinalScale<Domain>;

package/internals/symlogScale.js

@@ -81,6 +81,11 @@ function scaleSymlog(_domain, _range) {
       return tickFormat(tick);
     };
   };
+
+  /* Adaptation of https://github.com/d3/d3-scale/blob/d6904a4bde09e16005e0ad8ca3e25b10ce54fa0d/src/symlog.js#L30 */
+  scale.copy = () => {
+    return scaleSymlog(scale.domain(), scale.range()).constant(scale.constant());
+  };
   return scale;
 }
 function generateScales(scale) {

package/locales/enUS.js

@@ -9,17 +9,17 @@ var _getChartsLocalization = require("./utils/getChartsLocalization");
 // This object is not Partial<ChartsLocaleText> because it is the default values
 
 const enUSLocaleText = exports.enUSLocaleText = {
-  /* Overlay */
+  // Overlay
   loading: 'Loading data…',
   noData: 'No data to display',
-  /* Toolbar */
+  // Toolbar
   zoomIn: 'Zoom in',
   zoomOut: 'Zoom out',
   toolbarExport: 'Export',
-  /* Toolbar Export Menu */
+  // Toolbar Export Menu
   toolbarExportPrint: 'Print',
   toolbarExportImage: mimeType => `Export as ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`,
-  /* Charts renderer configuration */
+  // Charts renderer configuration
   chartTypeBar: 'Bar',
   chartTypeColumn: 'Column',
   chartTypeLine: 'Line',