@mui/x-charts 8.14.1 → 8.16.0

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

@@ -0,0 +1,81 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export type Point = {
+  x: number;
+  y: number;
+};
+export interface UseChartBrushState {
+  brush: {
+    /**
+     * Whether the brush interaction is enabled.
+     */
+    enabled: boolean;
+    /**
+     * Whether the zoom brush interaction is enabled.
+     */
+    isZoomBrushEnabled: boolean;
+    /**
+     * Whether to prevent tooltip from showing during brush interaction.
+     */
+    preventTooltip: boolean;
+    /**
+     * Whether to prevent highlighting during brush interaction.
+     */
+    preventHighlight: boolean;
+    /**
+     * The starting coordinate of the brush interaction.
+     */
+    start: Point | null;
+    /**
+     * The current coordinate of the brush interaction.
+     */
+    current: Point | null;
+  };
+}
+export interface UseChartBrushInstance {
+  /**
+   * Set the brush coordinates.
+   * @param {Point | null} point The point coordinate, if start value is null, it will set both start and current to this value.
+   */
+  setBrushCoordinates: (point: Point | null) => void;
+  /**
+   * Clear the brush coordinates.
+   */
+  clearBrush: () => void;
+  /**
+   * Enable or disable the zoom brush interaction.
+   * @param {boolean} enabled Whether to enable the zoom brush interaction.
+   */
+  setZoomBrushEnabled: (enabled: boolean) => void;
+}
+export interface BrushConfig {
+  /**
+   * Whether the brush interaction is enabled.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Whether to prevent tooltip from showing during brush interaction.
+   * @default true
+   */
+  preventTooltip?: boolean;
+  /**
+   * Whether to prevent highlighting during brush interaction.
+   * @default true
+   */
+  preventHighlight?: boolean;
+}
+export interface UseChartBrushParameters {
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig?: BrushConfig;
+}
+export type UseChartBrushDefaultizedParameters = {
+  brushConfig: Required<BrushConfig>;
+};
+export type UseChartBrushSignature = ChartPluginSignature<{
+  params: UseChartBrushParameters;
+  defaultizedParams: UseChartBrushDefaultizedParameters;
+  state: UseChartBrushState;
+  instance: UseChartBrushInstance;
+}>;

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

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

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

@@ -9,9 +9,10 @@ const createZoomLookup = axisDirection => (axes = []) => axes.reduce((acc, v) =>
   // @ts-ignore
   const {
     zoom,
-    id: axisId
+    id: axisId,
+    reverse
   } = v;
-  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection);
+  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, axisDirection, reverse);
   if (defaultizedZoom) {
     acc[axisId] = defaultizedZoom;
   }

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

@@ -33,7 +33,7 @@ function defaultizeXAxis(inAxes, dataset) {
       id,
       position,
       height: axisConfig.height ?? defaultHeight,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x')
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'x', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis
@@ -83,7 +83,7 @@ function defaultizeYAxis(inAxes, dataset) {
       id,
       position,
       width: axisConfig.width ?? defaultWidth,
-      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y')
+      zoom: (0, _defaultizeZoom.defaultizeZoom)(axisConfig.zoom, id, 'y', axisConfig.reverse)
     });
 
     // Increment the offset for the next axis

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

@@ -9,6 +9,7 @@ export declare const defaultZoomOptions: {
   maxSpan: number;
   panning: true;
   filterMode: "keep";
+  reverse: false;
   slider: {
     enabled: false;
     preview: false;
@@ -16,4 +17,4 @@ export declare const defaultZoomOptions: {
     showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
   };
 };
-export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y", reverse?: boolean) => DefaultizedZoomOptions | undefined;

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

@@ -15,6 +15,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
   maxSpan: 100,
   panning: true,
   filterMode: 'keep',
+  reverse: false,
   slider: {
     enabled: false,
     preview: false,
@@ -22,7 +23,7 @@ const defaultZoomOptions = exports.defaultZoomOptions = {
     showTooltip: _constants.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
-const defaultizeZoom = (zoom, axisId, axisDirection) => {
+const defaultizeZoom = (zoom, axisId, axisDirection, reverse) => {
   if (!zoom) {
     return undefined;
   }
@@ -30,12 +31,16 @@ const defaultizeZoom = (zoom, axisId, axisDirection) => {
     return (0, _extends2.default)({
       axisId,
       axisDirection
-    }, defaultZoomOptions);
+    }, defaultZoomOptions, {
+      reverse: reverse ?? false
+    });
   }
   return (0, _extends2.default)({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom, {
+  }, defaultZoomOptions, {
+    reverse: reverse ?? false
+  }, zoom, {
     slider: (0, _extends2.default)({}, defaultZoomOptions.slider, {
       size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? _constants.DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : _constants.DEFAULT_ZOOM_SLIDER_SIZE
     }, zoom.slider)

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNormalizedAxisScale = getNormalizedAxisScale;
 exports.getRange = getRange;
-var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
 var _axis = require("../../../../models/axis");
 var _getScale = require("../../../getScale");
+var _scales = require("../../../scales");
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 function getRange(drawingArea, axisDirection, axis) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
@@ -17,10 +17,10 @@ function getNormalizedAxisScale(axis, domain) {
   const range = [0, 1];
   if ((0, _axis.isBandScaleConfig)(axis)) {
     const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-    return (0, _d3Scale.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
+    return (0, _scales.scaleBand)(domain, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2);
   }
   if ((0, _axis.isPointScaleConfig)(axis)) {
-    return (0, _d3Scale.scalePoint)(domain, range);
+    return (0, _scales.scalePoint)(domain, range);
   }
   const scaleType = axis.scaleType ?? 'linear';
   const scale = (0, _getScale.getScale)(scaleType, domain, range);

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

@@ -5,6 +5,7 @@ import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/i
 import type { ZoomData, ZoomOptions, ZoomSliderShowTooltip } from "./zoom.types.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { ChartsAxisProps } from "../../../../ChartsAxis/index.js";
+import type { UseChartBrushSignature } from "../useChartBrush/index.js";
 /**
  * The axes' configuration after computing.
  * An axis in this state already contains a scale function and all the necessary properties to be rendered.
@@ -67,6 +68,7 @@ export interface DefaultizedZoomOptions extends Required<Omit<ZoomOptions, 'slid
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   slider: DefaultedZoomSliderOptions;
+  reverse: boolean;
 }
 export interface UseChartCartesianAxisState {
   /**
@@ -94,5 +96,5 @@ export type UseChartCartesianAxisSignature<SeriesType extends ChartSeriesType =
   defaultizedParams: UseChartCartesianAxisDefaultizedParameters;
   state: UseChartCartesianAxisState;
   dependencies: [UseChartSeriesSignature<SeriesType>];
-  optionalDependencies: [UseChartInteractionSignature];
+  optionalDependencies: [UseChartInteractionSignature, UseChartBrushSignature];
 }>;

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

@@ -3,17 +3,17 @@ export declare const selectorChartsHighlightXAxisIndex: import("reselect").Selec
   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]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, 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]>;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, 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<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;
@@ -26,7 +26,7 @@ export declare const selectorChartsHighlightYAxisValue: import("reselect").Selec
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, {
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}> & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & Partial<import("../useChartBrush/index.js").UseChartBrushState>, {
   value: any;
   axisId: import("../../../index.js").AxisId;
   dataIndex: number;

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

@@ -11,8 +11,12 @@ var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.
 var _useChartCartesianInteraction = require("./useChartCartesianInteraction.selectors");
 var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
+var _useChartBrush = require("../useChartBrush");
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
-const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+const selectAxisHighlight = (computedIndex, axis, axisItems, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (axisItems !== undefined) {
     return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
   }
@@ -21,9 +25,12 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
     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, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+const selectorChartsHighlightXAxisIndex = exports.selectorChartsHighlightXAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectorChartsHighlightYAxisIndex = exports.selectorChartsHighlightYAxisIndex = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (controlledAxisItems !== undefined) {
     return controlledAxisItems.map(item => (0, _extends2.default)({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
@@ -58,8 +65,8 @@ const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, contro
   }
   return [];
 };
-const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
-const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, _useChartInteraction.selectorChartsLastInteraction], selectAxisHighlightWithValue);
+const selectorChartsHighlightXAxisValue = exports.selectorChartsHighlightXAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionXAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionXAxisValue, _useChartCartesianAxisRendering.selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, _useChartInteraction.selectorChartsLastInteraction, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
+const selectorChartsHighlightYAxisValue = exports.selectorChartsHighlightYAxisValue = (0, _selectors.createSelector)([_useChartCartesianInteraction.selectorChartsInteractionYAxisIndex, _useChartCartesianInteraction.selectorChartsInteractionYAxisValue, _useChartCartesianAxisRendering.selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, _useChartInteraction.selectorChartsLastInteraction, _useChartBrush.selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

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

@@ -145,6 +145,8 @@ const useChartClosestPoint = ({
         type: 'scatter',
         seriesId,
         dataIndex
+      }, {
+        interaction: 'pointer'
       });
       instance.setHighlight?.({
         seriesId,

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

@@ -1,3 +1,4 @@
 export { useChartInteraction } from "./useChartInteraction.js";
 export * from "./useChartInteraction.selectors.js";
+export * from "./useChartTooltip.selectors.js";
 export type { UseChartInteractionSignature } from "./useChartInteraction.types.js";

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

@@ -24,4 +24,16 @@ Object.keys(_useChartInteraction2).forEach(function (key) {
       return _useChartInteraction2[key];
     }
   });
+});
+var _useChartTooltip = require("./useChartTooltip.selectors");
+Object.keys(_useChartTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartTooltip[key];
+    }
+  });
 });

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

@@ -43,13 +43,14 @@ const useChartInteraction = ({
       });
     });
   });
-  const setItemInteraction = (0, _useEventCallback.default)(function setItemInteraction(newItem) {
+  const setItemInteraction = (0, _useEventCallback.default)(function setItemInteraction(newItem, context) {
     store.update(prev => {
       if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prev.interaction.item, newItem)) {
         return prev;
       }
       return (0, _extends2.default)({}, prev, {
         interaction: (0, _extends2.default)({}, prev.interaction, {
+          lastUpdate: context.interaction,
           item: newItem
         })
       });

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

@@ -7,7 +7,7 @@ export declare const selectorChartsInteractionItem: import("reselect").Selector<
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null, any[]>;
+}, import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null, any[]>;
 export declare const selectorChartsInteractionPointer: 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;
 } & {

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

@@ -13,8 +13,12 @@ export interface UseChartInteractionInstance {
   /**
    * Setter for the item the user is interacting with.
    * @param {ChartItemIdentifier} newItem The identifier of the item.
+   * @param {{ interaction: InteractionUpdateSource }} context The context of the interaction.
+   * @param {InteractionUpdateSource} context.interaction The source of the interaction update (pointer or keyboard).
    */
-  setItemInteraction: (newItem: ChartItemIdentifierWithData<ChartSeriesType>) => void;
+  setItemInteraction: (newItem: ChartItemIdentifierWithData<ChartSeriesType>, context: {
+    interaction: InteractionUpdateSource;
+  }) => void;
   /**
    * Remove item interaction if the current if the provided item is still the one interacting.
    * @param {ChartItemIdentifier} itemToRemove The identifier of the item.

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

@@ -0,0 +1,14 @@
+export declare const selectorChartsTooltipItem: 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;
+} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null, any[]>;
+export declare const selectorChartsTooltipItemIsDefined: 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;
+} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, boolean, any[]>;
+export declare const selectorChartsTooltipItemPosition: import("reselect").Selector<any, {
+  x: number;
+  y: number;
+} | null, [placement?: "bottom" | "left" | "right" | "top" | undefined]>;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemIsDefined = exports.selectorChartsTooltipItem = void 0;
+var _useChartSeries = require("../../corePlugins/useChartSeries");
+var _selectors = require("../../utils/selectors");
+var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
+var _useChartInteraction = require("./useChartInteraction.selectors");
+var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
+var _isCartesian = require("../../../isCartesian");
+const selectorChartsTooltipItem = exports.selectorChartsTooltipItem = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsLastInteraction, _useChartInteraction.selectorChartsInteractionItem, _useChartKeyboardNavigation.selectorChartsKeyboardItem], (lastInteraction, interactionItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : interactionItem ?? null);
+const selectorChartsTooltipItemIsDefined = exports.selectorChartsTooltipItemIsDefined = (0, _selectors.createSelector)([_useChartInteraction.selectorChartsLastInteraction, _useChartInteraction.selectorChartsInteractionItemIsDefined, _useChartKeyboardNavigation.selectorChartsKeyboardItemIsDefined], (lastInteraction, interactionItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : interactionItemIsDefined);
+const selectorChartsTooltipItemPosition = exports.selectorChartsTooltipItemPosition = (0, _selectors.createSelector)([selectorChartsTooltipItem, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesConfig, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, (_, placement) => placement], function selectorChartsTooltipItemPosition(identifier, drawingArea, seriesConfig, {
+  axis: xAxis,
+  axisIds: xAxisIds
+}, {
+  axis: yAxis,
+  axisIds: yAxisIds
+}, series, placement = 'top') {
+  if (!identifier) {
+    return null;
+  }
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (itemSeries) {
+    const axesConfig = {};
+    const xAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.xAxisId ?? xAxisIds[0] : undefined;
+    const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
+    if (xAxisId !== undefined) {
+      axesConfig.x = xAxis[xAxisId];
+    }
+    if (yAxisId !== undefined) {
+      axesConfig.y = yAxis[yAxisId];
+    }
+    return seriesConfig[itemSeries.type].tooltipItemPositionGetter?.({
+      series,
+      drawingArea,
+      axesConfig,
+      identifier,
+      placement
+    }) ?? null;
+  }
+  return null;
+});

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

@@ -0,0 +1,3 @@
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { FocusableSeriesTypes } from "./useChartKeyboardNavigation.types.js";
+export declare function isFocusableSeriesType(type: ChartSeriesType): type is FocusableSeriesTypes;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFocusableSeriesType = isFocusableSeriesType;
+const FOCUSABLE_SERIES_TYPES = new Set(['bar', 'line', 'scatter', 'pie']);
+function isFocusableSeriesType(type) {
+  return FOCUSABLE_SERIES_TYPES.has(type);
+}

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

@@ -1,20 +1,21 @@
 import { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import { FocusableSeriesTypes } from "./useChartKeyboardNavigation.types.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'>;
+export declare function getNextSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: FocusableSeriesTypes, seriesId?: SeriesId): {
+  type: FocusableSeriesTypes;
   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'>;
+export declare function getPreviousSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: FocusableSeriesTypes, seriesId?: SeriesId): {
+  type: FocusableSeriesTypes;
   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

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.getNextSeriesWithData = getNextSeriesWithData;
 exports.getPreviousSeriesWithData = getPreviousSeriesWithData;
 exports.seriesHasData = seriesHasData;
+var _isFocusableSeriesType = require("./isFocusableSeriesType");
 /**
  * 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 seriesType = Object.keys(series);
+  const startingTypeIndex = type !== undefined && series[type] ? seriesType.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');
+  const typesAvailable = seriesType.filter(_isFocusableSeriesType.isFocusableSeriesType);
 
   // Loop over all series types starting with the current seriesType
   for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
@@ -52,9 +54,10 @@ function getNextSeriesWithData(series, type, seriesId) {
  * 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 seriesType = Object.keys(series);
+  const startingTypeIndex = type !== undefined && series[type] ? seriesType.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');
+  const typesAvailable = seriesType.filter(_isFocusableSeriesType.isFocusableSeriesType);
 
   // Loop over all series types starting with the current seriesType
   for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {

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

@@ -9,7 +9,7 @@ export declare const selectorChartsFocusedSeriesType: import("reselect").Selecto
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, keyof import("../../../index.js").ChartsSeriesConfig | undefined, any[]>;
+}, "line" | "bar" | "scatter" | "pie" | 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;
 } & {
@@ -40,6 +40,24 @@ export declare const selectorChartsKeyboardItem: import("reselect").Selector<imp
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, {
+  type: "line";
   seriesId: SeriesId;
-  dataIndex: number | undefined;
-} | null, any[]>;
+  dataIndex: number;
+} | {
+  type: "bar";
+  seriesId: SeriesId;
+  dataIndex: number;
+} | {
+  type: "scatter";
+  seriesId: SeriesId;
+  dataIndex: number;
+} | {
+  type: "pie";
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null, any[]>;
+export declare const selectorChartsKeyboardItemIsDefined: 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[]>;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItemIsDefined = 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");
@@ -37,12 +37,19 @@ 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 selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex], function selectorChartsKeyboardItem(seriesType, seriesId, dataIndex) {
-  if (seriesId === undefined) {
+const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _selectors.createSelector)([selectKeyboardNavigation], function selectorChartsKeyboardItem(keyboardState) {
+  if (keyboardState?.item == null) {
     return null;
   }
-  return {
-    seriesId,
-    dataIndex: seriesType === 'line' ? undefined : dataIndex
-  };
+  const {
+    type,
+    seriesId
+  } = keyboardState.item;
+  if (type === undefined || seriesId === undefined) {
+    return null;
+  }
+  return keyboardState.item;
+});
+const selectorChartsKeyboardItemIsDefined = exports.selectorChartsKeyboardItemIsDefined = (0, _selectors.createSelector)([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex], function selectorChartsKeyboardItemIsDefined(seriesType, seriesId, dataIndex) {
+  return seriesId !== undefined && dataIndex !== undefined;
 });

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

@@ -4,11 +4,11 @@ import { SeriesId } from "../../../../models/seriesType/common.js";
 import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../useChartHighlight/index.js";
 export interface UseChartKeyboardNavigationInstance {}
-type SeriesItemIdentifier = {
+type SeriesItemIdentifier<SeriesType extends ChartSeriesType = FocusableSeriesTypes> = SeriesType extends FocusableSeriesTypes ? {
   /**
    * The type of the series
    */
-  type: ChartSeriesType;
+  type: SeriesType;
   /**
    * The id of the series with focus.
    */
@@ -17,7 +17,8 @@ type SeriesItemIdentifier = {
    * The index of the data point with focus.
    */
   dataIndex: number;
-};
+} : never;
+export type FocusableSeriesTypes = 'bar' | 'line' | 'scatter' | 'pie';
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
     item: null | SeriesItemIdentifier;