@mui/x-charts 8.14.0 → 8.15.0

package/esm/internals/domUtils.js

@@ -1,60 +1,58 @@
 import _extends from "@babel/runtime/helpers/esm/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();
+export 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'];
-export const 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
  */
-export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-let domCleanTimeout;
+export 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;
+}
 
 /**
  *
@@ -69,7 +67,7 @@ export 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);
@@ -77,22 +75,18 @@ export 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 = _extends({}, 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
@@ -103,15 +97,7 @@ export 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 {
@@ -120,4 +106,81 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
+};
+export 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 = _extends({}, 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/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);