@mui/x-charts 7.3.1 → 7.4.0

package/BarChart/BarChart.d.ts

@@ -10,11 +10,12 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.

package/BarChart/BarChart.js

@@ -19,6 +19,7 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
+var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -54,11 +55,13 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     rightAxis,
     bottomAxis,
     skipAnimation,
+    borderRadius,
     onItemClick,
     onAxisClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -99,14 +102,19 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
       vertical: grid.vertical,
       horizontal: grid.horizontal
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
-        onItemClick: onItemClick
-      })
+        onItemClick: onItemClick,
+        borderRadius: borderRadius
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -117,7 +125,7 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, defaultizedAxisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, defaultizedAxisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
@@ -140,6 +148,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -200,6 +212,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.

package/BarChart/BarClipPath.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface BarClipPathProps {
+    maskId: string;
+    borderRadius?: number;
+    hasNegative: boolean;
+    hasPositive: boolean;
+    layout?: 'vertical' | 'horizontal';
+    style: {};
+}
+/**
+ * @ignore - internal component.
+ */
+declare function BarClipPath(props: BarClipPathProps): React.JSX.Element | null;
+export { BarClipPath };

package/BarChart/BarClipPath.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarClipPath = BarClipPath;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _web = require("@react-spring/web");
+var _getRadius = require("./getRadius");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["style", "maskId"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
+function BarClipRect(props) {
+  const radiusData = props.ownerState;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+    style: (0, _extends2.default)({}, props.style, {
+      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
+        topLeft: Math.min(value, (0, _getRadius.getRadius)('top-left', radiusData)),
+        topRight: Math.min(value, (0, _getRadius.getRadius)('top-right', radiusData)),
+        bottomRight: Math.min(value, (0, _getRadius.getRadius)('bottom-right', radiusData)),
+        bottomLeft: Math.min(value, (0, _getRadius.getRadius)('bottom-left', radiusData))
+      }))
+    })
+  });
+}
+/**
+ * @ignore - internal component.
+ */
+function BarClipPath(props) {
+  const {
+      style,
+      maskId
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (!props.borderRadius || props.borderRadius <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+    id: maskId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BarClipRect, {
+      ownerState: rest,
+      style: style
+    })
+  });
+}

package/BarChart/BarPlot.d.ts

@@ -17,6 +17,10 @@ export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps
      * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+    /**
+     * Defines the border radius of the bar element.
+     */
+    borderRadius?: number;
 }
 /**
  * Demos:

package/BarChart/BarPlot.js

@@ -16,8 +16,10 @@ var _BarElement = require("./BarElement");
 var _axis = require("../models/axis");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _hooks = require("../hooks");
+var _BarClipPath = require("./BarClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -54,6 +56,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const chartId = (0, _hooks.useChartId)();
   const {
     series,
     stackingGroups
@@ -66,6 +69,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -78,25 +82,25 @@ const useAggregatedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!(0, _axis.isBandScaleConfig)(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = xAxisConfig;
         if ((0, _axis.isBandScaleConfig)(yAxisConfig) || (0, _axis.isPointScaleConfig)(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       } else {
         if (!(0, _axis.isBandScaleConfig)(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
+          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
         }
         baseScaleConfig = yAxisConfig;
         if ((0, _axis.isBandScaleConfig)(xAxisConfig) || (0, _axis.isPointScaleConfig)(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
         }
       }
       const xScale = xAxisConfig.scale;
@@ -119,7 +123,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -130,14 +135,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        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;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -156,7 +188,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -180,41 +212,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const transition = (0, _web.useTransition)(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = (0, _web.useTransition)(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarClipPath.BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -222,6 +290,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChart/getRadius.d.ts

@@ -0,0 +1,15 @@
+type GetRadiusData = {
+    hasNegative: boolean;
+    hasPositive: boolean;
+    borderRadius?: number;
+    layout?: 'vertical' | 'horizontal';
+};
+type GetRadiusCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export declare const getRadius: (corner: GetRadiusCorner, { hasNegative, hasPositive, borderRadius, layout }: GetRadiusData) => number;
+export {};

package/BarChart/getRadius.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadius = void 0;
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};
+exports.getRadius = getRadius;

package/BarChart/types.d.ts

@@ -0,0 +1,25 @@
+import type { HighlightScope } from '../context';
+import type { BarSeriesType } from '../models';
+import type { SeriesId } from '../models/seriesType/common';
+export type AnimationData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    yOrigin: number;
+    xOrigin: number;
+    layout: BarSeriesType['layout'];
+};
+export interface CompletedBarData extends AnimationData {
+    seriesId: SeriesId;
+    dataIndex: number;
+    color: string;
+    value: number | null;
+    highlightScope?: Partial<HighlightScope>;
+    maskId: string;
+}
+export interface MaskData extends AnimationData {
+    id: string;
+    hasNegative: boolean;
+    hasPositive: boolean;
+}

package/BarChart/types.js

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