@mui/x-charts 8.14.1 → 8.15.0

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

@@ -4,8 +4,12 @@ import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisR
 import { selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue } from "./useChartCartesianInteraction.selectors.js";
 import { selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js";
 import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { selectorBrushShouldPreventAxisHighlight } from "../useChartBrush/index.js";
 const selectorChartControlledCartesianAxisHighlight = state => state.controlledCartesianAxisHighlight;
-const selectAxisHighlight = (computedIndex, axis, axisItems) => {
+const selectAxisHighlight = (computedIndex, axis, axisItems, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (axisItems !== undefined) {
     return axisItems.filter(item => axis.axis[item.axisId] !== undefined).map(item => item);
   }
@@ -14,9 +18,12 @@ const selectAxisHighlight = (computedIndex, axis, axisItems) => {
     dataIndex: computedIndex
   }];
 };
-export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight], selectAxisHighlight);
-const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate) => {
+export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate, isBrushSelectionActive) => {
+  if (isBrushSelectionActive) {
+    return [];
+  }
   if (controlledAxisItems !== undefined) {
     return controlledAxisItems.map(item => _extends({}, item, {
       value: axis.axis[item.axisId]?.data?.[item.dataIndex]
@@ -51,8 +58,8 @@ const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, contro
   }
   return [];
 };
-export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardXAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
-export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardYAxisIndex, selectorChartsLastInteraction], selectAxisHighlightWithValue);
+export const selectorChartsHighlightXAxisValue = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardXAxisIndex, selectorChartsLastInteraction, selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
+export const selectorChartsHighlightYAxisValue = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorChartsKeyboardYAxisIndex, selectorChartsLastInteraction, selectorBrushShouldPreventAxisHighlight], selectAxisHighlightWithValue);
 
 /**
  * Get the scale of the axis with highlight if controlled. The default axis otherwise.

package/esm/internals/plugins/utils/selectors.d.ts

@@ -1,6 +1,6 @@
 import { SelectorArray, Combiner, Selector, GetStateFromSelectors, GetParamsFromSelectors, CreateSelectorOptions } from 'reselect';
 import { ChartAnyPluginSignature, ChartState, ChartStateCacheKey } from "../models/index.js";
-export type ChartRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[TSignature]>, TSignature['state'][keyof TSignature['state']]>;
+export type ChartRootSelector<TSignature extends ChartAnyPluginSignature, T extends keyof TSignature['state'] = keyof TSignature['state']> = Selector<ChartState<[TSignature]>, TSignature['state'][T]>;
 export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;
 export type ChartsSelector<Signatures extends readonly ChartAnyPluginSignature[] = [], OptionalSignatures extends readonly ChartAnyPluginSignature[] = [], Result = unknown, Args extends readonly any[] = []> = Selector<ChartState<Signatures, OptionalSignatures>, Result, Args>;
 type InterruptRecursion = NonNullable<unknown>;

package/esm/locales/elGR.js

@@ -10,106 +10,104 @@ export const elGRLocaleText = {
   toolbarExport: 'Εξαγωγή',
   // Toolbar Export Menu
   toolbarExportPrint: 'Εκτύπωση',
-  toolbarExportImage: mimeType => `Εξαγωγή ως ${imageMimeTypes[mimeType] ?? mimeType}`
-
+  toolbarExportImage: mimeType => `Εξαγωγή ως ${imageMimeTypes[mimeType] ?? mimeType}`,
   // Charts renderer configuration
-  // chartTypeBar: 'Bar',
-  // chartTypeColumn: 'Column',
-  // chartTypeLine: 'Line',
-  // chartTypeArea: 'Area',
-  // chartTypePie: 'Pie',
-  // chartPaletteLabel: 'Color palette',
-  // chartPaletteNameRainbowSurge: 'Rainbow Surge',
-  // chartPaletteNameBlueberryTwilight: 'Blueberry Twilight',
-  // chartPaletteNameMangoFusion: 'Mango Fusion',
-  // chartPaletteNameCheerfulFiesta: 'Cheerful Fiesta',
-  // chartPaletteNameStrawberrySky: 'Strawberry Sky',
-  // chartPaletteNameBlue: 'Blue',
-  // chartPaletteNameGreen: 'Green',
-  // chartPaletteNamePurple: 'Purple',
-  // chartPaletteNameRed: 'Red',
-  // chartPaletteNameOrange: 'Orange',
-  // chartPaletteNameYellow: 'Yellow',
-  // chartPaletteNameCyan: 'Cyan',
-  // chartPaletteNamePink: 'Pink',
-  // chartConfigurationSectionChart: 'Chart',
-  // chartConfigurationSectionColumns: 'Columns',
-  // chartConfigurationSectionBars: 'Bars',
-  // chartConfigurationSectionAxes: 'Axes',
-  // chartConfigurationGrid: 'Grid',
-  // chartConfigurationBorderRadius: 'Border radius',
-  // chartConfigurationCategoryGapRatio: 'Category gap ratio',
-  // chartConfigurationBarGapRatio: 'Series gap ratio',
-  // chartConfigurationStacked: 'Stacked',
-  // chartConfigurationShowToolbar: 'Show toolbar',
-  // chartConfigurationSkipAnimation: 'Skip animation',
-  // chartConfigurationInnerRadius: 'Inner radius',
-  // chartConfigurationOuterRadius: 'Outer radius',
-  // chartConfigurationColors: 'Colors',
-  // chartConfigurationHideLegend: 'Hide legend',
-  // chartConfigurationShowMark: 'Show mark',
-  // chartConfigurationHeight: 'Height',
-  // chartConfigurationWidth: 'Width',
-  // chartConfigurationSeriesGap: 'Series gap',
-  // chartConfigurationTickPlacement: 'Tick placement',
-  // chartConfigurationTickLabelPlacement: 'Tick label placement',
-  // chartConfigurationCategoriesAxisLabel: 'Categories axis label',
-  // chartConfigurationSeriesAxisLabel: 'Series axis label',
-  // chartConfigurationXAxisPosition: 'X-axis position',
-  // chartConfigurationYAxisPosition: 'Y-axis position',
-  // chartConfigurationSeriesAxisReverse: 'Reverse series axis',
-  // chartConfigurationTooltipPlacement: 'Placement',
-  // chartConfigurationTooltipTrigger: 'Trigger',
-  // chartConfigurationLegendPosition: 'Position',
-  // chartConfigurationLegendDirection: 'Direction',
-  // chartConfigurationBarLabels: 'Bar labels',
-  // chartConfigurationColumnLabels: 'Column labels',
-  // chartConfigurationInterpolation: 'Interpolation',
-  // chartConfigurationSectionTooltip: 'Tooltip',
-  // chartConfigurationSectionLegend: 'Legend',
-  // chartConfigurationSectionLines: 'Lines',
-  // chartConfigurationSectionAreas: 'Areas',
-  // chartConfigurationSectionArcs: 'Arcs',
-  // chartConfigurationPaddingAngle: 'Padding angle',
-  // chartConfigurationCornerRadius: 'Corner radius',
-  // chartConfigurationArcLabels: 'Arc labels',
-  // chartConfigurationStartAngle: 'Start angle',
-  // chartConfigurationEndAngle: 'End angle',
-  // chartConfigurationPieTooltipTrigger: 'Trigger',
-  // chartConfigurationPieLegendPosition: 'Position',
-  // chartConfigurationPieLegendDirection: 'Direction',
-
+  chartTypeBar: 'Μπάρα',
+  chartTypeColumn: 'Στήλη',
+  chartTypeLine: 'Γραμμή',
+  chartTypeArea: 'Περιοχή',
+  chartTypePie: 'Πίτα',
+  chartPaletteLabel: 'Παλέτα χρωμάτων',
+  chartPaletteNameRainbowSurge: 'Έκρηξη Ουράνιου Τόξου',
+  chartPaletteNameBlueberryTwilight: 'Λυκόφως Μύρτιλου',
+  chartPaletteNameMangoFusion: 'Ένωση Μάνγκο',
+  chartPaletteNameCheerfulFiesta: 'Χαρούμενη Γιορτή',
+  chartPaletteNameStrawberrySky: 'Φραουλένιος Ουρανός',
+  chartPaletteNameBlue: 'Μπλέ',
+  chartPaletteNameGreen: 'Πράσινο',
+  chartPaletteNamePurple: 'Μώβ',
+  chartPaletteNameRed: 'Κόκκινο',
+  chartPaletteNameOrange: 'Πορτοκαλί',
+  chartPaletteNameYellow: 'Κίτρινο',
+  chartPaletteNameCyan: 'Κυανό',
+  chartPaletteNamePink: 'Ρόζ',
+  chartConfigurationSectionChart: 'Γράφημα',
+  chartConfigurationSectionColumns: 'Στήλες',
+  chartConfigurationSectionBars: 'Μπάρες',
+  chartConfigurationSectionAxes: 'Άξονες',
+  chartConfigurationGrid: 'Πλέγμα',
+  chartConfigurationBorderRadius: 'Ακτίνα περιγράμματος',
+  chartConfigurationCategoryGapRatio: 'Λόγος κενών κατηγορίας',
+  chartConfigurationBarGapRatio: 'Λόγος κενών Σειράς',
+  chartConfigurationStacked: 'Στοίβαγμα',
+  chartConfigurationShowToolbar: 'Εμφάνιση γραμμής εργαλείων',
+  chartConfigurationSkipAnimation: 'Παράξειψη Animation',
+  chartConfigurationInnerRadius: 'Εσωτερική ακτίνα',
+  chartConfigurationOuterRadius: 'Εξωτερική ακτίνα',
+  chartConfigurationColors: 'Χρώματα',
+  chartConfigurationHideLegend: 'Απόκρυψη Υπομνήματος',
+  chartConfigurationShowMark: 'Εμφάνιση Σημείωσης',
+  chartConfigurationHeight: 'Ύψος',
+  chartConfigurationWidth: 'Πλάτος',
+  chartConfigurationSeriesGap: 'Κενό Σειράς',
+  chartConfigurationTickPlacement: 'Τοποθέτηση Σημείων',
+  chartConfigurationTickLabelPlacement: 'Τοποθέτηση Ετικετών Σημείων',
+  chartConfigurationCategoriesAxisLabel: 'Ετικέτα άξονα κατηγοριών',
+  chartConfigurationSeriesAxisLabel: 'Ετικέτα άξονα σειρών',
+  chartConfigurationXAxisPosition: 'Θέση άξονα Χ',
+  chartConfigurationYAxisPosition: 'Θέση άξονα Υ',
+  chartConfigurationSeriesAxisReverse: 'Αντιστροφή άξονα σειρών',
+  chartConfigurationTooltipPlacement: 'Τοποθέτηση',
+  chartConfigurationTooltipTrigger: 'Τρόπος ενεργοποίησης του tooltip',
+  chartConfigurationLegendPosition: 'Θέση',
+  chartConfigurationLegendDirection: 'Κατεύθυνση',
+  chartConfigurationBarLabels: 'Ετικέτες μπαρών',
+  chartConfigurationColumnLabels: 'Ετικέτες στηλών',
+  chartConfigurationInterpolation: 'Διαμεσολάβηση',
+  chartConfigurationSectionTooltip: 'Tooltip',
+  chartConfigurationSectionLegend: 'Υπόμνημα',
+  chartConfigurationSectionLines: 'Γραμμές',
+  chartConfigurationSectionAreas: 'Περιοχές',
+  chartConfigurationSectionArcs: 'Τόξα',
+  chartConfigurationPaddingAngle: 'Γωνία περιθωρίου',
+  chartConfigurationCornerRadius: 'Ακτίνα γωνίας',
+  chartConfigurationArcLabels: 'Ετικέτες τόξων',
+  chartConfigurationStartAngle: 'Γωνία εκκίνησης',
+  chartConfigurationEndAngle: 'Γωνία λήξης',
+  chartConfigurationPieTooltipTrigger: 'Τρόπος ενεργοποίησης του tooltip',
+  chartConfigurationPieLegendPosition: 'Θέση',
+  chartConfigurationPieLegendDirection: 'Κατεύθυνση',
   // Common option labels
-  // chartConfigurationOptionNone: 'None',
-  // chartConfigurationOptionValue: 'Value',
-  // chartConfigurationOptionAuto: 'Auto',
-  // chartConfigurationOptionTop: 'Top',
-  // chartConfigurationOptionTopLeft: 'Top Left',
-  // chartConfigurationOptionTopRight: 'Top Right',
-  // chartConfigurationOptionBottom: 'Bottom',
-  // chartConfigurationOptionBottomLeft: 'Bottom Left',
-  // chartConfigurationOptionBottomRight: 'Bottom Right',
-  // chartConfigurationOptionLeft: 'Left',
-  // chartConfigurationOptionRight: 'Right',
-  // chartConfigurationOptionAxis: 'Axis',
-  // chartConfigurationOptionItem: 'Item',
-  // chartConfigurationOptionHorizontal: 'Horizontal',
-  // chartConfigurationOptionVertical: 'Vertical',
-  // chartConfigurationOptionBoth: 'Both',
-  // chartConfigurationOptionStart: 'Start',
-  // chartConfigurationOptionMiddle: 'Middle',
-  // chartConfigurationOptionEnd: 'End',
-  // chartConfigurationOptionExtremities: 'Extremities',
-  // chartConfigurationOptionTick: 'Tick',
-  // chartConfigurationOptionMonotoneX: 'Monotone X',
-  // chartConfigurationOptionMonotoneY: 'Monotone Y',
-  // chartConfigurationOptionCatmullRom: 'Catmull-Rom',
-  // chartConfigurationOptionLinear: 'Linear',
-  // chartConfigurationOptionNatural: 'Natural',
-  // chartConfigurationOptionStep: 'Step',
-  // chartConfigurationOptionStepBefore: 'Step Before',
-  // chartConfigurationOptionStepAfter: 'Step After',
-  // chartConfigurationOptionBumpX: 'Bump X',
-  // chartConfigurationOptionBumpY: 'Bump Y',
+  chartConfigurationOptionNone: 'Κανένα',
+  chartConfigurationOptionValue: 'Τιμή',
+  chartConfigurationOptionAuto: 'Αυτόματο',
+  chartConfigurationOptionTop: 'Πάνω',
+  chartConfigurationOptionTopLeft: 'Πάνω Αριστερά',
+  chartConfigurationOptionTopRight: 'Πάνω Δεξιά',
+  chartConfigurationOptionBottom: 'Κάτω',
+  chartConfigurationOptionBottomLeft: 'Κάτω Αριστερά',
+  chartConfigurationOptionBottomRight: 'Κάτω Δεξιά',
+  chartConfigurationOptionLeft: 'Αριστερά',
+  chartConfigurationOptionRight: 'Δεξιά',
+  chartConfigurationOptionAxis: 'Άξονας',
+  chartConfigurationOptionItem: 'Στοιχείο',
+  chartConfigurationOptionHorizontal: 'Οριζόντιο',
+  chartConfigurationOptionVertical: 'Κάθετο',
+  chartConfigurationOptionBoth: 'Και τα δύο',
+  chartConfigurationOptionStart: 'Αρχή',
+  chartConfigurationOptionMiddle: 'Κέντρο',
+  chartConfigurationOptionEnd: 'Τέλος',
+  chartConfigurationOptionExtremities: 'Ακρότατα',
+  chartConfigurationOptionTick: 'Σημείο',
+  chartConfigurationOptionMonotoneX: 'Μονοτονικό Χ',
+  chartConfigurationOptionMonotoneY: 'Μονοτονικό Υ',
+  chartConfigurationOptionCatmullRom: 'Catmull-Rom',
+  chartConfigurationOptionLinear: 'Γραμμικό',
+  chartConfigurationOptionNatural: 'Φυσικό',
+  chartConfigurationOptionStep: 'Βήμα',
+  chartConfigurationOptionStepBefore: 'Βήμα Πριν',
+  chartConfigurationOptionStepAfter: 'Βήμα Μετά',
+  chartConfigurationOptionBumpX: 'Κυρτότητα Χ',
+  chartConfigurationOptionBumpY: 'Κυρτότητα Υ'
 };
 export const elGR = getChartsLocalization(elGRLocaleText);

package/esm/tests/constants.js

@@ -0,0 +1 @@
+export const CHART_SELECTOR = 'svg:not([aria-hidden="true"])';

package/hooks/index.d.ts

@@ -17,4 +17,5 @@ export * from "./useLegend.js";
 export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
 export * from "./animation/index.js";
 export * from "./useChartRootRef.js";
-export * from "./useChartsLocalization.js";
+export * from "./useChartsLocalization.js";
+export * from "./useBrush.js";

package/hooks/index.js

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

package/hooks/useBrush.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+export declare function useBrush(): {
+  start: {
+    x: number;
+    y: number;
+  };
+  current: {
+    x: number;
+    y: number;
+  };
+} | null;

package/hooks/useBrush.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBrush = useBrush;
+var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+/**
+ * Get the current brush state.
+ *
+ * - `start` is the starting point of the brush selection.
+ * - `current` is the current point of the brush selection.
+ *
+ * @returns `{ start, current }` - The brush state.
+ */
+function useBrush() {
+  const store = (0, _useStore.useStore)();
+  return (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushState);
+}

package/index.d.ts

@@ -28,4 +28,5 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
-export * from "./ChartsWrapper/index.js";
+export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.14.1
+ * @mui/x-charts v8.15.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -367,4 +367,16 @@ Object.keys(_ChartsWrapper).forEach(function (key) {
       return _ChartsWrapper[key];
     }
   });
+});
+var _ChartsBrushOverlay = require("./ChartsBrushOverlay");
+Object.keys(_ChartsBrushOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsBrushOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsBrushOverlay[key];
+    }
+  });
 });

package/internals/domUtils.d.ts

@@ -1,10 +1,11 @@
-export declare const MEASUREMENT_SPAN_ID = "mui_measurement_span";
+import * as React from 'react';
+export declare function clearStringMeasurementCache(): void;
 /**
- *
+ * Converts a style object into a string to be used as a cache key
  * @param style React style object
  * @returns CSS styling string
  */
-export declare const getStyleString: (style: React.CSSProperties) => string;
+export declare function getStyleString(style: React.CSSProperties): string;
 /**
  *
  * @param text The string to estimate
@@ -14,4 +15,8 @@ export declare const getStyleString: (style: React.CSSProperties) => string;
 export declare const getStringSize: (text: string | number, style?: React.CSSProperties) => {
   width: number;
   height: number;
-};
+};
+export declare function batchMeasureStrings(texts: Iterable<string | number>, style?: React.CSSProperties): Map<string | number, {
+  width: number;
+  height: number;
+}>;

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";