@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/modern/PieChart/PieArcLabel.js

@@ -1,15 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 import * as React from 'react';
+import { animated, to } from '@react-spring/web';
 import { arc as d3Arc } from 'd3-shape';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted } from '../hooks/useInteractionItemProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
@@ -27,61 +26,71 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = styled('text', {
+const PieArcLabelRoot = styled(animated.text, {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
-  textAnchor: 'middle'
+  fill: (theme.vars || theme).palette.text.primary,
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
 }));
+/**
+ * Helper to compute label position.
+ * It's not an inline function because we need it in inerpolation.
+ */
+const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) => {
+  if (!formattedArcLabel) {
+    return 0;
+  }
+  const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({
+    padAngle,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius
+  });
+  if (variable === 'x') {
+    return x;
+  }
+  return y;
+};
 export default function PieArcLabel(props) {
   const {
       id,
-      dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
-      innerRadius = 0,
+      startAngle,
+      endAngle,
+      paddingAngle,
+      innerRadius,
       outerRadius,
-      cornerRadius = 0,
-      formattedArcLabel
+      cornerRadius,
+      formattedArcLabel,
+      isHighlighted,
+      isFaded,
+      style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
   const ownerState = {
     id,
-    dataIndex,
     classes: innerClasses,
     color,
     isFaded,
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const arcLabelPosition = formattedArcLabel ? d3Arc().cornerRadius(cornerRadius).centroid(_extends({}, other, {
-    innerRadius,
-    outerRadius
-  })) : [0, 0];
-  return /*#__PURE__*/_jsx(PieArcLabelRoot, {
-    className: classes.root,
-    x: arcLabelPosition[0],
-    y: arcLabelPosition[1],
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
+    className: classes.root
+  }, other, {
+    style: _extends({
+      x: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+    }, style),
     children: formattedArcLabel
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/PieChart/PieArcLabelPlot.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+import * as React from 'react';
+import { useTransition } from '@react-spring/web';
+import { defaultLabelTransitionConfig } from './dataTransform/transition';
+import { useTransformData } from './dataTransform/useTransformData';
+import PieArcLabel from './PieArcLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const RATIO = 180 / Math.PI;
+function getItemLabel(arcLabel, arcLabelMinAngle, item) {
+  if (!arcLabel) {
+    return null;
+  }
+  const angle = (item.endAngle - item.startAngle) * RATIO;
+  if (angle < arcLabelMinAngle) {
+    return null;
+  }
+  if (typeof arcLabel === 'string') {
+    return item[arcLabel]?.toString();
+  }
+  return arcLabel(item);
+}
+export function PieArcLabelPlot(props) {
+  const {
+      slots,
+      slotProps,
+      innerRadius = 0,
+      outerRadius,
+      cornerRadius = 0,
+      paddingAngle = 0,
+      id,
+      highlightScope,
+      highlighted,
+      faded = {
+        additionalRadius: -5
+      },
+      data,
+      arcLabel,
+      arcLabelMinAngle = 0,
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const transformedData = useTransformData({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    paddingAngle,
+    id,
+    highlightScope,
+    highlighted,
+    faded,
+    data
+  });
+  const transition = useTransition(transformedData, _extends({}, defaultLabelTransitionConfig, {
+    immediate: skipAnimation
+  }));
+  if (data.length === 0) {
+    return null;
+  }
+  const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transition((_ref, item) => {
+      let {
+          startAngle,
+          endAngle,
+          paddingAngle: pA,
+          innerRadius: iR,
+          outerRadius: oR,
+          cornerRadius: cR
+        } = _ref,
+        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+      return /*#__PURE__*/_jsx(ArcLabel, _extends({
+        startAngle: startAngle,
+        endAngle: endAngle,
+        paddingAngle: pA,
+        innerRadius: iR,
+        outerRadius: oR,
+        cornerRadius: cR,
+        style: style,
+        id: id,
+        color: item.color,
+        isFaded: item.isFaded,
+        isHighlighted: item.isHighlighted,
+        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+      }, slotProps?.pieArcLabel));
+    })
+  }));
+}

package/modern/PieChart/PieArcPlot.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+import * as React from 'react';
+import { useTransition } from '@react-spring/web';
+import PieArc from './PieArc';
+import { defaultTransitionConfig } from './dataTransform/transition';
+import { useTransformData } from './dataTransform/useTransformData';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PieArcPlot(props) {
+  const {
+      slots,
+      slotProps,
+      innerRadius = 0,
+      outerRadius,
+      cornerRadius = 0,
+      paddingAngle = 0,
+      id,
+      highlightScope,
+      highlighted,
+      faded = {
+        additionalRadius: -5
+      },
+      data,
+      onClick,
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const transformedData = useTransformData({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    paddingAngle,
+    id,
+    highlightScope,
+    highlighted,
+    faded,
+    data
+  });
+  const transition = useTransition(transformedData, _extends({}, defaultTransitionConfig, {
+    immediate: skipAnimation
+  }));
+  if (data.length === 0) {
+    return null;
+  }
+  const Arc = slots?.pieArc ?? PieArc;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transition((_ref, item, _, index) => {
+      let {
+          startAngle,
+          endAngle,
+          paddingAngle: pA,
+          innerRadius: iR,
+          outerRadius: oR,
+          cornerRadius: cR
+        } = _ref,
+        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+      return /*#__PURE__*/_jsx(Arc, _extends({
+        startAngle: startAngle,
+        endAngle: endAngle,
+        paddingAngle: pA,
+        innerRadius: iR,
+        outerRadius: oR,
+        cornerRadius: cR,
+        style: style,
+        id: id,
+        color: item.color,
+        dataIndex: index,
+        highlightScope: highlightScope,
+        isFaded: item.isFaded,
+        isHighlighted: item.isHighlighted,
+        onClick: onClick && (event => {
+          onClick(event, {
+            type: 'pie',
+            seriesId: id,
+            dataIndex: index
+          }, item);
+        })
+      }, slotProps?.pieArc));
+    })
+  }));
+}

package/modern/PieChart/PieChart.js

@@ -16,6 +16,17 @@ const defaultMargin = {
   left: 5,
   right: 100
 };
+
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+ */
 function PieChart(props) {
   const {
     xAxis,
@@ -33,6 +44,7 @@ function PieChart(props) {
       x: 'none',
       y: 'none'
     },
+    skipAnimation,
     legend = {
       direction: 'column',
       position: {
@@ -46,7 +58,8 @@ function PieChart(props) {
     bottomAxis = null,
     children,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -74,7 +87,9 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -96,18 +111,22 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -119,9 +138,21 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
   disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -129,65 +160,76 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
+  /**
+   * 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.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onClick: PropTypes.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.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -209,15 +251,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: PropTypes.number,
     faded: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlighted: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
@@ -232,6 +278,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: PropTypes.oneOf(['pie']),
     valueFormatter: PropTypes.func
   })).isRequired,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -244,6 +295,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -252,18 +305,22 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -275,7 +332,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -288,6 +353,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -296,12 +362,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -314,6 +387,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -322,6 +396,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,