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

package/esm/Gauge/GaugeContainer.js

@@ -0,0 +1,209 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useForkRef from '@mui/utils/useForkRef';
+import { styled } from '@mui/material/styles';
+import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
+import { ChartsSurface } from '../ChartsSurface';
+import { DrawingProvider } from '../context/DrawingProvider';
+import { GaugeProvider } from './GaugeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ResizableContainer = styled('div', {
+  name: 'MuiGauge',
+  slot: 'Container'
+})(({
+  ownerState,
+  theme
+}) => {
+  var _ownerState$width, _ownerState$height;
+  return {
+    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
+    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
+    display: 'flex',
+    position: 'relative',
+    flexGrow: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    '&>svg': {
+      width: '100%',
+      height: '100%'
+    },
+    '& text': {
+      fill: (theme.vars || theme).palette.text.primary
+    }
+  };
+});
+const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
+  const {
+      width: inWidth,
+      height: inHeight,
+      margin,
+      title,
+      desc,
+      value,
+      valueMin = 0,
+      valueMax = 100,
+      startAngle,
+      endAngle,
+      outerRadius,
+      innerRadius,
+      cornerRadius,
+      cx,
+      cy,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
+  const svgRef = React.useRef(null);
+  const handleRef = useForkRef(ref, svgRef);
+  return /*#__PURE__*/_jsx(ResizableContainer, _extends({
+    ref: containerRef,
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    role: "meter",
+    "aria-valuenow": value === null ? undefined : value,
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax
+  }, other, {
+    children: width && height ? /*#__PURE__*/_jsx(DrawingProvider, {
+      width: width,
+      height: height,
+      margin: _extends({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, margin),
+      svgRef: svgRef,
+      children: /*#__PURE__*/_jsx(GaugeProvider, {
+        value: value,
+        valueMin: valueMin,
+        valueMax: valueMax,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        outerRadius: outerRadius,
+        innerRadius: innerRadius,
+        cornerRadius: cornerRadius,
+        cx: cx,
+        cy: cy,
+        children: /*#__PURE__*/_jsx(ChartsSurface, {
+          width: width,
+          height: height,
+          ref: handleRef,
+          title: title,
+          desc: desc,
+          disableAxisListener: true,
+          "aria-hidden": "true",
+          children: children
+        })
+      })
+    }) : null
+  }));
+});
+process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  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 end angle (deg).
+   * @default 360
+   */
+  endAngle: PropTypes.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * 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
+  }),
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: PropTypes.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: PropTypes.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: PropTypes.number,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number
+} : void 0;
+export { GaugeContainer };

package/esm/Gauge/GaugeProvider.js

@@ -0,0 +1,88 @@
+// @ignore - do not document.
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+import { getPercentageValue } from '../internals/utils';
+import { getArcRatios, getAvailableRadius } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GaugeContext = /*#__PURE__*/React.createContext({
+  value: null,
+  valueMin: 0,
+  valueMax: 0,
+  startAngle: 0,
+  endAngle: 0,
+  innerRadius: 0,
+  outerRadius: 0,
+  cornerRadius: 0,
+  cx: 0,
+  cy: 0,
+  maxRadius: 0,
+  valueAngle: null
+});
+if (process.env.NODE_ENV !== 'production') {
+  GaugeContext.displayName = 'GaugeContext';
+}
+export function GaugeProvider(props) {
+  const {
+    value = null,
+    valueMin = 0,
+    valueMax = 100,
+    startAngle = 0,
+    endAngle = 360,
+    outerRadius: outerRadiusParam,
+    innerRadius: innerRadiusParam,
+    cornerRadius: cornerRadiusParam,
+    cx: cxParam,
+    cy: cyParam,
+    children
+  } = props;
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(DrawingContext);
+  const ratios = getArcRatios(startAngle, endAngle);
+  const innerCx = cxParam ? getPercentageValue(cxParam, width) : ratios.cx * width;
+  const innerCy = cyParam ? getPercentageValue(cyParam, height) : ratios.cy * height;
+  let cx = left + innerCx;
+  let cy = top + innerCy;
+  const maxRadius = getAvailableRadius(innerCx, innerCy, width, height, ratios);
+
+  // If the center is not defined, after computation of the available radius, udpate the center to use the remaining space.
+  if (cxParam === undefined) {
+    const usedWidth = maxRadius * (ratios.maxX - ratios.minX);
+    cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;
+  }
+  if (cyParam === undefined) {
+    const usedHeight = maxRadius * (ratios.maxY - ratios.minY);
+    cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
+  }
+  const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : maxRadius, maxRadius);
+  const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : '80%', maxRadius);
+  const cornerRadius = getPercentageValue(cornerRadiusParam != null ? cornerRadiusParam : 0, outerRadius - innerRadius);
+  const contextValue = React.useMemo(() => {
+    const startAngleRad = Math.PI * startAngle / 180;
+    const endAngleRad = Math.PI * endAngle / 180;
+    return {
+      value,
+      valueMin,
+      valueMax,
+      startAngle: startAngleRad,
+      endAngle: endAngleRad,
+      outerRadius,
+      innerRadius,
+      cornerRadius,
+      cx,
+      cy,
+      maxRadius,
+      valueAngle: value === null ? null : startAngleRad + (endAngleRad - startAngleRad) * (value - valueMin) / (valueMax - valueMin)
+    };
+  }, [value, valueMin, valueMax, startAngle, endAngle, outerRadius, innerRadius, cornerRadius, cx, cy, maxRadius]);
+  return /*#__PURE__*/_jsx(GaugeContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export function useGaugeState() {
+  return React.useContext(GaugeContext);
+}

package/esm/Gauge/GaugeReferenceArc.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import { styled } from '@mui/material/styles';
+import { useGaugeState } from './GaugeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledPath = styled('path', {
+  name: 'MuiGauge',
+  slot: 'ReferenceArc',
+  overridesResolver: (props, styles) => styles.referenceArc
+})(({
+  theme
+}) => ({
+  fill: (theme.vars || theme).palette.divider
+}));
+export function GaugeReferenceArc(props) {
+  const {
+    startAngle,
+    endAngle,
+    outerRadius,
+    innerRadius,
+    cornerRadius,
+    cx,
+    cy
+  } = useGaugeState();
+  return /*#__PURE__*/_jsx(StyledPath, _extends({
+    transform: `translate(${cx}, ${cy})`,
+    d: d3Arc().cornerRadius(cornerRadius)({
+      startAngle,
+      endAngle,
+      innerRadius,
+      outerRadius
+    })
+  }, props));
+}

package/esm/Gauge/GaugeValueArc.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import { styled } from '@mui/material/styles';
+import { useGaugeState } from './GaugeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledPath = styled('path', {
+  name: 'MuiGauge',
+  slot: 'ReferenceArc',
+  overridesResolver: (props, styles) => styles.referenceArc
+})(({
+  theme
+}) => ({
+  fill: (theme.vars || theme).palette.primary.main
+}));
+export function GaugeValueArc(props) {
+  const {
+    value,
+    valueMin,
+    valueMax,
+    startAngle,
+    endAngle,
+    outerRadius,
+    innerRadius,
+    cornerRadius,
+    cx,
+    cy
+  } = useGaugeState();
+  if (value === null) {
+    return null;
+  }
+  const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
+  return /*#__PURE__*/_jsx(StyledPath, _extends({
+    transform: `translate(${cx}, ${cy})`,
+    d: d3Arc().cornerRadius(cornerRadius)({
+      startAngle,
+      endAngle: valueAngle,
+      innerRadius,
+      outerRadius
+    })
+  }, props));
+}

package/esm/Gauge/GaugeValueText.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["text", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGaugeState } from './GaugeProvider';
+import { ChartsText } from '../ChartsText';
+import { jsx as _jsx } from "react/jsx-runtime";
+function defaultFormatter({
+  value
+}) {
+  return value === null ? null : value.toLocaleString();
+}
+function GaugeValueText(props) {
+  const {
+      text = defaultFormatter,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value,
+    valueMin,
+    valueMax,
+    cx,
+    cy
+  } = useGaugeState();
+  const formattedText = typeof text === 'function' ? text({
+    value,
+    valueMin,
+    valueMax
+  }) : text;
+  if (formattedText === null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    className: className,
+    children: /*#__PURE__*/_jsx(ChartsText, _extends({
+      x: cx,
+      y: cy,
+      text: formattedText,
+      style: {
+        textAnchor: 'middle',
+        dominantBaseline: 'central'
+      }
+    }, other))
+  });
+}
+process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Height of a text line (in `em`).
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: PropTypes.bool,
+  ownerState: PropTypes.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: PropTypes.object,
+  text: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+} : void 0;
+export { GaugeValueText };

package/esm/Gauge/gaugeClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getGaugeUtilityClass(slot) {
+  return generateUtilityClass('MuiGauge', slot);
+}
+export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
+export default gaugeClasses;

package/esm/Gauge/index.js

@@ -0,0 +1,7 @@
+export * from './Gauge';
+export * from './GaugeContainer';
+export * from './GaugeValueText';
+export * from './GaugeValueArc';
+export * from './GaugeReferenceArc';
+export * from './gaugeClasses';
+export { useGaugeState } from './GaugeProvider';

package/esm/Gauge/utils.js

@@ -0,0 +1,68 @@
+function deg2rad(angle) {
+  return Math.PI * angle / 180;
+}
+function getPoint(angle) {
+  const radAngle = deg2rad(angle);
+  return [Math.sin(radAngle), -Math.cos(radAngle)];
+}
+
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export function getArcRatios(startAngle, endAngle) {
+  // Set the start, end and center point.
+  const points = [[0, 0], getPoint(startAngle), getPoint(endAngle)];
+
+  // Add cardinal points included in the arc
+  const minAngle = Math.min(startAngle, endAngle);
+  const maxAngle = Math.max(startAngle, endAngle);
+  const initialAngle = Math.floor(minAngle / 90) * 90;
+  for (let step = 1; step <= 4; step += 1) {
+    const cartinalAngle = initialAngle + step * 90;
+    if (cartinalAngle < maxAngle) {
+      points.push(getPoint(cartinalAngle));
+    }
+  }
+  const minX = Math.min(...points.map(([x]) => x));
+  const maxX = Math.max(...points.map(([x]) => x));
+  const minY = Math.min(...points.map(([, y]) => y));
+  const maxY = Math.max(...points.map(([, y]) => y));
+  return {
+    cx: -minX / (maxX - minX),
+    cy: -minY / (maxY - minY),
+    minX,
+    maxX,
+    minY,
+    maxY
+  };
+}
+export function getAvailableRadius(cx, cy, width, height, {
+  minX,
+  maxX,
+  minY,
+  maxY
+}) {
+  return Math.min(...[{
+    ratio: Math.abs(minX),
+    space: cx
+  }, {
+    ratio: Math.abs(maxX),
+    space: width - cx
+  }, {
+    ratio: Math.abs(minY),
+    space: cy
+  }, {
+    ratio: Math.abs(maxY),
+    space: height - cy
+  }].map(({
+    ratio,
+    space
+  }) => {
+    if (ratio < 0.00001) {
+      return Infinity;
+    }
+    return space / ratio;
+  }));
+}

package/esm/LineChart/LineChart.js

@@ -13,6 +13,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
+import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,6 +48,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     },
     disableLineItemHighlight,
     legend,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -84,6 +86,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/_jsx(AreaPlot, {
@@ -129,11 +134,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
-   * The two properties accept the following values:
-   * - 'none': display nothing.
-   * - 'line': display a line at the current mouse position.
-   * - 'band': display a band at the current mouse position. Only available with band scale.
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({
@@ -189,9 +191,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: 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,
   /**
@@ -247,6 +255,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * Callback fired when an area element is clicked.
+   */
   onAreaClick: PropTypes.func,
   /**
    * The function called for onClick events.
@@ -255,7 +266,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when a line element is clicked.
+   */
   onLineClick: PropTypes.func,
+  /**
+   * Callback fired when a mark element is clicked.
+   */
   onMarkClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -284,6 +301,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the line chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -302,6 +322,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
@@ -345,7 +370,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
-   * @default undefined
    */
   width: PropTypes.number,
   /**

package/esm/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { arc as d3Arc } from 'd3-shape';
@@ -40,20 +40,20 @@ const PieArcRoot = styled(animated.path, {
 }));
 function PieArc(props) {
   const {
-      id,
-      dataIndex,
       classes: innerClasses,
       color,
+      cornerRadius,
+      dataIndex,
+      endAngle,
       highlightScope,
-      onClick,
+      id,
+      innerRadius,
       isFaded,
       isHighlighted,
-      startAngle,
-      endAngle,
-      paddingAngle,
-      innerRadius,
+      onClick,
       outerRadius,
-      cornerRadius
+      paddingAngle,
+      startAngle
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {