@mui/x-charts 8.14.1 → 8.15.0

package/esm/internals/index.d.ts

@@ -27,6 +27,7 @@ export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
+export * from "./plugins/featurePlugins/useChartBrush/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";

package/esm/internals/index.js

@@ -32,6 +32,7 @@ export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
+export * from "./plugins/featurePlugins/useChartBrush/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";

package/esm/internals/plugins/allPlugins.d.ts

@@ -6,6 +6,7 @@ import { UseChartKeyboardNavigationSignature } from "./featurePlugins/useChartKe
 import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
 import { UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+import { UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/esm/internals/plugins/allPlugins.js

@@ -6,4 +6,5 @@ import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.
 import { useChartKeyboardNavigation } from "./featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartClosestPoint } from "./featurePlugins/useChartClosestPoint/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+import { useChartBrush } from "./featurePlugins/useChartBrush/index.js";
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -18,14 +18,26 @@ export const useChartInteractionListener = ({
           name: 'pan',
           threshold: 0,
           maxPointers: 1
+        }), new MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+        }), new TapGesture({
+          name: 'tap',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+        }), new PressGesture({
+          name: 'quickPress',
+          duration: 50
         }), new PanGesture({
+          name: 'brush',
+          threshold: 0,
+          maxPointers: 1
+        }),
+        // Zoom gestures
+        new PanGesture({
           name: 'zoomPan',
           threshold: 0,
           maxPointers: 1,
           preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
-        }), new MoveGesture({
-          name: 'move',
-          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
         }), new PinchGesture({
           name: 'zoomPinch',
           threshold: 5,
@@ -34,12 +46,6 @@ export const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
-        }), new TapGesture({
-          name: 'tap',
-          preventIf: ['pan', 'zoomPan', 'zoomPinch']
-        }), new PressGesture({
-          name: 'quickPress',
-          duration: 50
         }), new TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -56,7 +62,7 @@ export const useChartInteractionListener = ({
     if (!svg || !gestureManager) {
       return undefined;
     }
-    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag', 'zoomPressAndDrag', 'brush'], svg);
     return () => {
       // Cleanup gesture manager
       gestureManager.unregisterAllGestures(svg);

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

@@ -1,11 +1,11 @@
 import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type PressAndDragEvent, type PressAndDragGestureOptions, type TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'zoomTurnWheel' | 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd' | 'zoomPressAndDrag' | 'zoomPressAndDragStart' | 'zoomPressAndDragEnd' | 'move' | 'moveStart' | 'moveEnd' | 'tap' | 'quickPress' | 'quickPressEnd' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
 export type AddInteractionListener = {
-  <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: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'brush' | 'brushStart' | 'brushCancel' | 'brushEnd', 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;

package/esm/internals/plugins/featurePlugins/useChartBrush/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useChartBrush.js";
+export * from "./useChartBrush.types.js";
+export * from "./useChartBrush.selectors.js";

package/esm/internals/plugins/featurePlugins/useChartBrush/index.js

@@ -0,0 +1,3 @@
+export * from "./useChartBrush.js";
+export * from "./useChartBrush.types.js";
+export * from "./useChartBrush.selectors.js";

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

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

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

@@ -0,0 +1,109 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { getSVGPoint } from "../../../getSVGPoint.js";
+export const useChartBrush = ({
+  store,
+  svgRef,
+  instance,
+  params
+}) => {
+  useEnhancedEffect(() => {
+    store.update(prev => {
+      return _extends({}, prev, {
+        brush: _extends({}, prev.brush, {
+          enabled: params.brushConfig.enabled,
+          preventTooltip: params.brushConfig.preventTooltip,
+          preventHighlight: params.brushConfig.preventHighlight
+        })
+      });
+    });
+  }, [store, params.brushConfig.enabled, params.brushConfig.preventTooltip, params.brushConfig.preventHighlight]);
+  const setBrushCoordinates = useEventCallback(function setBrushCoordinates(point) {
+    store.update(prev => {
+      return _extends({}, prev, {
+        brush: _extends({}, prev.brush, {
+          start: prev.brush.start ?? point,
+          current: point
+        })
+      });
+    });
+  });
+  const clearBrush = useEventCallback(function clearBrush() {
+    store.update(prev => {
+      return _extends({}, prev, {
+        brush: _extends({}, prev.brush, {
+          start: null,
+          current: null
+        })
+      });
+    });
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !store.getSnapshot().brush.enabled) {
+      return () => {};
+    }
+    const handleBrushStart = event => {
+      if (event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        return;
+      }
+      const point = getSVGPoint(element, {
+        clientX: event.detail.initialCentroid.x,
+        clientY: event.detail.initialCentroid.y
+      });
+      setBrushCoordinates(point);
+    };
+    const handleBrush = event => {
+      const currentPoint = getSVGPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+      setBrushCoordinates(currentPoint);
+    };
+    const brushStartHandler = instance.addInteractionListener('brushStart', handleBrushStart);
+    const brushHandler = instance.addInteractionListener('brush', handleBrush);
+    const brushCancelHandler = instance.addInteractionListener('brushCancel', clearBrush);
+    const brushEndHandler = instance.addInteractionListener('brushEnd', clearBrush);
+    return () => {
+      brushStartHandler.cleanup();
+      brushHandler.cleanup();
+      brushEndHandler.cleanup();
+      brushCancelHandler.cleanup();
+    };
+  }, [svgRef, instance, store, clearBrush, setBrushCoordinates]);
+  return {
+    instance: {
+      setBrushCoordinates,
+      clearBrush
+    }
+  };
+};
+useChartBrush.params = {
+  brushConfig: true
+};
+useChartBrush.getDefaultizedParams = ({
+  params
+}) => {
+  return _extends({}, params, {
+    brushConfig: {
+      enabled: params?.brushConfig?.enabled ?? false,
+      preventTooltip: params?.brushConfig?.preventTooltip ?? true,
+      preventHighlight: params?.brushConfig?.preventHighlight ?? true
+    }
+  });
+};
+useChartBrush.getInitialState = params => {
+  return {
+    brush: {
+      enabled: params.brushConfig.enabled,
+      preventTooltip: params.brushConfig.preventTooltip,
+      preventHighlight: params.brushConfig.preventHighlight,
+      start: null,
+      current: null
+    }
+  };
+};

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.d.ts

@@ -0,0 +1,82 @@
+import { type ChartOptionalRootSelector } from "../../utils/selectors.js";
+import type { UseChartBrushSignature } from "./useChartBrush.types.js";
+export declare const selectorBrush: ChartOptionalRootSelector<UseChartBrushSignature>;
+export declare const selectorBrushStart: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("./useChartBrush.types.js").Point | null | undefined, any[]>;
+export declare const selectorBrushCurrent: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("./useChartBrush.types.js").Point | null | undefined, any[]>;
+export declare const selectorBrushStartX: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number | null, any[]>;
+export declare const selectorBrushStartY: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number | null, any[]>;
+export declare const selectorBrushCurrentX: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number | null, any[]>;
+export declare const selectorBrushCurrentY: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number | null, any[]>;
+export declare const selectorBrushState: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, {
+  start: {
+    x: number;
+    y: number;
+  };
+  current: {
+    x: number;
+    y: number;
+  };
+} | null, any[]>;
+export declare const selectorBrushConfigNoZoom: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, "x" | "y" | "xy", any[]>;
+export declare const selectorBrushConfigZoom: 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/index.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, "x" | "y" | "xy" | null, []>;
+export declare const selectorBrushConfig: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState>, "x" | "y" | "xy", any[]>;
+export declare const selectorIsBrushEnabled: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean | undefined, any[]>;
+export declare const selectorIsBrushSelectionActive: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean | undefined, any[]>;
+export declare const selectorBrushShouldPreventAxisHighlight: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean | undefined, any[]>;
+export declare const selectorBrushShouldPreventTooltip: 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("./useChartBrush.types.js").UseChartBrushState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean | undefined, any[]>;

package/esm/internals/plugins/featurePlugins/useChartBrush/useChartBrush.selectors.js

@@ -0,0 +1,75 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartZoomOptionsLookup } from "../useChartCartesianAxis/index.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+export const selectorBrush = state => state.brush;
+export const selectorBrushStart = createSelector([selectorBrush], brush => brush?.start);
+export const selectorBrushCurrent = createSelector([selectorBrush], brush => brush?.current);
+export const selectorBrushStartX = createSelector([selectorBrush], brush => brush?.start?.x ?? null);
+export const selectorBrushStartY = createSelector([selectorBrush], brush => brush?.start?.y ?? null);
+export const selectorBrushCurrentX = createSelector([selectorBrush], brush => brush?.current?.x ?? null);
+export const selectorBrushCurrentY = createSelector([selectorBrush], brush => brush?.current?.y ?? null);
+export const selectorBrushState = createSelector([selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY], (startX, startY, currentX, currentY) => {
+  if (startX === null || startY === null || currentX === null || currentY === null) {
+    return null;
+  }
+  return {
+    start: {
+      x: startX,
+      y: startY
+    },
+    current: {
+      x: currentX,
+      y: currentY
+    }
+  };
+});
+export const selectorBrushConfigNoZoom = createSelector([selectorChartSeriesProcessed], series => {
+  let hasHorizontal = false;
+  let isBothDirections = false;
+  if (series) {
+    Object.entries(series).forEach(([seriesType, seriesData]) => {
+      if (Object.values(seriesData.series).some(s => s.layout === 'horizontal')) {
+        hasHorizontal = true;
+      }
+      if (seriesType === 'scatter' && seriesData.seriesOrder.length > 0) {
+        isBothDirections = true;
+      }
+    });
+  }
+  if (isBothDirections) {
+    return 'xy';
+  }
+  if (hasHorizontal) {
+    return 'y';
+  }
+  return 'x';
+});
+export const selectorBrushConfigZoom = createSelector([selectorChartZoomOptionsLookup], optionsLookup => {
+  let hasX = false;
+  let hasY = false;
+  Object.values(optionsLookup).forEach(options => {
+    if (options.axisDirection === 'y') {
+      hasY = true;
+    }
+    if (options.axisDirection === 'x') {
+      hasX = true;
+    }
+  });
+  if (hasX && hasY) {
+    return 'xy';
+  }
+  if (hasY) {
+    return 'y';
+  }
+  if (hasX) {
+    return 'x';
+  }
+  return null;
+});
+export const selectorBrushConfig = createSelector([selectorBrushConfigNoZoom, selectorBrushConfigZoom], (configNoZoom, configZoom) => configZoom ?? configNoZoom);
+export const selectorIsBrushEnabled = createSelector([selectorBrush], brush => brush?.enabled);
+export const selectorIsBrushSelectionActive = createSelector([selectorBrush], brush => {
+  return brush?.enabled && brush?.start !== null && brush?.current !== null;
+});
+export const selectorBrushShouldPreventAxisHighlight = createSelector([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventHighlight);
+export const selectorBrushShouldPreventTooltip = createSelector([selectorBrush, selectorIsBrushSelectionActive], (brush, isBrushSelectionActive) => isBrushSelectionActive && brush?.preventTooltip);

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

@@ -0,0 +1,72 @@
+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 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;
+}
+export interface BrushConfig {
+  /**
+   * Whether the brush interaction is enabled.
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Whether to prevent tooltip from showing during brush interaction.
+   * @default false
+   */
+  preventTooltip?: boolean;
+  /**
+   * Whether to prevent highlighting during brush interaction.
+   * @default false
+   */
+  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/esm/internals/plugins/featurePlugins/useChartCartesianAxis/createZoomLookup.js

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

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

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

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

@@ -8,6 +8,7 @@ export const defaultZoomOptions = {
   maxSpan: 100,
   panning: true,
   filterMode: 'keep',
+  reverse: false,
   slider: {
     enabled: false,
     preview: false,
@@ -15,7 +16,7 @@ export const defaultZoomOptions = {
     showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
 };
-export const defaultizeZoom = (zoom, axisId, axisDirection) => {
+export const defaultizeZoom = (zoom, axisId, axisDirection, reverse) => {
   if (!zoom) {
     return undefined;
   }
@@ -23,12 +24,16 @@ export const defaultizeZoom = (zoom, axisId, axisDirection) => {
     return _extends({
       axisId,
       axisDirection
-    }, defaultZoomOptions);
+    }, defaultZoomOptions, {
+      reverse: reverse ?? false
+    });
   }
   return _extends({
     axisId,
     axisDirection
-  }, defaultZoomOptions, zoom, {
+  }, defaultZoomOptions, {
+    reverse: reverse ?? false
+  }, zoom, {
     slider: _extends({}, defaultZoomOptions.slider, {
       size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : DEFAULT_ZOOM_SLIDER_SIZE
     }, zoom.slider)

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