@mui/x-charts 8.23.0 → 8.24.0

package/esm/BarChart/BarChart.js

@@ -134,6 +134,31 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['bar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -192,6 +217,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -212,6 +242,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.

package/esm/BarChart/BarChart.plugins.d.ts

@@ -6,5 +6,6 @@ import { type UseChartHighlightSignature } from "../internals/plugins/featurePlu
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type BarChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'bar'>, UseChartKeyboardNavigationSignature];
 export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginSignatures>;

package/esm/BarChart/BarChart.plugins.js

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

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

@@ -32,6 +32,8 @@ export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' |
    * @default 'center'
    */
   placement?: 'center' | 'outside';
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
 };
 declare function BarLabel(inProps: BarLabelProps): React.JSX.Element;
 declare namespace BarLabel {

package/esm/BarChart/BarLabel/BarLabel.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement", "hidden"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -34,7 +34,8 @@ function BarLabel(inProps) {
     name: 'MuiBarLabel'
   });
   const {
-      isFaded
+      isFaded,
+      hidden
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const animatedProps = useAnimateBarLabel(props);
@@ -44,7 +45,7 @@ function BarLabel(inProps) {
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({
     textAnchor: textAnchor,
     dominantBaseline: dominantBaseline,
-    opacity: fadedOpacity
+    opacity: hidden ? 0 : fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({
@@ -86,6 +87,10 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * Height of the bar this label belongs to.
    */
   height: PropTypes.number.isRequired,
+  /**
+   * If true, the bar label is hidden.
+   */
+  hidden: PropTypes.bool,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,

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

@@ -74,6 +74,8 @@ export type BarLabelItemProps<V extends BarValueType | null> = Omit<BarLabelOwne
    * @default 'center'
    */
   barLabelPlacement?: BarLabelProps['placement'];
+  /** If true, the bar label is hidden. */
+  hidden?: boolean;
 };
 /**
  * @ignore - internal component.

package/esm/BarChart/BarLabel/BarLabelItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement", "hidden"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -31,7 +31,8 @@ function BarLabelItem(props) {
       value,
       skipAnimation,
       layout,
-      barLabelPlacement
+      barLabelPlacement,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -87,6 +88,7 @@ function BarLabelItem(props) {
     return null;
   }
   return /*#__PURE__*/_jsx(Component, _extends({}, barLabelProps, barLabelOwnerState, {
+    hidden: hidden,
     children: formattedLabelText
   }));
 }

package/esm/BarChart/BarPlot.d.ts

@@ -3,6 +3,7 @@ import { type BarElementSlotProps, type BarElementSlots } from "./BarElement.js"
 import { type BarItemIdentifier } from "../models/index.js";
 import { type BarLabelSlotProps, type BarLabelSlots } from "./BarLabel/BarLabelItem.js";
 import type { BarItem, BarLabelContext } from "./BarLabel/index.js";
+import { type RendererType } from "../ScatterChart/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
 export interface BarPlotProps {
@@ -16,7 +17,7 @@ export interface BarPlotProps {
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier): void;
   /**
    * Defines the border radius of the bar element.
    */
@@ -30,6 +31,15 @@ export interface BarPlotProps {
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
   /**
    * The props used for each component slot.
    * @default {}
@@ -52,7 +62,7 @@ export interface BarPlotProps {
  *
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
-declare function BarPlot(props: BarPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function BarPlot(props: BarPlotProps): React.JSX.Element;
 declare namespace BarPlot {
   var propTypes: any;
 }

package/esm/BarChart/BarPlot.js

@@ -2,20 +2,20 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { barElementClasses } from "./barElementClasses.js";
-import { BarElement } from "./BarElement.js";
 import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
-import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { useBarPlotData } from "./useBarPlotData.js";
 import { useUtilityClasses } from "./barClasses.js";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
+import { IndividualBarPlot } from "./IndividualBarPlot.js";
+import { BatchBarPlot } from "./BatchBarPlot/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
@@ -44,11 +44,13 @@ function BarPlot(props) {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel
+      barLabel,
+      renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const batchSkipAnimation = useSkipAnimation(inSkipAnimation);
   const {
     xAxis: xAxes
   } = useXAxes();
@@ -59,86 +61,22 @@ function BarPlot(props) {
     completedData,
     masksData
   } = useBarPlotData(useDrawingArea(), xAxes, yAxes);
-  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const classes = useUtilityClasses();
+  const BarElementPlot = renderer === 'svg-batch' ? BatchBarPlot : IndividualBarPlot;
   return /*#__PURE__*/_jsxs(BarPlotRoot, {
     className: classes.root,
-    children: [!withoutBorderRadius && masksData.map(({
-      id,
-      x,
-      y,
-      xOrigin,
-      yOrigin,
-      width,
-      height,
-      hasPositive,
-      hasNegative,
-      layout
-    }) => {
-      return /*#__PURE__*/_jsx(BarClipPath, {
-        maskId: id,
-        borderRadius: borderRadius,
-        hasNegative: hasNegative,
-        hasPositive: hasPositive,
-        layout: layout,
-        x: x,
-        y: y,
-        xOrigin: xOrigin,
-        yOrigin: yOrigin,
-        width: width,
-        height: height,
-        skipAnimation: skipAnimation ?? false
-      }, id);
-    }), completedData.map(({
-      seriesId,
-      layout,
-      xOrigin,
-      yOrigin,
-      data
-    }) => {
-      return /*#__PURE__*/_jsx("g", {
-        "data-series": seriesId,
-        className: classes.series,
-        children: data.map(({
-          dataIndex,
-          color,
-          maskId,
-          x,
-          y,
-          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);
-    }), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+    children: [/*#__PURE__*/_jsx(BarElementPlot, _extends({
+      completedData: completedData,
+      masksData: masksData
+      /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
+       * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
+      skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
+      onItemClick:
+      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
+       * so we need this cast to prevent TypeScript from complaining. */
+      onItemClick,
+      borderRadius: borderRadius
+    }, other)), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
       skipAnimation: skipAnimation,
@@ -152,6 +90,7 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
+   * @deprecated Use `barLabel` in the chart series instead.
    * If provided, the function will be used to format the label of the bar.
    * It can be set to 'value' to display the current value.
    * @param {BarItem} item The item to format.
@@ -159,11 +98,6 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  /**
-   * The placement of the bar label.
-   * It controls whether the label is rendered inside or outside the bar.
-   */
-  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */
@@ -174,6 +108,15 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * If `true`, animations are skipped.
    * @default undefined

package/esm/BarChart/BatchBarPlot/BarGroup.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface BarGroupProps extends React.HTMLAttributes<SVGGElement> {
+  skipAnimation: boolean;
+  layout: 'horizontal' | 'vertical' | undefined;
+  xOrigin: number;
+  yOrigin: number;
+}
+export declare function BarGroup({
+  skipAnimation,
+  layout,
+  xOrigin,
+  yOrigin,
+  ...props
+}: BarGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/BarChart/BatchBarPlot/BarGroup.js

@@ -0,0 +1,134 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skipAnimation", "layout", "xOrigin", "yOrigin"],
+  _excluded2 = ["children", "layout", "xOrigin", "yOrigin"];
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import { useStore } from "../../internals/store/useStore.js";
+import { selectorChartDrawingArea } from "../../internals/plugins/corePlugins/useChartDimensions/index.js";
+import { ANIMATION_DURATION_MS } from "../../internals/animation/animation.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PathGroup = styled('g')({
+  '&[data-faded="true"]': {
+    opacity: 0.3
+  },
+  '& path': {
+    /* The browser must do hit testing to know which element a pointer is interacting with.
+     * With many data points, we create many paths causing significant time to be spent in the hit test phase.
+     * To fix this issue, we disable pointer events for the descendant paths.
+     *
+     * Ideally, users should be able to override this in case they need pointer events to be enabled,
+     * but it can affect performance negatively, especially with many data points. */
+    pointerEvents: 'none'
+  }
+});
+export function BarGroup(_ref) {
+  let {
+      skipAnimation,
+      layout,
+      xOrigin,
+      yOrigin
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (skipAnimation) {
+    return /*#__PURE__*/_jsx(PathGroup, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(AnimatedGroup, _extends({}, props, {
+    layout: layout,
+    xOrigin: xOrigin,
+    yOrigin: yOrigin
+  }));
+}
+const AnimatedRect = styled('rect')({
+  '@keyframes scaleInX': {
+    from: {
+      transform: 'scaleX(0)'
+    },
+    to: {
+      transform: 'scaleX(1)'
+    }
+  },
+  '@keyframes scaleInY': {
+    from: {
+      transform: 'scaleY(0)'
+    },
+    to: {
+      transform: 'scaleY(1)'
+    }
+  },
+  animationDuration: `${ANIMATION_DURATION_MS}ms`,
+  animationFillMode: 'forwards',
+  '&[data-orientation="horizontal"]': {
+    animationName: 'scaleInX'
+  },
+  '&[data-orientation="vertical"]': {
+    animationName: 'scaleInY'
+  }
+});
+function AnimatedGroup(_ref2) {
+  let {
+      children,
+      layout,
+      xOrigin,
+      yOrigin
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const store = useStore();
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const clipPathId = useId();
+  const animateChildren = [];
+  if (layout === 'horizontal') {
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "horizontal",
+      x: drawingArea.left,
+      width: xOrigin - drawingArea.left,
+      y: drawingArea.top,
+      height: drawingArea.height,
+      style: {
+        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
+      }
+    }, "left"));
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "horizontal",
+      x: xOrigin,
+      width: drawingArea.left + drawingArea.width - xOrigin,
+      y: drawingArea.top,
+      height: drawingArea.height,
+      style: {
+        transformOrigin: `${xOrigin}px ${drawingArea.top + drawingArea.height / 2}px`
+      }
+    }, "right"));
+  } else {
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "vertical",
+      x: drawingArea.left,
+      width: drawingArea.width,
+      y: drawingArea.top,
+      height: yOrigin - drawingArea.top,
+      style: {
+        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
+      }
+    }, "top"));
+    animateChildren.push(/*#__PURE__*/_jsx(AnimatedRect, {
+      "data-orientation": "vertical",
+      x: drawingArea.left,
+      width: drawingArea.width,
+      y: yOrigin,
+      height: drawingArea.top + drawingArea.height - yOrigin,
+      style: {
+        transformOrigin: `${drawingArea.left + drawingArea.width / 2}px ${yOrigin}px`
+      }
+    }, "bottom"));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipPathId,
+      children: animateChildren
+    }), /*#__PURE__*/_jsx(PathGroup, _extends({
+      clipPath: `url(#${clipPathId})`
+    }, props, {
+      children: children
+    }))]
+  });
+}

package/esm/BarChart/BatchBarPlot/BatchBarPlot.d.ts

@@ -0,0 +1,12 @@
+import type { BarItemIdentifier } from "../../models/index.js";
+import { type IndividualBarPlotProps } from "../IndividualBarPlot.js";
+interface BatchBarPlotProps extends Omit<IndividualBarPlotProps, 'onItemClick'> {
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
+}
+export declare function BatchBarPlot({
+  completedData,
+  borderRadius,
+  onItemClick,
+  skipAnimation
+}: BatchBarPlotProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/BarChart/BatchBarPlot/BatchBarPlot.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useSvgRef } from "../../hooks/index.js";
+import { useUtilityClasses } from "../barClasses.js";
+import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
+import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesHighlightedItem, selectorChartSeriesUnfadedItem } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { useRegisterItemClickHandlers } from "../useRegisterItemClickHandlers.js";
+import { createPath, useCreateBarPaths } from "./useCreateBarPaths.js";
+import { BarGroup } from "./BarGroup.js";
+import { useRegisterPointerInteractions } from "../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js";
+import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BatchBarPlot({
+  completedData,
+  borderRadius = 0,
+  onItemClick,
+  skipAnimation = false
+}) {
+  const prevCursorRef = React.useRef(null);
+  const svgRef = useSvgRef();
+  const onItemEnter = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current == null) {
+      prevCursorRef.current = svg.style.cursor;
+      // eslint-disable-next-line react-compiler/react-compiler
+      svg.style.cursor = 'pointer';
+    }
+  } : undefined;
+  const onItemLeave = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current != null) {
+      svg.style.cursor = prevCursorRef.current;
+      prevCursorRef.current = null;
+    }
+  } : undefined;
+  useRegisterPointerInteractions(selectorBarItemAtPosition, onItemEnter, onItemLeave);
+  useRegisterItemClickHandlers(onItemClick);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: completedData.map(series => /*#__PURE__*/_jsx(SeriesBatchPlot, {
+      series: series,
+      borderRadius: borderRadius,
+      skipAnimation: skipAnimation
+    }, series.seriesId))
+  });
+}
+const MemoFadedHighlightedBars = /*#__PURE__*/React.memo(FadedHighlightedBars);
+if (process.env.NODE_ENV !== "production") MemoFadedHighlightedBars.displayName = "MemoFadedHighlightedBars";
+function SeriesBatchPlot({
+  series,
+  borderRadius,
+  skipAnimation
+}) {
+  const classes = useUtilityClasses();
+  const {
+    store
+  } = useChartContext();
+  const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.seriesId);
+  const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.seriesId);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(BarGroup, {
+      className: classes.series,
+      "data-series": series.seriesId,
+      layout: series.layout,
+      xOrigin: series.xOrigin,
+      yOrigin: series.yOrigin,
+      skipAnimation: skipAnimation,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/_jsx(BatchBarSeriesPlot, {
+        processedSeries: series,
+        borderRadius: borderRadius
+      })
+    }), /*#__PURE__*/_jsx(MemoFadedHighlightedBars, {
+      processedSeries: series,
+      borderRadius: borderRadius
+    })]
+  });
+}
+function BatchBarSeriesPlot({
+  processedSeries,
+  borderRadius
+}) {
+  const paths = useCreateBarPaths(processedSeries, borderRadius);
+  const children = [];
+  let i = 0;
+  for (const [fill, dArray] of paths.entries()) {
+    for (const d of dArray) {
+      children.push(/*#__PURE__*/_jsx("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: children
+  });
+}
+function FadedHighlightedBars({
+  processedSeries,
+  borderRadius
+}) {
+  const {
+    store
+  } = useChartContext();
+  const seriesHighlightedDataIndex = store.use(selectorChartSeriesHighlightedItem, processedSeries.seriesId);
+  const seriesUnfadedDataIndex = store.use(selectorChartSeriesUnfadedItem, processedSeries.seriesId);
+  const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;
+  const seriesUnfadedItem = seriesUnfadedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesUnfadedDataIndex) || null : null;
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: seriesHighlightedItem.color,
+      filter: "brightness(120%)",
+      "data-highlighted": true,
+      d: createPath(seriesHighlightedItem, borderRadius)
+    }, `highlighted-${processedSeries.seriesId}`));
+  }
+  if (seriesUnfadedItem != null) {
+    siblings.push(/*#__PURE__*/_jsx("path", {
+      fill: seriesUnfadedItem.color,
+      d: createPath(seriesUnfadedItem, borderRadius)
+    }, `unfaded-${seriesUnfadedItem.seriesId}`));
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: siblings
+  });
+}