@mui/x-charts 8.14.0 → 8.15.0

package/internals/domUtils.js

@@ -4,65 +4,65 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyleString = exports.getStringSize = exports.MEASUREMENT_SPAN_ID = void 0;
+exports.batchMeasureStrings = batchMeasureStrings;
+exports.clearStringMeasurementCache = clearStringMeasurementCache;
+exports.getStringSize = void 0;
+exports.getStyleString = getStyleString;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-// DOM utils taken from
+// DOM utils adapted from
 // https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
 
 function isSsr() {
   return typeof window === 'undefined';
 }
 const stringCache = new Map();
+function clearStringMeasurementCache() {
+  stringCache.clear();
+}
 const MAX_CACHE_NUM = 2000;
-const SPAN_STYLE = {
-  position: 'absolute',
-  top: '-20000px',
-  left: 0,
-  padding: 0,
-  margin: 0,
-  border: 'none',
-  whiteSpace: 'pre'
-};
-const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
-const MEASUREMENT_SPAN_ID = exports.MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+const PIXEL_STYLES = new Set(['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom']);
 
 /**
- *
+ * Convert number value to pixel value for certain CSS properties
  * @param name CSS property name
  * @param value
  * @returns add 'px' for distance properties
  */
-function autoCompleteStyle(name, value) {
-  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
+function convertPixelValue(name, value) {
+  if (PIXEL_STYLES.has(name) && value === +value) {
     return `${value}px`;
   }
   return value;
 }
 
 /**
- *
+ * Converts camelcase to dash-case
  * @param text camelcase css property
- * @returns css property
  */
-function camelToMiddleLine(text) {
-  const strs = text.split('');
-  const formatStrs = strs.reduce((result, entry) => {
-    if (entry === entry.toUpperCase()) {
-      return [...result, '-', entry.toLowerCase()];
-    }
-    return [...result, entry];
-  }, []);
-  return formatStrs.join('');
+const AZ = /([A-Z])/g;
+function camelCaseToDashCase(text) {
+  return String(text).replace(AZ, match => `-${match.toLowerCase()}`);
 }
 
 /**
- *
+ * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-exports.getStyleString = getStyleString;
-let domCleanTimeout;
+function getStyleString(style) {
+  let result = '';
+  for (const key in style) {
+    if (Object.hasOwn(style, key)) {
+      const k = key;
+      const value = style[k];
+      if (value === undefined) {
+        continue;
+      }
+      result += `${camelCaseToDashCase(k)}:${convertPixelValue(k, value)};`;
+    }
+  }
+  return result;
+}
 
 /**
  *
@@ -77,7 +77,7 @@ const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-  const str = `${text}`;
+  const str = String(text);
   const styleString = getStyleString(style);
   const cacheKey = `${str}-${styleString}`;
   const size = stringCache.get(cacheKey);
@@ -85,22 +85,18 @@ const getStringSize = (text, style = {}) => {
     return size;
   }
   try {
-    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
-    if (measurementSpan === null) {
-      measurementSpan = document.createElement('span');
-      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
-      measurementSpan.setAttribute('aria-hidden', 'true');
-      document.body.appendChild(measurementSpan);
-    }
+    const measurementSpanContainer = getMeasurementContainer();
+    const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+
     // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
     // https://en.wikipedia.org/wiki/Content_Security_Policy
-    const measurementSpanStyle = (0, _extends2.default)({}, SPAN_STYLE, style);
-    Object.keys(measurementSpanStyle).map(styleKey => {
-      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+    Object.keys(style).map(styleKey => {
+      measurementElem.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, style[styleKey]);
       return styleKey;
     });
-    measurementSpan.textContent = str;
-    const rect = measurementSpan.getBoundingClientRect();
+    measurementElem.textContent = str;
+    measurementSpanContainer.replaceChildren(measurementElem);
+    const rect = measurementElem.getBoundingClientRect();
     const result = {
       width: rect.width,
       height: rect.height
@@ -111,15 +107,7 @@ const getStringSize = (text, style = {}) => {
     }
     if (process.env.NODE_ENV === 'test') {
       // In test environment, we clean the measurement span immediately
-      measurementSpan.textContent = '';
-    } else {
-      if (domCleanTimeout) {
-        clearTimeout(domCleanTimeout);
-      }
-      domCleanTimeout = setTimeout(() => {
-        // Limit node cleaning to once per render cycle
-        measurementSpan.textContent = '';
-      }, 0);
+      measurementSpanContainer.replaceChildren();
     }
     return result;
   } catch {
@@ -129,4 +117,81 @@ const getStringSize = (text, style = {}) => {
     };
   }
 };
-exports.getStringSize = getStringSize;
+exports.getStringSize = getStringSize;
+function batchMeasureStrings(texts, style = {}) {
+  if (isSsr()) {
+    return new Map(Array.from(texts).map(text => [text, {
+      width: 0,
+      height: 0
+    }]));
+  }
+  const sizeMap = new Map();
+  const textToMeasure = [];
+  const styleString = getStyleString(style);
+  for (const text of texts) {
+    const cacheKey = `${text}-${styleString}`;
+    const size = stringCache.get(cacheKey);
+    if (size) {
+      sizeMap.set(text, size);
+    } else {
+      textToMeasure.push(text);
+    }
+  }
+  const measurementContainer = getMeasurementContainer();
+  // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
+  // https://en.wikipedia.org/wiki/Content_Security_Policy
+  const measurementSpanStyle = (0, _extends2.default)({}, style);
+  Object.keys(measurementSpanStyle).map(styleKey => {
+    measurementContainer.style[camelCaseToDashCase(styleKey)] = convertPixelValue(styleKey, measurementSpanStyle[styleKey]);
+    return styleKey;
+  });
+  const measurementElems = [];
+  for (const string of textToMeasure) {
+    const measurementElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    measurementElem.textContent = `${string}`;
+    measurementElems.push(measurementElem);
+  }
+  measurementContainer.replaceChildren(...measurementElems);
+  for (let i = 0; i < textToMeasure.length; i += 1) {
+    const text = textToMeasure[i];
+    const measurementSpan = measurementContainer.children[i];
+    const rect = measurementSpan.getBoundingClientRect();
+    const result = {
+      width: rect.width,
+      height: rect.height
+    };
+    const cacheKey = `${text}-${styleString}`;
+    stringCache.set(cacheKey, result);
+    sizeMap.set(text, result);
+  }
+  if (stringCache.size + 1 > MAX_CACHE_NUM) {
+    stringCache.clear();
+  }
+  if (process.env.NODE_ENV === 'test') {
+    // In test environment, we clean the measurement span immediately
+    measurementContainer.replaceChildren();
+  }
+  return sizeMap;
+}
+let measurementContainer = null;
+
+/**
+ * Get (or create) a hidden span element to measure text size.
+ */
+function getMeasurementContainer() {
+  if (measurementContainer === null) {
+    measurementContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    measurementContainer.setAttribute('aria-hidden', 'true');
+    measurementContainer.style.position = 'absolute';
+    measurementContainer.style.top = '-20000px';
+    measurementContainer.style.left = '0';
+    measurementContainer.style.padding = '0';
+    measurementContainer.style.margin = '0';
+    measurementContainer.style.border = 'none';
+    measurementContainer.style.pointerEvents = 'none';
+    measurementContainer.style.visibility = 'hidden';
+    measurementContainer.style.contain = 'strict';
+    document.body.appendChild(measurementContainer);
+  }
+  return measurementContainer;
+}

package/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/internals/index.js

@@ -326,6 +326,18 @@ Object.keys(_useChartClosestPoint).forEach(function (key) {
     }
   });
 });
+var _useChartBrush = require("./plugins/featurePlugins/useChartBrush");
+Object.keys(_useChartBrush).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartBrush[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartBrush[key];
+    }
+  });
+});
 var _selectors = require("./plugins/utils/selectors");
 Object.keys(_selectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/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/internals/plugins/allPlugins.js

@@ -10,6 +10,7 @@ var _useChartInteraction = require("./featurePlugins/useChartInteraction");
 var _useChartKeyboardNavigation = require("./featurePlugins/useChartKeyboardNavigation");
 var _useChartClosestPoint = require("./featurePlugins/useChartClosestPoint");
 var _useChartZAxis = require("./featurePlugins/useChartZAxis");
+var _useChartBrush = require("./featurePlugins/useChartBrush");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

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

@@ -24,14 +24,26 @@ const useChartInteractionListener = ({
           name: 'pan',
           threshold: 0,
           maxPointers: 1
+        }), new _core.MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+        }), new _core.TapGesture({
+          name: 'tap',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+        }), new _core.PressGesture({
+          name: 'quickPress',
+          duration: 50
         }), new _core.PanGesture({
+          name: 'brush',
+          threshold: 0,
+          maxPointers: 1
+        }),
+        // Zoom gestures
+        new _core.PanGesture({
           name: 'zoomPan',
           threshold: 0,
           maxPointers: 1,
           preventIf: ['zoomTapAndDrag', 'zoomPressAndDrag']
-        }), new _core.MoveGesture({
-          name: 'move',
-          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
         }), new _core.PinchGesture({
           name: 'zoomPinch',
           threshold: 5,
@@ -40,12 +52,6 @@ const useChartInteractionListener = ({
           name: 'zoomTurnWheel',
           sensitivity: 0.01,
           initialDelta: 1
-        }), new _core.TapGesture({
-          name: 'tap',
-          preventIf: ['pan', 'zoomPan', 'zoomPinch']
-        }), new _core.PressGesture({
-          name: 'quickPress',
-          duration: 50
         }), new _core.TapAndDragGesture({
           name: 'zoomTapAndDrag',
           dragThreshold: 10
@@ -62,7 +68,7 @@ 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/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/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/internals/plugins/featurePlugins/useChartBrush/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useChartBrush = require("./useChartBrush");
+Object.keys(_useChartBrush).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartBrush[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartBrush[key];
+    }
+  });
+});
+var _useChartBrush2 = require("./useChartBrush.types");
+Object.keys(_useChartBrush2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartBrush2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartBrush2[key];
+    }
+  });
+});
+var _useChartBrush3 = require("./useChartBrush.selectors");
+Object.keys(_useChartBrush3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartBrush3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartBrush3[key];
+    }
+  });
+});

package/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/internals/plugins/featurePlugins/useChartBrush/useChartBrush.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartBrush = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _getSVGPoint = require("../../../getSVGPoint");
+const useChartBrush = ({
+  store,
+  svgRef,
+  instance,
+  params
+}) => {
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prev => {
+      return (0, _extends2.default)({}, prev, {
+        brush: (0, _extends2.default)({}, 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 = (0, _useEventCallback.default)(function setBrushCoordinates(point) {
+    store.update(prev => {
+      return (0, _extends2.default)({}, prev, {
+        brush: (0, _extends2.default)({}, prev.brush, {
+          start: prev.brush.start ?? point,
+          current: point
+        })
+      });
+    });
+  });
+  const clearBrush = (0, _useEventCallback.default)(function clearBrush() {
+    store.update(prev => {
+      return (0, _extends2.default)({}, prev, {
+        brush: (0, _extends2.default)({}, 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 = (0, _getSVGPoint.getSVGPoint)(element, {
+        clientX: event.detail.initialCentroid.x,
+        clientY: event.detail.initialCentroid.y
+      });
+      setBrushCoordinates(point);
+    };
+    const handleBrush = event => {
+      const currentPoint = (0, _getSVGPoint.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
+    }
+  };
+};
+exports.useChartBrush = useChartBrush;
+useChartBrush.params = {
+  brushConfig: true
+};
+useChartBrush.getDefaultizedParams = ({
+  params
+}) => {
+  return (0, _extends2.default)({}, 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/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[]>;