@mui/x-charts 8.12.0 → 8.13.0

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -1,16 +1,23 @@
-import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } from '@mui/x-internal-gestures/core';
+import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'pinch' | 'pinchStart' | 'pinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'turnWheel' | 'tap';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'zoomTurnWheel' | 'tap';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
 export type AddInteractionListener = {
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pinch' | 'pinchStart' | 'pinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'turnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd', callback: (event: TapAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+};
+export type UpdateZoomInteractionListeners = {
+  (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
+  (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
+  (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
@@ -22,6 +29,13 @@ export interface UseChartInteractionListenerInstance {
    * @param callback The callback to call when the interaction occurs.
    */
   addInteractionListener: AddInteractionListener;
+  /**
+   * Updates the zoom interaction listeners with the provided options.
+   *
+   * @param interaction The interaction to update.
+   * @param options The options to apply to the interaction.
+   */
+  updateZoomInteractionListeners: UpdateZoomInteractionListeners;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisScale.d.ts

@@ -13,6 +13,7 @@ type GetAxesScalesParams<T extends ChartSeriesType = ChartSeriesType> = {
    * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
    */
   preferStrictDomainInLineCharts?: boolean;
+  defaultTickNumber: number;
 };
 export declare function getXAxesScales<T extends ChartSeriesType>({
   drawingArea,
@@ -20,7 +21,8 @@ export declare function getXAxesScales<T extends ChartSeriesType>({
   axis: axes,
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }: GetAxesScalesParams<T> & {
   axis?: DefaultedAxis[];
 }): Record<AxisId, ScaleDefinition>;
@@ -30,7 +32,8 @@ export declare function getYAxesScales<T extends ChartSeriesType>({
   axis: axes,
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }: GetAxesScalesParams<T> & {
   axis?: DefaultedAxis[];
 }): Record<AxisId, ScaleDefinition>;

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig, isSymlogScaleConfig } from "../../../../models/axis.js";
 import { zoomScaleRange } from "./zoom.js";
@@ -17,13 +16,14 @@ export function getXAxesScales({
   axis: axes = [],
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }) {
   const scales = {};
   axes.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+    scales[axis.id] = getAxisScale(axis, 'x', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
   });
   return scales;
 }
@@ -33,13 +33,14 @@ export function getYAxesScales({
   axis: axes = [],
   seriesConfig,
   zoomMap,
-  preferStrictDomainInLineCharts
+  preferStrictDomainInLineCharts,
+  defaultTickNumber
 }) {
   const scales = {};
   axes.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
     const zoom = zoomMap?.get(axis.id);
-    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts);
+    scales[axis.id] = getAxisScale(axis, 'y', zoom, drawingArea, seriesConfig, axisIndex, formattedSeries, preferStrictDomainInLineCharts, defaultTickNumber);
   });
   return scales;
 }
@@ -47,7 +48,7 @@ function getAxisScale(axis, axisDirection, zoom, drawingArea, seriesConfig, axis
 /**
  * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
  */
-preferStrictDomainInLineCharts) {
+preferStrictDomainInLineCharts, defaultTickNumber) {
   const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
   const range = getRange(drawingArea, axisDirection, axis);
   if (isBandScaleConfig(axis)) {
@@ -78,10 +79,7 @@ preferStrictDomainInLineCharts) {
     axisExtrema[0] = min;
     axisExtrema[1] = max;
   }
-  const rawTickNumber = getTickNumber(_extends({}, axis, {
-    range,
-    domain: axisExtrema
-  }));
+  const rawTickNumber = getTickNumber(axis, axisExtrema, defaultTickNumber);
   const zoomedRange = zoomScaleRange(range, zoomRange);
   const scale = getScale(scaleType, axisExtrema, zoomedRange);
   if (isSymlogScaleConfig(axis) && axis.constant != null) {

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPreview.selectors.js

@@ -2,7 +2,7 @@ import { createSelector } from "../../utils/selectors.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { computeAxisValue } from "./computeAxisValue.js";
-import { selectorChartZoomAxisFilters, selectorChartZoomOptionsLookup } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartZoomAxisFilters, selectorChartZoomOptionsLookup, selectorDefaultXAxisTickNumber, selectorDefaultYAxisTickNumber } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.js";
 import { ZOOM_SLIDER_PREVIEW_SIZE } from "../../../constants.js";
 import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
@@ -24,7 +24,7 @@ function createPreviewDrawingArea(axisDirection, mainChartDrawingArea) {
     bottom: mainChartDrawingArea.height
   };
 }
-export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewXScales(xAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
   const hasAxis = xAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'x' : 'y', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -39,7 +39,8 @@ export const selectorChartPreviewXScales = createSelector([selectorChartRawXAxis
     axis: xAxes,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRawXAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, selectorPreferStrictDomainInLineCharts, selectorChartPreviewXScales, (_, axisId) => axisId], (xAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {
@@ -70,7 +71,7 @@ export const selectorChartPreviewComputedXAxis = createSelector([selectorChartRa
   }
   return computedAxes.axis;
 });
-export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, axisId) {
+export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber, (_, axisId) => axisId], function selectorChartPreviewYScales(yAxes, chartDrawingArea, formattedSeries, seriesConfig, zoomOptions, preferStrictDomainInLineCharts, defaultTickNumber, axisId) {
   const hasAxis = yAxes?.some(axis => axis.id === axisId);
   const drawingArea = createPreviewDrawingArea(hasAxis ? 'y' : 'x', chartDrawingArea);
   const options = zoomOptions[axisId];
@@ -85,7 +86,8 @@ export const selectorChartPreviewYScales = createSelector([selectorChartRawYAxis
     axis: yAxes,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 export const selectorChartPreviewComputedYAxis = createSelector([selectorChartRawYAxis, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, selectorChartDrawingArea, selectorPreferStrictDomainInLineCharts, selectorChartPreviewYScales, (_, axisId) => axisId], (yAxes, formattedSeries, seriesConfig, zoomOptions, getFilters, chartDrawingArea, preferStrictDomainInLineCharts, scales, axisId) => {

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

@@ -23,6 +23,16 @@ export declare const selectorChartZoomOptionsLookup: import("reselect").Selector
   [x: number]: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions;
 }, []>;
 export declare const selectorChartAxisZoomOptionsLookup: import("reselect").Selector<any, import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions, [axisId: AxisId]>;
+export declare const selectorDefaultXAxisTickNumber: 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;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number, []>;
+export declare const selectorDefaultYAxisTickNumber: 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;
+} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number, []>;
 export declare const selectorChartXScales: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {

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

@@ -8,6 +8,7 @@ import { createZoomLookup } from "./createZoomLookup.js";
 import { selectorChartRawXAxis, selectorChartRawYAxis } from "./useChartCartesianAxisLayout.selectors.js";
 import { selectorPreferStrictDomainInLineCharts } from "../../corePlugins/useChartExperimentalFeature/index.js";
 import { getXAxesScales, getYAxesScales } from "./getAxisScale.js";
+import { getDefaultTickNumber } from "../../../ticks.js";
 export const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -27,24 +28,32 @@ export const selectorChartZoomOptionsLookup = createSelector([selectorChartRawXA
 export const selectorChartAxisZoomOptionsLookup = createSelector([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
 const selectorChartXFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'x'));
 const selectorChartYFilter = createSelector([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && createAxisFilterMapper(zoomMap, zoomOptions, 'y'));
-export const selectorChartXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+export const selectorDefaultXAxisTickNumber = createSelector([selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
+  return getDefaultTickNumber(drawingArea.width);
+});
+export const selectorDefaultYAxisTickNumber = createSelector([selectorChartDrawingArea], function selectorDefaultYAxisTickNumber(drawingArea) {
+  return getDefaultTickNumber(drawingArea.height);
+});
+export const selectorChartXScales = createSelector([selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
   return getXAxesScales({
     drawingArea,
     formattedSeries,
     axis,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
-export const selectorChartYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts) {
+export const selectorChartYScales = createSelector([selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorChartZoomMap, selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
   return getYAxesScales({
     drawingArea,
     formattedSeries,
     axis,
     seriesConfig,
     zoomMap,
-    preferStrictDomainInLineCharts
+    preferStrictDomainInLineCharts,
+    defaultTickNumber
   });
 });
 export const selectorChartZoomAxisFilters = createSelector([selectorChartXFilter, selectorChartYFilter, selectorChartRawXAxis, selectorChartRawYAxis, selectorChartXScales, selectorChartYScales], (xMapper, yMapper, xAxis, yAxis, xScales, yScales) => {

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

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

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue } from "./useChartCartesianInteraction.selectors.js";
+import { selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js";
+import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.js";
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
 const selectAxisHighlight = (computedIndex, axis, axisItems) => {
   if (axisItems !== undefined) {
@@ -14,22 +16,43 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
 };
 export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
 export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, axisItems) => {
-  if (axisItems !== undefined) {
-    return axisItems.map(item => _extends({}, item, {
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+  if (controlledAxisItems !== undefined) {
+    return controlledAxisItems.map(item => _extends({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
     })).filter(({
       value
     }) => value !== undefined);
   }
-  return computedValue === null ? [] : [{
+  const pointerHighlight = computedValue !== null && {
     axisId: axis.axisIds[0],
     dataIndex: computedIndex,
     value: computedValue
-  }];
+  };
+  const keyboardValue = keyboardAxisItem && axis.axis[keyboardAxisItem.axisId]?.data?.[keyboardAxisItem.dataIndex];
+  const keyboardHighlight = keyboardAxisItem && keyboardValue != null && _extends({}, keyboardAxisItem, {
+    value: keyboardValue
+  });
+  if (lastInteractionUpdate === 'pointer') {
+    if (pointerHighlight) {
+      return [pointerHighlight];
+    }
+    if (keyboardHighlight) {
+      return [keyboardHighlight];
+    }
+  }
+  if (lastInteractionUpdate === 'keyboard') {
+    if (keyboardHighlight) {
+      return [keyboardHighlight];
+    }
+    if (pointerHighlight) {
+      return [pointerHighlight];
+    }
+  }
+  return [];
 };
-export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
-export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlightWithValue);
+export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardXAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
+export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardYAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

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

@@ -7,10 +7,10 @@ export const useChartInteraction = ({
   const cleanInteraction = useEventCallback(function cleanInteraction() {
     store.update(prev => {
       return _extends({}, prev, {
-        interaction: {
+        interaction: _extends({}, prev.interaction, {
           pointer: null,
           item: null
-        }
+        })
       });
     });
   });
@@ -51,7 +51,8 @@ export const useChartInteraction = ({
   const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
     store.update(prev => _extends({}, prev, {
       interaction: _extends({}, prev.interaction, {
-        pointer: coordinate
+        pointer: coordinate,
+        lastUpdate: coordinate !== null ? 'pointer' : prev.interaction.lastUpdate
       })
     }));
   });
@@ -67,7 +68,8 @@ export const useChartInteraction = ({
 useChartInteraction.getInitialState = () => ({
   interaction: {
     item: null,
-    pointer: null
+    pointer: null,
+    lastUpdate: 'pointer'
   }
 });
 useChartInteraction.params = {};

package/esm/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/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -5,4 +5,5 @@ export const selectorChartsInteractionItem = createSelector([selectInteraction],
 export const selectorChartsInteractionPointer = createSelector([selectInteraction], interaction => interaction?.pointer ?? null);
 export const selectorChartsInteractionPointerX = createSelector([selectorChartsInteractionPointer], pointer => pointer && pointer.x);
 export const selectorChartsInteractionPointerY = createSelector([selectorChartsInteractionPointer], pointer => pointer && pointer.y);
-export const selectorChartsInteractionItemIsDefined = createSelector([selectorChartsInteractionItem], item => item !== null);
+export const selectorChartsInteractionItemIsDefined = createSelector([selectorChartsInteractionItem], item => item !== null);
+export const selectorChartsLastInteraction = createSelector([selectInteraction], interaction => interaction?.lastUpdate);

package/esm/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<{