@mui/x-charts 8.14.0 → 8.15.0

package/esm/Gauge/GaugeReferenceArc.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;
+export declare function GaugeReferenceArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'>): React.JSX.Element;

package/esm/Gauge/GaugeReferenceArc.js

@@ -1,10 +1,14 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
@@ -14,7 +18,11 @@ const StyledPath = styled('path', {
 }) => ({
   fill: (theme.vars || theme).palette.divider
 }));
-export function GaugeReferenceArc(props) {
+export function GaugeReferenceArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     startAngle,
     endAngle,
@@ -25,6 +33,7 @@ export function GaugeReferenceArc(props) {
     cy
   } = useGaugeState();
   return /*#__PURE__*/_jsx(StyledPath, _extends({
+    className: clsx(gaugeClasses.referenceArc, className),
     transform: `translate(${cx}, ${cy})`,
     d: d3Arc().cornerRadius(cornerRadius)({
       startAngle,
@@ -32,5 +41,5 @@ export function GaugeReferenceArc(props) {
       innerRadius,
       outerRadius
     })
-  }, props));
+  }, other));
 }

package/esm/Gauge/GaugeValueArc.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+declare function GaugeValueArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'> & {
   skipAnimation?: boolean;
 }): React.JSX.Element | null;
 declare namespace GaugeValueArc {

package/esm/Gauge/GaugeValueArc.js

@@ -1,24 +1,31 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"],
+  _excluded2 = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useAnimateGaugeValueArc } from "../hooks/animation/useAnimateGaugeValueArc.js";
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc'
+  slot: 'ValueArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-function GaugeValueArc(props) {
+function GaugeValueArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     value,
     valueMin,
@@ -35,7 +42,8 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, props, {
+  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, other, {
+    className: clsx(gaugeClasses.valueArc, className),
     cx: cx,
     cy: cy,
     startAngle: startAngle,
@@ -53,7 +61,7 @@ process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
   skipAnimation: PropTypes.bool
 } : void 0;
 export { GaugeValueArc };
-function AnimatedGaugeValueArc(_ref) {
+function AnimatedGaugeValueArc(_ref2) {
   let {
       cx,
       cy,
@@ -63,8 +71,8 @@ function AnimatedGaugeValueArc(_ref) {
       innerRadius,
       outerRadius,
       skipAnimation: inSkipAnimation
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _ref2,
+    other = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   const animatedProps = useAnimateGaugeValueArc({
     startAngle,

package/esm/Gauge/GaugeValueText.js

@@ -5,8 +5,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["text", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
 import { ChartsText } from "../ChartsText/index.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultFormatter({
   value
@@ -35,7 +37,7 @@ function GaugeValueText(props) {
     return null;
   }
   return /*#__PURE__*/_jsx("g", {
-    className: className,
+    className: clsx(gaugeClasses.valueText, className),
     children: /*#__PURE__*/_jsx(ChartsText, _extends({
       x: cx,
       y: cy,

package/esm/LineChart/LineChart.js

@@ -90,6 +90,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/LineChart/LineChart.plugins.d.ts

@@ -4,5 +4,6 @@ import { UseChartInteractionSignature } from "../internals/plugins/featurePlugin
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.plugins.js

@@ -3,4 +3,5 @@ import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useCh
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];

package/esm/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "brushConfig"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -39,7 +39,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -68,6 +69,7 @@ export const useLineChartProps = props => {
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
     skipAnimation,
+    brushConfig,
     plugins: LINE_CHART_PLUGINS
   });
   const gridProps = {

package/esm/ScatterChart/ScatterChart.js

@@ -80,6 +80,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -5,5 +5,6 @@ import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

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

package/esm/ScatterChart/seriesConfig/seriesProcessor.js

@@ -5,7 +5,7 @@ const seriesProcessor = ({
 }, dataset) => {
   const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
     const datasetKeys = seriesData?.datasetKeys;
-    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    const missingKeys = ['x', 'y'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
       throw new Error([`MUI X Charts: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
     }

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer", "brushConfig"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
@@ -35,7 +35,8 @@ export const useScatterChartProps = props => {
       highlightedItem,
       onHighlightChange,
       className,
-      renderer
+      renderer,
+      brushConfig
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
@@ -59,7 +60,8 @@ export const useScatterChartProps = props => {
     className,
     plugins: SCATTER_CHART_PLUGINS,
     slots,
-    slotProps
+    slotProps,
+    brushConfig
   });
   const chartsAxisProps = {
     slots,

package/esm/SparkLineChart/SparkLineChart.js

@@ -179,6 +179,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 0
    */
   baseline: PropTypes.oneOfType([PropTypes.oneOf(['max', 'min']), PropTypes.number]),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**

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

@@ -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/esm/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/esm/hooks/useBrush.js

@@ -0,0 +1,16 @@
+import { selectorBrushState } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+
+/**
+ * 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 function useBrush() {
+  const store = useStore();
+  return useSelector(store, selectorBrushState);
+}

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

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.14.0
+ * @mui/x-charts v8.15.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -35,6 +35,7 @@ export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";
+export * from "./ChartsBrushOverlay/index.js";
 
 // Locales should be imported from `@mui/x-charts/locales`
 // export * from './locales';

package/esm/internals/Flatbush.d.ts

@@ -0,0 +1,63 @@
+import FlatQueue from 'flatqueue';
+type TypedArrayConstructor = Int8ArrayConstructor | Uint8ArrayConstructor | Uint8ClampedArrayConstructor | Int16ArrayConstructor | Uint16ArrayConstructor | Int32ArrayConstructor | Uint32ArrayConstructor | Float32ArrayConstructor | Float64ArrayConstructor;
+export declare class Flatbush {
+  _queue: FlatQueue<number>;
+  _boxes: TypedArrayConstructor;
+  _indices: Uint16Array | Uint32Array;
+  data: ArrayBufferLike;
+  numItems: number;
+  nodeSize: number;
+  _levelBounds: number[];
+  byteOffset: number;
+  /**
+   * Recreate a Flatbush index from raw `ArrayBuffer` or `SharedArrayBuffer` data.
+   * @param {ArrayBufferLike} data
+   * @param {number} [byteOffset=0] byte offset to the start of the Flatbush buffer in the referenced ArrayBuffer.
+   * @returns {Flatbush} index
+   */
+  static from(data: any, byteOffset?: number): Flatbush;
+  /**
+   * Create a Flatbush index that will hold a given number of items.
+   * @param {number} numItems
+   * @param {number} [nodeSize=16] Size of the tree node (16 by default).
+   * @param {TypedArrayConstructor} [ArrayType=Float64Array] The array type used for coordinates storage (`Float64Array` by default).
+   * @param {ArrayBufferConstructor | SharedArrayBufferConstructor} [ArrayBufferType=ArrayBuffer] The array buffer type used to store data (`ArrayBuffer` by default).
+   * @param {ArrayBufferLike} [data] (Only used internally)
+   * @param {number} [byteOffset=0] (Only used internally)
+   */
+  constructor(numItems: number, nodeSize?: number, ArrayType?: TypedArrayConstructor, ArrayBufferType?: ArrayBufferConstructor | SharedArrayBufferConstructor, data?: ArrayBufferLike, byteOffset?: number);
+  /**
+   * Add a given rectangle to the index.
+   * @param {number} minX
+   * @param {number} minY
+   * @param {number} maxX
+   * @param {number} maxY
+   * @returns {number} A zero-based, incremental number that represents the newly added rectangle.
+   */
+  add(minX: any, minY: any, maxX?: any, maxY?: any): number;
+  /** Perform indexing of the added rectangles. */
+  finish(): void;
+  /**
+   * Search the index by a bounding box.
+   * @param {number} minX
+   * @param {number} minY
+   * @param {number} maxX
+   * @param {number} maxY
+   * @param {(index: number) => boolean} [filterFn] An optional function for filtering the results.
+   * @returns {number[]} An array containing the index, the x coordinate and the y coordinate of the points intersecting or touching the given bounding box.
+   */
+  search(minX: number, minY: number, maxX: number, maxY: number, filterFn?: (index: number) => boolean): number[];
+  /**
+   * Search items in order of distance from the given point.
+   * @param x
+   * @param y
+   * @param [maxResults=Infinity]
+   * @param maxDistSq
+   * @param [filterFn] An optional function for filtering the results.
+   * @param [sqDistFn] An optional function to calculate squared distance from the point to the item.
+   * @returns {number[]} An array of indices of items found.
+   */
+  neighbors(x: any, y: any, maxResults?: number, maxDistSq?: number, filterFn?: (index: number) => boolean, sqDistFn?: typeof sqDist): number[];
+}
+declare function sqDist(dx: number, dy: number): number;
+export {};