@mui/x-charts 8.5.3 → 8.7.0

package/ScatterChart/Scatter.js

@@ -12,15 +12,15 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 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 _useScatterPlotData = require("./useScatterPlotData");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -55,37 +55,7 @@ function Scatter(props) {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const cleanData = React.useMemo(() => {
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-    const temp = [];
-    for (let i = 0; i < series.data.length; i += 1) {
-      const scatterPoint = series.data[i];
-      const x = getXPosition(scatterPoint.x);
-      const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside(x, y);
-      if (isInRange) {
-        const currentItem = {
-          seriesId: series.id,
-          dataIndex: i
-        };
-        const isItemHighlighted = isHighlighted(currentItem);
-        temp.push({
-          x,
-          y,
-          isHighlighted: isItemHighlighted,
-          isFaded: !isItemHighlighted && isFaded(currentItem),
-          id: scatterPoint.id,
-          seriesId: series.id,
-          type: 'scatter',
-          dataIndex: i,
-          color: colorGetter ? colorGetter(i) : color
-        });
-      }
-    }
-    return temp;
-  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, colorGetter, color, instance]);
-  const interactionItemProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(cleanData, skipInteractionHandlers);
+  const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Marker,
@@ -101,21 +71,25 @@ function Scatter(props) {
   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,
-      isHighlighted: dataPoint.isHighlighted,
-      isFaded: dataPoint.isFaded,
-      x: dataPoint.x,
-      y: dataPoint.y,
-      onClick: onItemClick && (event => onItemClick(event, {
-        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))
+    children: scatterPlotData.map((dataPoint, i) => {
+      const isItemHighlighted = isHighlighted(dataPoint);
+      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        isHighlighted: isItemHighlighted,
+        isFaded: isItemFaded,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'scatter',
+          seriesId: series.id,
+          dataIndex: dataPoint.dataIndex
+        })),
+        "data-highlighted": isItemHighlighted || undefined,
+        "data-faded": isItemFaded || undefined
+      }, skipInteractionHandlers ? undefined : (0, _useInteractionItemProps.getInteractionItemProps)(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

package/ScatterChart/useScatterPlotData.d.ts

@@ -0,0 +1,8 @@
+import { SeriesId } from "../models/seriesType/common.js";
+import { D3Scale } from "../models/axis.js";
+import { DefaultizedScatterSeriesType, ScatterValueType } from "../models/index.js";
+export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
+  dataIndex: number;
+  seriesId: SeriesId;
+  type: "scatter";
+})[];

package/ScatterChart/useScatterPlotData.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScatterPlotData = useScatterPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../hooks");
+function useScatterPlotData(series, xScale, yScale, isPointInside) {
+  return React.useMemo(() => {
+    const getXPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _hooks.getValueToPositionMapper)(yScale);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = isPointInside(x, y);
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          id: scatterPoint.id,
+          seriesId: series.id,
+          type: 'scatter',
+          dataIndex: i
+        });
+      }
+    }
+    return temp;
+  }, [xScale, yScale, series.data, series.id, isPointInside]);
+}

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/context/ChartApi.d.ts

@@ -0,0 +1,22 @@
+import type { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import type { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
+import type { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { ChartPublicAPI } from "../internals/plugins/models/index.js";
+export type PluginsPerSeriesType = {
+  line: LineChartPluginsSignatures;
+  scatter: ScatterChartPluginsSignatures;
+  bar: BarChartPluginsSignatures;
+  pie: PieChartPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;

package/context/ChartApi.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/context/ChartProvider/ChartContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/context/index.d.ts

@@ -1,2 +1,3 @@
 export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./useChartApiContext.js";
+export * from "./useChartApiContext.js";
+export type { ChartApi } from "./ChartApi.js";

package/context/useChartApiContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartApi } from "../ChartContainer/index.js";
+import { ChartApi } from "./ChartApi.js";
 /**
  * The `useChartApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

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

@@ -8,155 +8,14 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { barElementClasses } from "./barElementClasses.js";
 import { BarElement } from "./BarElement.js";
-import getColor from "./seriesConfig/getColor.js";
-import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
+import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
-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";
-
-/**
- * Solution of the equations
- * W = barWidth * N + offset * (N-1)
- * offset / (offset + barWidth) = r
- * @param bandWidth The width available to place bars.
- * @param numberOfGroups The number of bars to place in that space.
- * @param gapRatio The ratio of the gap between bars over the bar width.
- * @returns The bar width and the offset between bars.
- */
+import { useBarPlotData } from "./useBarPlotData.js";
+import { useUtilityClasses } from "./barClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getBandSize({
-  bandWidth: W,
-  numberOfGroups: N,
-  gapRatio: r
-}) {
-  if (r === 0) {
-    return {
-      barWidth: W / N,
-      offset: 0
-    };
-  }
-  const barWidth = W / (N + (N - 1) * r);
-  const offset = r * barWidth;
-  return {
-    barWidth,
-    offset
-  };
-}
-const useAggregatedData = () => {
-  const seriesData = useBarSeriesContext() ?? {
-    series: {},
-    stackingGroups: [],
-    seriesOrder: []
-  };
-  const drawingArea = useDrawingArea();
-  const chartId = useChartId();
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const masks = {};
-  const data = stackingGroups.flatMap(({
-    ids: groupIds
-  }, 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 => {
-      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisId];
-      const yAxisConfig = yAxis[yAxisId];
-      const verticalLayout = series[seriesId].layout === 'vertical';
-      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
-      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-      const xScale = xAxisConfig.scale;
-      const yScale = yAxisConfig.scale;
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-      const bandWidth = baseScaleConfig.scale.bandwidth();
-      const {
-        barWidth,
-        offset
-      } = getBandSize({
-        bandWidth,
-        numberOfGroups: stackingGroups.length,
-        gapRatio: baseScaleConfig.barGapRatio
-      });
-      const barOffset = groupIndex * (barWidth + offset);
-      const {
-        stackedData,
-        data: currentSeriesData,
-        layout
-      } = series[seriesId];
-      return baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
-        }
-        const values = stackedData[dataIndex];
-        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-        const minValueCoord = Math.round(Math.min(...valueCoordinates));
-        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        const stackId = series[seriesId].stack;
-        const result = {
-          seriesId,
-          dataIndex,
-          layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color: colorGetter(dataIndex),
-          value: currentSeriesData[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        };
-        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
-        }
-        if (!masks[result.maskId]) {
-          masks[result.maskId] = {
-            id: result.maskId,
-            width: 0,
-            height: 0,
-            hasNegative: false,
-            hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
-            x: 0,
-            y: 0
-          };
-        }
-        const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
-        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
-        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
-    });
-  });
-  return {
-    completedData: data,
-    masksData: Object.values(masks)
-  };
-};
 const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -178,10 +37,6 @@ const BarPlotRoot = styled('g', {
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const {
-    completedData,
-    masksData
-  } = useAggregatedData();
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
@@ -191,8 +46,20 @@ function BarPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const {
+    completedData,
+    masksData
+  } = useBarPlotData(useDrawingArea(), xAxes, yAxes);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const classes = useUtilityClasses();
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
+    className: classes.root,
     children: [!withoutBorderRadius && masksData.map(({
       id,
       x,
@@ -217,45 +84,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/BarChart/useBarPlotData.d.ts

@@ -0,0 +1,8 @@
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/index.js";
+import { MaskData, ProcessedBarSeriesData } from "./types.js";
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+};