@mui/x-charts 7.0.0-beta.0 → 7.0.0-beta.2

package/LineChart/MarkElement.js

@@ -16,11 +16,12 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _d3Shape = require("d3-shape");
+var _web = require("@react-spring/web");
 var _utils = require("../internals/utils");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
 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 && Object.prototype.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; }
 function getMarkElementUtilityClass(slot) {
@@ -39,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
 };
-const MarkElementPath = (0, _styles.styled)('path', {
+const MarkElementPath = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -47,8 +48,6 @@ const MarkElementPath = (0, _styles.styled)('path', {
   ownerState,
   theme
 }) => ({
-  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
-  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
   fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
@@ -64,9 +63,7 @@ MarkElementPath.propTypes = {
     color: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired,
     isFaded: _propTypes.default.bool.isRequired,
-    isHighlighted: _propTypes.default.bool.isRequired,
-    x: _propTypes.default.number.isRequired,
-    y: _propTypes.default.number.isRequired
+    isHighlighted: _propTypes.default.bool.isRequired
   }).isRequired,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 };
@@ -89,7 +86,9 @@ function MarkElement(props) {
       color,
       shape,
       dataIndex,
-      highlightScope
+      highlightScope,
+      onClick,
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -105,20 +104,29 @@ function MarkElement(props) {
     type: 'line',
     seriesId: id
   }, highlightScope);
+  const position = (0, _web.useSpring)({
+    x,
+    y,
+    immediate: skipAnimation
+  });
   const ownerState = {
     id,
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
-    x,
-    y
+    color
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
+    style: {
+      transform: (0, _web.to)([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+      transformOrigin: (0, _web.to)([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`)
+    },
     ownerState: ownerState,
     className: classes.root,
-    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _utils.getSymbol)(shape)])()
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _utils.getSymbol)(shape)])(),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({
     type: 'line',
     seriesId: id,
@@ -139,8 +147,14 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The shape of the marker.
    */
-  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
 } : void 0;

package/LineChart/MarkPlot.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { MarkElementProps } from './MarkElement';
+import { LineItemIdentifier } from '../models/seriesType/line';
 export interface MarkPlotSlots {
     mark?: React.JSXElementConstructor<MarkElementProps>;
 }
 export interface MarkPlotSlotProps {
     mark?: Partial<MarkElementProps>;
 }
-export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
+export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<MarkElementProps, 'skipAnimation'> {
     /**
      * Overridable component slots.
      * @default {}
@@ -17,6 +18,12 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
      * @default {}
      */
     slotProps?: MarkPlotSlotProps;
+    /**
+     * Callback fired when a line mark item is clicked.
+     * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+     * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+     */
+    onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -14,8 +14,10 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _constants = require("../constants");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 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 && Object.prototype.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; }
 /**
@@ -31,11 +33,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function MarkPlot(props) {
   const {
       slots,
-      slotProps
+      slotProps,
+      skipAnimation,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    chartId
+  } = React.useContext(_DrawingProvider.DrawingContext);
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -56,7 +63,7 @@ function MarkPlot(props) {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
-      return groupIds.flatMap(seriesId => {
+      return groupIds.map(seriesId => {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
@@ -87,59 +94,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           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 to be able to display a line plot.`);
         }
-        return xData?.map((x, index) => {
-          const value = data[index] == null ? null : stackedData[index][1];
-          return {
-            x: xScale(x),
-            y: value === null ? null : yScale(value),
-            position: x,
-            value,
-            index
-          };
-        }).filter(({
-          x,
-          y,
-          index,
-          position,
-          value
-        }) => {
-          if (value === null || y === null) {
-            // Remove missing data point
-            return false;
-          }
-          if (!isInRange({
-            x,
-            y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
+        const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          clipPath: `url(#${clipId})`,
+          children: xData?.map((x, index) => {
+            const value = data[index] == null ? null : stackedData[index][1];
+            return {
+              x: xScale(x),
+              y: value === null ? null : yScale(value),
+              position: x,
+              value,
+              index
+            };
+          }).filter(({
             x,
             y,
             index,
             position,
             value
-          });
-        }).map(({
-          x,
-          y,
-          index
-        }) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`);
-        });
+          }) => {
+            if (value === null || y === null) {
+              // Remove missing data point
+              return false;
+            }
+            if (!isInRange({
+              x,
+              y
+            })) {
+              // Remove out of range
+              return false;
+            }
+            if (showMark === true) {
+              return true;
+            }
+            return showMark({
+              x,
+              y,
+              index,
+              position,
+              value
+            });
+          }).map(({
+            x,
+            y,
+            index
+          }) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && (event => onItemClick(event, {
+                type: 'line',
+                seriesId,
+                dataIndex: index
+              }))
+            }, slotProps?.mark), `${seriesId}-${index}`);
+          })
+        }, seriesId);
       });
     })
   }));
@@ -149,6 +167,17 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/LineChart/formatter.js

@@ -76,7 +76,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v === null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/LineChart/index.d.ts

@@ -4,6 +4,8 @@ export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
 export * from './AreaElement';
+export * from './AnimatedArea';
 export * from './LineElement';
+export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';

package/LineChart/index.js

@@ -69,6 +69,17 @@ Object.keys(_AreaElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedArea = require("./AnimatedArea");
+Object.keys(_AnimatedArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedArea[key];
+    }
+  });
+});
 var _LineElement = require("./LineElement");
 Object.keys(_LineElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -80,6 +91,17 @@ Object.keys(_LineElement).forEach(function (key) {
     }
   });
 });
+var _AnimatedLine = require("./AnimatedLine");
+Object.keys(_AnimatedLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimatedLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimatedLine[key];
+    }
+  });
+});
 var _MarkElement = require("./MarkElement");
 Object.keys(_MarkElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/PieChart/PieArc.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { HighlightScope } from '../context/HighlightProvider';
+import { PieItemId } from '../models';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -11,7 +12,7 @@ export interface PieArcClasses {
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {
-    id: string;
+    id: PieItemId;
     dataIndex: number;
     color: string;
     isFaded: boolean;
@@ -20,7 +21,7 @@ interface PieArcOwnerState {
 }
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = PieArcOwnerState & React.ComponentPropsWithoutRef<'path'> & {
+export type PieArcProps = Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & PieArcOwnerState & {
     startAngle: SpringValue<number>;
     endAngle: SpringValue<number>;
     innerRadius: SpringValue<number>;

package/PieChart/PieArc.js

@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired
 } : void 0;

package/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
+import { PieItemId } from '../models/seriesType/pie';
 export interface PieArcLabelClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -10,7 +11,7 @@ export interface PieArcLabelClasses {
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
-    id: string;
+    id: PieItemId;
     color: string;
     isFaded: boolean;
     isHighlighted: boolean;
@@ -18,7 +19,7 @@ interface PieArcLabelOwnerState {
 }
 export declare function getPieArcLabelUtilityClass(slot: string): string;
 export declare const pieArcLabelClasses: PieArcLabelClasses;
-export type PieArcLabelProps = PieArcLabelOwnerState & React.ComponentPropsWithoutRef<'text'> & {
+export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.ComponentPropsWithoutRef<'text'>, 'id'> & {
     startAngle: SpringValue<number>;
     endAngle: SpringValue<number>;
     innerRadius: SpringValue<number>;

package/PieChart/PieArcLabel.js

@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   formattedArcLabel: _propTypes.default.string,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.d.ts

@@ -24,7 +24,7 @@ export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'da
      */
     slotProps?: PieArcLabelPlotSlotProps;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcLabelPlot.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -182,7 +182,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieArcPlot.d.ts

@@ -29,9 +29,9 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
      * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
      * @param {DefaultizedPieValueType} item The pie item.
      */
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+    onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
     /**
-     * If `true`, animations are skiped.
+     * If `true`, animations are skipped.
      * @default false
      */
     skipAnimation?: boolean;

package/PieChart/PieArcPlot.js

@@ -14,7 +14,7 @@ var _PieArc = require("./PieArc");
 var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 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 && Object.prototype.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; }
@@ -33,7 +33,7 @@ function PieArcPlot(props) {
         additionalRadius: -5
       },
       data,
-      onClick,
+      onItemClick,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -80,8 +80,8 @@ function PieArcPlot(props) {
         highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
-        onClick: onClick && (event => {
-          onClick(event, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
             type: 'pie',
             seriesId: id,
             dataIndex: index
@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
   }),
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -158,7 +158,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * The radius between circle center and the end of the arc.
    */
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   paddingAngle: _propTypes.default.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,

package/PieChart/PieChart.d.ts

@@ -33,7 +33,7 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
      * @deprecated Consider using `slotProps.legend` instead.
      */
     legend?: ChartsLegendProps;
-    onClick?: PiePlotProps['onClick'];
+    onItemClick?: PiePlotProps['onItemClick'];
     slots?: PieChartSlots;
     /**
      * The props used for each component slot.

package/PieChart/PieChart.js

@@ -67,7 +67,7 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -96,7 +96,7 @@ function PieChart(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onClick: onClick,
+      onItemClick: onItemClick,
       skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
@@ -119,7 +119,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -169,7 +169,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -216,14 +216,14 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
-  onClick: _propTypes.default.func,
+  onItemClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -246,7 +246,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }), _propTypes.default.string]),
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: _propTypes.default.bool,
@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -309,7 +309,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -317,13 +317,14 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
@@ -343,7 +344,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.string,
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -351,13 +352,14 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,