@mui/x-charts 8.11.3 → 8.13.0

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -14,10 +14,10 @@ const useChartInteraction = ({
   const cleanInteraction = (0, _useEventCallback.default)(function cleanInteraction() {
     store.update(prev => {
       return (0, _extends2.default)({}, prev, {
-        interaction: {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
           pointer: null,
           item: null
-        }
+        })
       });
     });
   });
@@ -58,7 +58,8 @@ const useChartInteraction = ({
   const setPointerCoordinate = (0, _useEventCallback.default)(function setPointerCoordinate(coordinate) {
     store.update(prev => (0, _extends2.default)({}, prev, {
       interaction: (0, _extends2.default)({}, prev.interaction, {
-        pointer: coordinate
+        pointer: coordinate,
+        lastUpdate: coordinate !== null ? 'pointer' : prev.interaction.lastUpdate
       })
     }));
   });
@@ -75,7 +76,8 @@ exports.useChartInteraction = useChartInteraction;
 useChartInteraction.getInitialState = () => ({
   interaction: {
     item: null,
-    pointer: null
+    pointer: null,
+    lastUpdate: 'pointer'
   }
 });
 useChartInteraction.params = {};

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

@@ -27,4 +27,9 @@ export declare const selectorChartsInteractionItemIsDefined: import("reselect").
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}, boolean, any[]>;
+export declare const selectorChartsLastInteraction: 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.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("./useChartInteraction.types.js").InteractionUpdateSource | undefined, any[]>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointer = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsInitialized = void 0;
+exports.selectorChartsLastInteraction = exports.selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointer = exports.selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItem = exports.selectorChartsInteractionIsInitialized = void 0;
 var _selectors = require("../../utils/selectors");
 const selectInteraction = state => state.interaction;
 const selectorChartsInteractionIsInitialized = exports.selectorChartsInteractionIsInitialized = (0, _selectors.createSelector)([selectInteraction], interaction => interaction !== undefined);
@@ -11,4 +11,5 @@ const selectorChartsInteractionItem = exports.selectorChartsInteractionItem = (0
 const selectorChartsInteractionPointer = exports.selectorChartsInteractionPointer = (0, _selectors.createSelector)([selectInteraction], interaction => interaction?.pointer ?? null);
 const selectorChartsInteractionPointerX = exports.selectorChartsInteractionPointerX = (0, _selectors.createSelector)([selectorChartsInteractionPointer], pointer => pointer && pointer.x);
 const selectorChartsInteractionPointerY = exports.selectorChartsInteractionPointerY = (0, _selectors.createSelector)([selectorChartsInteractionPointer], pointer => pointer && pointer.y);
-const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionItem], item => item !== null);
+const selectorChartsInteractionItemIsDefined = exports.selectorChartsInteractionItemIsDefined = (0, _selectors.createSelector)([selectorChartsInteractionItem], item => item !== null);
+const selectorChartsLastInteraction = exports.selectorChartsLastInteraction = (0, _selectors.createSelector)([selectInteraction], interaction => interaction?.lastUpdate);

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

@@ -4,6 +4,7 @@ export type Coordinate = {
   x: number;
   y: number;
 };
+export type InteractionUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartInteractionInstance {
   /**
    * Remove all interaction.
@@ -35,6 +36,11 @@ export interface UseChartInteractionState {
      * The x/y SVG coordinate of the "main" pointer
      */
     pointer: Coordinate | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: InteractionUpdateSource;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{

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

@@ -0,0 +1,3 @@
+export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.js";
+export * from "./useChartKeyboardNavigation.selectors.js";
+export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartKeyboardNavigation: true
+};
+Object.defineProperty(exports, "useChartKeyboardNavigation", {
+  enumerable: true,
+  get: function () {
+    return _useChartKeyboardNavigation.useChartKeyboardNavigation;
+  }
+});
+var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation");
+var _useChartKeyboardNavigation2 = require("./useChartKeyboardNavigation.selectors");
+Object.keys(_useChartKeyboardNavigation2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartKeyboardNavigation2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartKeyboardNavigation2[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+export declare const useChartKeyboardNavigation: ChartPlugin<UseChartKeyboardNavigationSignature>;

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

@@ -0,0 +1,20 @@
+import { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export declare function getNextSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: Exclude<ChartSeriesType, 'sankey'>;
+  seriesId: SeriesId;
+} | null;
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export declare function getPreviousSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: Exclude<ChartSeriesType, 'sankey'>;
+  seriesId: SeriesId;
+} | null;
+export declare function seriesHasData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type: ChartSeriesType, seriesId: SeriesId): boolean | undefined;

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

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNextSeriesWithData = getNextSeriesWithData;
+exports.getPreviousSeriesWithData = getPreviousSeriesWithData;
+exports.seriesHasData = seriesHasData;
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+function getNextSeriesWithData(series, type, seriesId) {
+  const startingTypeIndex = type !== undefined && series[type] ? Object.keys(series).indexOf(type) : 0;
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : -1;
+  const typesAvailable = Object.keys(series).filter(t => t !== 'sankey');
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (startingTypeIndex + typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+
+    // Edge case for the current series type: we don't loop on previous series of the same type.
+    const startingSeriesIndex = typeGap === 0 ? currentSeriesIndex + 1 : 0;
+    for (let seriesIndex = startingSeriesIndex; seriesIndex < seriesOfType.seriesOrder.length; seriesIndex += 1) {
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type up to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const endingSeriesIndex = currentSeriesIndex;
+  for (let seriesIndex = 0; seriesIndex < endingSeriesIndex; seriesIndex += 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+function getPreviousSeriesWithData(series, type, seriesId) {
+  const startingTypeIndex = type !== undefined && series[type] ? Object.keys(series).indexOf(type) : 0;
+  const startingSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : 1;
+  const typesAvailable = Object.keys(series).filter(t => t !== 'sankey');
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (typesAvailable.length + startingTypeIndex - typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+    const maxGap = typeGap === 0 ? startingSeriesIndex + 1 : seriesOfType.seriesOrder.length;
+    for (let seriesGap = 1; seriesGap < maxGap; seriesGap += 1) {
+      const seriesIndex = (seriesOfType.seriesOrder.length + startingSeriesIndex - seriesGap) % seriesOfType.seriesOrder.length;
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type down to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const availableSeriesIds = seriesOfType.seriesOrder;
+  for (let seriesIndex = availableSeriesIds.length - 1; seriesIndex > startingSeriesIndex; seriesIndex -= 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}
+function seriesHasData(series, type, seriesId) {
+  // @ts-ignore snakey is not in MIT version
+  if (type === 'sankey') {
+    return false;
+  }
+  const data = series[type]?.series[seriesId]?.data;
+  return data && data.length > 0;
+}

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

@@ -0,0 +1,178 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartKeyboardNavigation = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.helpers");
+function getNextIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+    const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+    if (nextSeries === null) {
+      return null;
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
+  };
+}
+function getPreviousIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+    const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+    if (previousSeries === null) {
+      return null;
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
+  };
+}
+function getNextSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+  if (nextSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = nextSeries.type;
+  seriesId = nextSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+function getPreviousSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+  if (previousSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = previousSeries.type;
+  seriesId = previousSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+const useChartKeyboardNavigation = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
+    store.update(state => {
+      if (state.keyboardNavigation.item === null) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: null
+        })
+      });
+    });
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !params.enableKeyboardNavigation) {
+      return undefined;
+    }
+    function keyboardHandler(event) {
+      store.update(prevState => {
+        let newFocusedItem = prevState.keyboardNavigation.item;
+        switch (event.key) {
+          case 'ArrowRight':
+            newFocusedItem = getNextIndexFocusedItem(prevState);
+            break;
+          case 'ArrowLeft':
+            newFocusedItem = getPreviousIndexFocusedItem(prevState);
+            break;
+          case 'ArrowDown':
+            {
+              newFocusedItem = getPreviousSeriesFocusedItem(prevState);
+              break;
+            }
+          case 'ArrowUp':
+            {
+              newFocusedItem = getNextSeriesFocusedItem(prevState);
+              break;
+            }
+          default:
+            break;
+        }
+        if (newFocusedItem !== prevState.keyboardNavigation.item) {
+          event.preventDefault();
+          return (0, _extends2.default)({}, prevState, prevState.interaction && {
+            interaction: (0, _extends2.default)({}, prevState.interaction, {
+              lastUpdate: 'keyboard'
+            })
+          }, {
+            keyboardNavigation: (0, _extends2.default)({}, prevState.keyboardNavigation, {
+              item: newFocusedItem
+            })
+          });
+        }
+        return prevState;
+      });
+    }
+    element.addEventListener('keydown', keyboardHandler);
+    element.addEventListener('blur', removeFocus);
+    return () => {
+      element.removeEventListener('keydown', keyboardHandler);
+      element.removeEventListener('blur', removeFocus);
+    };
+  }, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
+  (0, _useEnhancedEffect.default)(() => store.update(prev => prev.keyboardNavigation.enableKeyboardNavigation === params.enableKeyboardNavigation ? prev : (0, _extends2.default)({}, prev, {
+    keyboardNavigation: (0, _extends2.default)({}, prev.keyboardNavigation, {
+      enableKeyboardNavigation: !!params.enableKeyboardNavigation
+    })
+  })), [store, params.enableKeyboardNavigation]);
+  return {};
+};
+exports.useChartKeyboardNavigation = useChartKeyboardNavigation;
+useChartKeyboardNavigation.getInitialState = params => ({
+  keyboardNavigation: {
+    item: null,
+    enableKeyboardNavigation: !!params.enableKeyboardNavigation
+  }
+});
+useChartKeyboardNavigation.params = {
+  enableKeyboardNavigation: true
+};

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

@@ -0,0 +1,37 @@
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisItemIdentifier } from "../../../../models/axis.js";
+export declare const selectorChartsHasFocusedItem: 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;
+}, boolean, any[]>;
+export declare const selectorChartsFocusedSeriesType: 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;
+}, keyof import("../../../index.js").ChartsSeriesConfig | undefined, any[]>;
+export declare const selectorChartsFocusedSeriesId: 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 | undefined, any[]>;
+export declare const selectorChartsFocusedDataIndex: 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;
+}, number | undefined, any[]>;
+export declare const selectorChartsIsKeyboardNavigationEnabled: 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;
+}, boolean, any[]>;
+export declare const selectorChartsKeyboardXAxisIndex: 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;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardYAxisIndex: 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;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = 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");
+const selectKeyboardNavigation = state => state.keyboardNavigation;
+const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
+const selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesType = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
+const selectorChartsFocusedSeriesId = exports.selectorChartsFocusedSeriesId = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
+const selectorChartsFocusedDataIndex = exports.selectorChartsFocusedDataIndex = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+
+/**
+ * Selectors to override highlight behavior.
+ */
+
+const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis, series) => {
+  if (type === undefined || seriesId === undefined || dataIndex === undefined) {
+    return undefined;
+  }
+  const seriesConfig = series[type]?.series[seriesId];
+  if (!seriesConfig) {
+    return undefined;
+  }
+  let axisId = direction === 'x' ? 'xAxisId' in seriesConfig && seriesConfig.xAxisId : 'yAxisId' in seriesConfig && seriesConfig.yAxisId;
+  if (axisId === undefined || axisId === false) {
+    axisId = axis.axisIds[0];
+  }
+  return {
+    axisId,
+    dataIndex
+  };
+};
+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'));

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

@@ -0,0 +1,36 @@
+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";
+export interface UseChartKeyboardNavigationInstance {}
+type SeriesItemIdentifier = {
+  /**
+   * The type of the series
+   */
+  type: ChartSeriesType;
+  /**
+   * The id of the series with focus.
+   */
+  seriesId: SeriesId;
+  /**
+   * The index of the data point with focus.
+   */
+  dataIndex: number;
+};
+export interface UseChartKeyboardNavigationState {
+  keyboardNavigation: {
+    item: null | SeriesItemIdentifier;
+    enableKeyboardNavigation: boolean;
+  };
+}
+type UseChartKeyboardNavigationParameters = {
+  enableKeyboardNavigation?: boolean;
+};
+export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
+  params: UseChartKeyboardNavigationParameters;
+  defaultizedParams: UseChartKeyboardNavigationParameters;
+  instance: UseChartKeyboardNavigationInstance;
+  state: UseChartKeyboardNavigationState;
+  optionalDependencies: [UseChartInteractionSignature];
+}>;
+export {};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -106,10 +106,7 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _ticks.getTickNumber)((0, _extends2.default)({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = (0, _ticks.getTickNumber)(axis, axisExtremums, (0, _ticks.getDefaultTickNumber)(Math.abs(range[1] - range[0])));
     const tickNumber = (0, _ticks.scaleTickNumberByRange)(rawTickNumber, range);
     const scale = (0, _getScale.getScale)(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

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

@@ -19,6 +19,7 @@ var _getSVGPoint = require("../../../getSVGPoint");
 var _coordinateTransformation = require("./coordinateTransformation");
 var _getAxisIndex = require("./getAxisIndex");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 const useChartPolarAxis = ({
   params,
   store,
@@ -85,9 +86,10 @@ const useChartPolarAxis = ({
   const mousePosition = React.useRef({
     isInChart: false
   });
+  const hasInteractionPlugin = (0, _checkHasInteractionPlugin.checkHasInteractionPlugin)(instance);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !hasInteractionPlugin || element === null || params.disableAxisListener) {
       return () => {};
     }
 
@@ -101,13 +103,13 @@ const useChartPolarAxis = ({
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
         mousePosition.current.isInChart = false;
-        instance.cleanInteraction();
+        instance.cleanInteraction?.();
       }
     });
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
         mousePosition.current.isInChart = false;
-        instance.cleanInteraction();
+        instance.cleanInteraction?.();
       }
     });
     const gestureHandler = event => {
@@ -119,12 +121,12 @@ const useChartPolarAxis = ({
         const svgRect = element.getBoundingClientRect();
         if (srcEvent.clientX < svgRect.left || srcEvent.clientX > svgRect.right || srcEvent.clientY < svgRect.top || srcEvent.clientY > svgRect.bottom) {
           mousePosition.current.isInChart = false;
-          instance.cleanInteraction();
+          instance.cleanInteraction?.();
           return;
         }
         const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, srcEvent);
         mousePosition.current.isInChart = true;
-        instance.setPointerCoordinate(svgPoint);
+        instance.setPointerCoordinate?.(svgPoint);
         return;
       }
 
@@ -135,7 +137,7 @@ const useChartPolarAxis = ({
       // Test if it's in the drawing area
       if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.detail.target)) {
         if (mousePosition.current.isInChart) {
-          instance?.cleanInteraction();
+          instance.cleanInteraction?.();
           mousePosition.current.isInChart = false;
         }
         return;
@@ -146,7 +148,7 @@ const useChartPolarAxis = ({
       const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
       if (radiusSquare > maxRadius ** 2) {
         if (mousePosition.current.isInChart) {
-          instance?.cleanInteraction();
+          instance.cleanInteraction?.();
           mousePosition.current.isInChart = false;
         }
         return;
@@ -165,7 +167,7 @@ const useChartPolarAxis = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation]);
+  }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation, hasInteractionPlugin]);
   React.useEffect(() => {
     const element = svgRef.current;
     const onAxisClick = params.onAxisClick;

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

@@ -69,5 +69,6 @@ export type UseChartPolarAxisSignature<SeriesType extends ChartSeriesType = Char
   defaultizedParams: UseChartPolarAxisDefaultizedParameters;
   state: UseChartPolarAxisState;
   instance: UseChartPolarAxisInstance;
-  dependencies: [UseChartInteractionSignature, UseChartSeriesSignature<SeriesType>];
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  optionalDependencies: [UseChartInteractionSignature];
 }>;