@mui/x-charts 8.23.0 → 8.24.0

package/BarChart/BarChart.js

@@ -141,6 +141,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.default.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.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -199,6 +224,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.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -219,6 +249,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.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.default.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.

package/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/BarChart/BarChart.plugins.js

@@ -11,4 +11,5 @@ var _useChartInteraction = require("../internals/plugins/featurePlugins/useChart
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const BAR_CHART_PLUGINS = exports.BAR_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/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/BarChart/BarLabel/BarLabel.js

@@ -17,7 +17,7 @@ var _useAnimateBarLabel = require("../../hooks/animation/useAnimateBarLabel");
 var _barLabelClasses = require("./barLabelClasses");
 var _animation = require("../../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text', {
   name: 'MuiBarLabel',
   slot: 'Root',
@@ -42,7 +42,8 @@ function BarLabel(inProps) {
     name: 'MuiBarLabel'
   });
   const {
-      isFaded
+      isFaded,
+      hidden
     } = props,
     otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const animatedProps = (0, _useAnimateBarLabel.useAnimateBarLabel)(props);
@@ -52,7 +53,7 @@ function BarLabel(inProps) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarLabelComponent, (0, _extends2.default)({
     textAnchor: textAnchor,
     dominantBaseline: dominantBaseline,
-    opacity: fadedOpacity
+    opacity: hidden ? 0 : fadedOpacity
   }, otherProps, animatedProps));
 }
 function getTextAnchor({
@@ -94,6 +95,10 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
    * Height of the bar this label belongs to.
    */
   height: _propTypes.default.number.isRequired,
+  /**
+   * If true, the bar label is hidden.
+   */
+  hidden: _propTypes.default.bool,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
   layout: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired,

package/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/BarChart/BarLabel/BarLabelItem.js

@@ -16,7 +16,7 @@ var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
 var _useItemHighlighted = require("../../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 /**
  * @ignore - internal component.
@@ -39,7 +39,8 @@ function BarLabelItem(props) {
       value,
       skipAnimation,
       layout,
-      barLabelPlacement
+      barLabelPlacement,
+      hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -95,6 +96,7 @@ function BarLabelItem(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, barLabelProps, barLabelOwnerState, {
+    hidden: hidden,
     children: formattedLabelText
   }));
 }

package/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/BarChart/BarPlot.js

@@ -13,17 +13,17 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _barElementClasses = require("./barElementClasses");
-var _BarElement = require("./BarElement");
 var _hooks = require("../hooks");
-var _BarClipPath = require("./BarClipPath");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useBarPlotData = require("./useBarPlotData");
 var _barClasses = require("./barClasses");
 var _animation = require("../internals/animation/animation");
+var _IndividualBarPlot = require("./IndividualBarPlot");
+var _BatchBarPlot = require("./BatchBarPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
 const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -51,11 +51,13 @@ function BarPlot(props) {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel
+      barLabel,
+      renderer
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const batchSkipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
   const {
     xAxis: xAxes
   } = (0, _hooks.useXAxes)();
@@ -66,86 +68,22 @@ function BarPlot(props) {
     completedData,
     masksData
   } = (0, _useBarPlotData.useBarPlotData)((0, _hooks.useDrawingArea)(), xAxes, yAxes);
-  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const classes = (0, _barClasses.useUtilityClasses)();
+  const BarElementPlot = renderer === 'svg-batch' ? _BatchBarPlot.BatchBarPlot : _IndividualBarPlot.IndividualBarPlot;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
     className: classes.root,
-    children: [!withoutBorderRadius && masksData.map(({
-      id,
-      x,
-      y,
-      xOrigin,
-      yOrigin,
-      width,
-      height,
-      hasPositive,
-      hasNegative,
-      layout
-    }) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarClipPath.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__*/(0, _jsxRuntime.jsx)("g", {
-        "data-series": seriesId,
-        className: classes.series,
-        children: data.map(({
-          dataIndex,
-          color,
-          maskId,
-          x,
-          y,
-          width,
-          height
-        }) => {
-          const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-            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__*/(0, _jsxRuntime.jsx)("g", {
-            clipPath: `url(#${maskId})`,
-            children: barElement
-          }, dataIndex);
-        })
-      }, seriesId);
-    }), completedData.map(processedSeries => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarElementPlot, (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
       skipAnimation: skipAnimation,
@@ -159,6 +97,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.
@@ -166,11 +105,6 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
-  /**
-   * The placement of the bar label.
-   * It controls whether the label is rendered inside or outside the bar.
-   */
-  barLabelPlacement: _propTypes.default.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */
@@ -181,6 +115,15 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.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.default.oneOf(['svg-batch', 'svg-single']),
   /**
    * If `true`, animations are skipped.
    * @default undefined

package/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/BarChart/BatchBarPlot/BarGroup.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarGroup = BarGroup;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _styles = require("@mui/material/styles");
+var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useStore = require("../../internals/store/useStore");
+var _useChartDimensions = require("../../internals/plugins/corePlugins/useChartDimensions");
+var _animation = require("../../internals/animation/animation");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["skipAnimation", "layout", "xOrigin", "yOrigin"],
+  _excluded2 = ["children", "layout", "xOrigin", "yOrigin"];
+const PathGroup = (0, _styles.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'
+  }
+});
+function BarGroup(_ref) {
+  let {
+      skipAnimation,
+      layout,
+      xOrigin,
+      yOrigin
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  if (skipAnimation) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PathGroup, (0, _extends2.default)({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGroup, (0, _extends2.default)({}, props, {
+    layout: layout,
+    xOrigin: xOrigin,
+    yOrigin: yOrigin
+  }));
+}
+const AnimatedRect = (0, _styles.styled)('rect')({
+  '@keyframes scaleInX': {
+    from: {
+      transform: 'scaleX(0)'
+    },
+    to: {
+      transform: 'scaleX(1)'
+    }
+  },
+  '@keyframes scaleInY': {
+    from: {
+      transform: 'scaleY(0)'
+    },
+    to: {
+      transform: 'scaleY(1)'
+    }
+  },
+  animationDuration: `${_animation.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 = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+  const store = (0, _useStore.useStore)();
+  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
+  const clipPathId = (0, _useId.default)();
+  const animateChildren = [];
+  if (layout === 'horizontal') {
+    animateChildren.push(/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: clipPathId,
+      children: animateChildren
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PathGroup, (0, _extends2.default)({
+      clipPath: `url(#${clipPathId})`
+    }, props, {
+      children: children
+    }))]
+  });
+}

package/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 {};