@mui/x-charts 8.5.2 → 8.6.0

package/ScatterChart/Scatter.d.ts

@@ -3,6 +3,7 @@ import { ScatterMarkerSlotProps, ScatterMarkerSlots } from "./ScatterMarker.type
 import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { D3Scale } from "../models/axis.js";
 import { ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
@@ -15,6 +16,7 @@ export interface ScatterProps {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }

package/ScatterChart/Scatter.js

@@ -20,6 +20,7 @@ var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
 var _useChartVoronoi = require("../internals/plugins/featurePlugins/useChartVoronoi");
 var _ChartProvider = require("../context/ChartProvider");
 var _ScatterMarker = require("./ScatterMarker");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -40,6 +41,7 @@ function Scatter(props) {
     color,
     colorGetter,
     onItemClick,
+    classes: inClasses,
     slots,
     slotProps
   } = props;
@@ -95,7 +97,10 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    "data-series": series.id,
+    className: classes.root,
     children: cleanData.map((dataPoint, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
       dataIndex: dataPoint.dataIndex,
       color: dataPoint.color,
@@ -107,7 +112,9 @@ function Scatter(props) {
         type: 'scatter',
         seriesId: series.id,
         dataIndex: dataPoint.dataIndex
-      }))
+      })),
+      "data-highlighted": dataPoint.isHighlighted || undefined,
+      "data-faded": dataPoint.isFaded || undefined
     }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
   });
 }
@@ -116,6 +123,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
   colorGetter: _propTypes.default.func,
   /**

package/ScatterChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./ScatterChart.js";
 export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
-export * from "./ScatterMarker.js";
+export * from "./ScatterMarker.js";
+export type { ScatterClasses } from "./scatterClasses.js";
+export { scatterClasses } from "./scatterClasses.js";

package/ScatterChart/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  scatterClasses: true
+};
+Object.defineProperty(exports, "scatterClasses", {
+  enumerable: true,
+  get: function () {
+    return _scatterClasses.scatterClasses;
+  }
+});
 var _ScatterChart = require("./ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_ScatterChart).forEach(function (key) {
 var _ScatterPlot = require("./ScatterPlot");
 Object.keys(_ScatterPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_ScatterPlot).forEach(function (key) {
 var _Scatter = require("./Scatter");
 Object.keys(_Scatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Scatter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_Scatter).forEach(function (key) {
 var _ScatterMarker = require("./ScatterMarker.types");
 Object.keys(_ScatterMarker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterMarker[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_ScatterMarker).forEach(function (key) {
 var _ScatterMarker2 = require("./ScatterMarker");
 Object.keys(_ScatterMarker2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterMarker2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -57,4 +71,5 @@ Object.keys(_ScatterMarker2).forEach(function (key) {
       return _ScatterMarker2[key];
     }
   });
-});
+});
+var _scatterClasses = require("./scatterClasses");

package/ScatterChart/scatterClasses.d.ts

@@ -0,0 +1,8 @@
+export interface ScatterClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ScatterClassKey = keyof ScatterClasses;
+export declare function getScatterUtilityClass(slot: string): string;
+export declare const scatterClasses: ScatterClasses;
+export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;

package/ScatterChart/scatterClasses.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScatterUtilityClass = getScatterUtilityClass;
+exports.useUtilityClasses = exports.scatterClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getScatterUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiScatter', slot);
+}
+const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatter', ['root']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getScatterUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/Toolbar/ToolbarButton.js

@@ -51,10 +51,12 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------------------------------------------------
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
   /**
    * A function to customize the rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
   style: _propTypes.default.object,
   tabIndex: _propTypes.default.number
 } : void 0;

package/esm/BarChart/AnimatedBarElement.js

@@ -14,6 +14,8 @@ export function AnimatedBarElement(props) {
   const animatedProps = useAnimateBar(props);
   return /*#__PURE__*/_jsx("rect", _extends({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, animatedProps));
 }

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { CompletedBarData } from "../types.js";
+import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: CompletedBarData[];
+  bars: ProcessedBarSeriesData[];
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
 import { BarLabelItem } from "./BarLabelItem.js";
+import { useUtilityClasses } from "../barClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -13,33 +14,40 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: bars.map(({
-      xOrigin,
-      yOrigin,
-      x,
-      y,
+    children: bars.flatMap(({
       seriesId,
-      dataIndex,
-      color,
-      value,
-      width,
-      height,
-      layout
-    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
-      seriesId: seriesId,
-      dataIndex: dataIndex,
-      value: value,
-      color: color,
-      xOrigin: xOrigin,
-      yOrigin: yOrigin,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      skipAnimation: skipAnimation ?? false,
-      layout: layout ?? 'vertical'
-    }, other), `${seriesId}-${dataIndex}`))
+      data
+    }) => /*#__PURE__*/_jsx("g", {
+      className: classes.seriesLabels,
+      "data-series": seriesId,
+      children: data.map(({
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        dataIndex,
+        color,
+        value,
+        width,
+        height,
+        layout
+      }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+        seriesId: seriesId,
+        dataIndex: dataIndex,
+        value: value,
+        color: color,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false,
+        layout: layout ?? 'vertical'
+      }, other), dataIndex))
+    }, seriesId))
   });
 }
 export { BarLabelPlot };

package/esm/BarChart/BarPlot.js

@@ -16,6 +16,7 @@ import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useUtilityClasses } from "./barClasses.js";
 
 /**
  * Solution of the equations
@@ -69,13 +70,13 @@ const useAggregatedData = () => {
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
   const data = stackingGroups.flatMap(({
-    ids: groupIds
+    ids: seriesIds
   }, groupIndex) => {
     const xMin = drawingArea.left;
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
-    return groupIds.flatMap(seriesId => {
+    return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
@@ -101,7 +102,7 @@ const useAggregatedData = () => {
         data: currentSeriesData,
         layout
       } = series[seriesId];
-      return baseScaleConfig.data.map((baseValue, dataIndex) => {
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
           return null;
         }
@@ -150,6 +151,10 @@ const useAggregatedData = () => {
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
       }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
     });
   });
   return {
@@ -192,7 +197,9 @@ function BarPlot(props) {
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const classes = useUtilityClasses();
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
+    className: classes.root,
     children: [!withoutBorderRadius && masksData.map(({
       id,
       x,
@@ -217,45 +224,53 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
-      dataIndex,
-      color,
-      maskId,
-      layout,
-      x,
-      xOrigin,
-      y,
-      yOrigin,
-      width,
-      height
+      data
     }) => {
-      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
-        id: seriesId,
-        dataIndex: dataIndex,
-        color: color,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical',
-        x: x,
-        xOrigin: xOrigin,
-        y: y,
-        yOrigin: yOrigin,
-        width: width,
-        height: height
-      }, other, {
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'bar',
-            seriesId,
-            dataIndex
-          });
-        })
-      }), `${seriesId}-${dataIndex}`);
-      if (withoutBorderRadius) {
-        return barElement;
-      }
       return /*#__PURE__*/_jsx("g", {
-        clipPath: `url(#${maskId})`,
-        children: barElement
-      }, `${seriesId}-${dataIndex}`);
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          layout,
+          x,
+          xOrigin,
+          y,
+          yOrigin,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/_jsx("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
     }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       bars: completedData,
       skipAnimation: skipAnimation,

package/esm/BarChart/barClasses.d.ts

@@ -0,0 +1,12 @@
+export interface BarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+}
+export type BarClassKey = keyof BarClasses;
+export declare function getBarUtilityClass(slot: string): string;
+export declare const barClasses: BarClasses;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/esm/BarChart/barClasses.js

@@ -0,0 +1,15 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getBarUtilityClass(slot) {
+  return generateUtilityClass('MuiBar', slot);
+}
+export const barClasses = generateUtilityClasses('MuiBar', ['root', 'series', 'seriesLabels']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return composeClasses(slots, getBarUtilityClass, classes);
+};

package/esm/BarChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";
+export type { BarClassKey, BarClasses } from "./barClasses.js";

package/esm/BarChart/index.js

@@ -2,4 +2,5 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";

package/esm/BarChart/types.d.ts

@@ -9,7 +9,11 @@ export type AnimationData = {
   xOrigin: number;
   layout: BarSeriesType['layout'];
 };
-export interface CompletedBarData extends AnimationData {
+export interface ProcessedBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedBarData[];
+}
+export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

package/esm/ChartsLegend/ChartsLegend.d.ts

@@ -22,6 +22,7 @@ export interface ChartsLegendProps {
   classes?: Partial<ChartsLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };

package/esm/ChartsLegend/ChartsLegend.js

@@ -80,6 +80,8 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     ownerState: props,
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
+        className: classes?.item,
+        "data-series": item.id,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,

package/esm/ChartsLegend/ContinuousColorLegend.d.ts

@@ -51,6 +51,7 @@ export interface ContinuousColorLegendProps extends ColorLegendSelector, AppendK
   classes?: Partial<ContinuousColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ContinuousColorLegend };

package/esm/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -37,6 +37,7 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependK
   classes?: Partial<PiecewiseColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { PiecewiseColorLegend };

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -3,6 +3,8 @@ import type { ChartsLegendSlotExtension } from "./chartsLegend.types.js";
 export interface ChartsLegendClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
   /** Styles applied to a series element. */
   series: string;
   /** Styles applied to series mark element. */
@@ -14,5 +16,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "series", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/chartsLegendClasses.js

@@ -11,10 +11,11 @@ export const useUtilityClasses = props => {
   } = props;
   const slots = {
     root: ['root', direction],
+    item: ['item'],
     mark: ['mark'],
     label: ['label'],
     series: ['series']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'item', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/esm/ChartsSurface/ChartsSurface.d.ts

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps {
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
   title?: string;
   desc?: string;