@mui/x-charts 7.0.0-alpha.4 → 7.0.0-alpha.7

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -15,10 +15,10 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 ChartsReferenceLine(props) {
   if (props.x !== undefined && props.y !== undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
   }
   if (props.x === undefined && props.y === undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (props.x !== undefined) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXReferenceLine.ChartsXReferenceLine, (0, _extends2.default)({}, props));

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _hooks = require("../hooks");
 var _common = require("./common");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
 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); }

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _hooks = require("../hooks");
 var _common = require("./common");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
 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); }

package/ChartsReferenceLine/common.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
-import { ChartsTextStyle } from '../internals/components/ChartsText';
+import { ChartsTextStyle } from '../ChartsText';
 export type CommonChartsReferenceLineProps = {
     /**
      * The alignment if the label is in the chart drawing area.

package/ChartsText/ChartsText.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GetWordsByLinesParams } from '../internals/getWordsByLines';
+export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
+    /**
+     * Height of a text line (in `em`).
+     */
+    lineHeight?: number;
+    ownerState?: any;
+}
+/**
+ * Helper component to manage multiline text in SVG
+ */
+declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
+declare namespace ChartsText {
+    var propTypes: any;
+}
+export { ChartsText };

package/{internals/components → ChartsText}/ChartsText.js

@@ -5,28 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsText = ChartsText;
-exports.getWordsByLines = getWordsByLines;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _domUtils = require("../domUtils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _getWordsByLines = require("../internals/getWordsByLines");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 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 getWordsByLines({
-  style,
-  needsComputation,
-  text
-}) {
-  return text.split('\n').map(subText => (0, _extends2.default)({
-    text: subText
-  }, needsComputation ? (0, _domUtils.getStringSize)(subText, style) : {
-    width: 0,
-    height: 0
-  }));
-}
+/**
+ * Helper component to manage multiline text in SVG
+ */
 function ChartsText(props) {
   const {
       x,
@@ -42,7 +33,7 @@ function ChartsText(props) {
       dominantBaseline
     } = _ref,
     style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
-  const wordsByLines = React.useMemo(() => getWordsByLines({
+  const wordsByLines = React.useMemo(() => (0, _getWordsByLines.getWordsByLines)({
     style,
     needsComputation: text.includes('\n'),
     text
@@ -84,4 +75,28 @@ function ChartsText(props) {
       children: line.text
     }, index))
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsText.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.default.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: _propTypes.default.bool,
+  ownerState: _propTypes.default.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: _propTypes.default.object,
+  /**
+   * Text displayed.
+   */
+  text: _propTypes.default.string.isRequired
+} : void 0;

package/ChartsText/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartsText } from './ChartsText';
+export type { ChartsTextProps } from './ChartsText';
+export type { ChartsTextStyle } from '../internals/getWordsByLines';

package/ChartsText/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChartsText", {
+  enumerable: true,
+  get: function () {
+    return _ChartsText.ChartsText;
+  }
+});
+var _ChartsText = require("./ChartsText");

package/ChartsText/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsText/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ChartsXAxis/ChartsXAxis.js

@@ -17,9 +17,10 @@ var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _geometry = require("../internals/geometry");
 var _useMounted = require("../hooks/useMounted");
+var _getWordsByLines = require("../internals/getWordsByLines");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 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); }
@@ -51,7 +52,7 @@ function addLabelDimension(xTicks, {
         height: 0
       });
     }
-    const tickSizes = (0, _ChartsText.getWordsByLines)({
+    const tickSizes = (0, _getWordsByLines.getWordsByLines)({
       style,
       needsComputation: true,
       text: tick.formattedValue

package/ChartsYAxis/ChartsYAxis.js

@@ -16,7 +16,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
-var _ChartsText = require("../internals/components/ChartsText");
+var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];

package/LineChart/AreaPlot.js

@@ -15,6 +15,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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); }
@@ -70,10 +71,10 @@ function AreaPlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+            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.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));

package/LineChart/LineHighlightPlot.js

@@ -14,6 +14,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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); }
@@ -78,7 +79,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          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.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/LineChart/LinePlot.js

@@ -15,6 +15,7 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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); }
@@ -69,10 +70,10 @@ function LinePlot(props) {
         const xData = xAxis[xAxisKey].data;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+            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`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+            throw new Error(`MUI-X-Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
           }
         }
         const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));

package/LineChart/MarkPlot.js

@@ -13,6 +13,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 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); }
@@ -84,7 +85,7 @@ function MarkPlot(props) {
           return true;
         };
         if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+          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];

package/LineChart/formatter.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
 var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
+let warnedOnce = false;
+
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
   const {
@@ -32,7 +34,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI-X-Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -52,7 +54,17 @@ const formatter = (params, dataset) => {
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, series[id], {
-        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
+              warnedOnce = true;
+              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+            }
+            return null;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/PieChart/PieArcLabel.d.ts

@@ -23,6 +23,7 @@ export type PieArcLabelProps = PieArcLabelOwnerState & React.ComponentPropsWitho
     endAngle: SpringValue<number>;
     innerRadius: SpringValue<number>;
     outerRadius: SpringValue<number>;
+    arcLabelRadius: SpringValue<number>;
     cornerRadius: SpringValue<number>;
     paddingAngle: SpringValue<number>;
 } & {

package/PieChart/PieArcLabel.js

@@ -18,7 +18,7 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
 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 getPieArcLabelUtilityClass(slot) {
@@ -52,7 +52,7 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
  * 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) => {
+const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
   if (!formattedArcLabel) {
     return 0;
   }
@@ -60,8 +60,8 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
     padAngle,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius
   });
   if (variable === 'x') {
     return x;
@@ -76,8 +76,7 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -97,8 +96,8 @@ function PieArcLabel(props) {
     className: classes.root
   }, other, {
     style: (0, _extends2.default)({
-      x: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
     }, style),
     children: formattedArcLabel
   }));

package/PieChart/PieArcLabelPlot.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+import { ComputedPieRadius, DefaultizedPieSeriesType } from '../models/seriesType/pie';
 import { PieArcLabelProps } from './PieArcLabel';
-import { DefaultizedProps } from '../models/helpers';
 export interface PieArcLabelPlotSlots {
     pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }
 export interface PieArcLabelPlotSlotProps {
     pieArcLabel?: Partial<PieArcLabelProps>;
 }
-export interface PieArcLabelPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
+export interface PieArcLabelPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcLabelPlot.js

@@ -14,8 +14,8 @@ var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "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; }
 const RATIO = 180 / Math.PI;
@@ -36,8 +36,9 @@ function PieArcLabelPlot(props) {
   const {
       slots,
       slotProps,
-      innerRadius = 0,
+      innerRadius,
       outerRadius,
+      arcLabelRadius,
       cornerRadius = 0,
       paddingAngle = 0,
       id,
@@ -55,6 +56,7 @@ function PieArcLabelPlot(props) {
   const transformedData = (0, _useTransformData.useTransformData)({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     paddingAngle,
     id,
@@ -78,6 +80,7 @@ function PieArcLabelPlot(props) {
           paddingAngle: pA,
           innerRadius: iR,
           outerRadius: oR,
+          arcLabelRadius: aLR,
           cornerRadius: cR
         } = _ref,
         style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
@@ -87,6 +90,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -111,6 +115,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    * The minimal angle required to display the arc label.
    */
   arcLabelMinAngle: _propTypes.default.number,
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: _propTypes.default.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -132,6 +141,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   faded: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -143,6 +153,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -161,7 +172,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   innerRadius: _propTypes.default.number,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: _propTypes.default.number.isRequired,
   /**

package/PieChart/PieArcPlot.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { PieArcProps } from './PieArc';
-import { DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
-import { DefaultizedProps } from '../models/helpers';
+import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from '../models/seriesType/pie';
 export interface PieArcPlotSlots {
     pieArc?: React.JSXElementConstructor<PieArcProps>;
 }
 export interface PieArcPlotSlotProps {
     pieArc?: Partial<PieArcProps>;
 }
-export interface PieArcPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
+export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope'>, ComputedPieRadius {
     /**
      * Overridable component slots.
      * @default {}

package/PieChart/PieArcPlot.js

@@ -15,7 +15,7 @@ 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"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+  _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; }
 function PieArcPlot(props) {
@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: _propTypes.default.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -117,6 +122,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   faded: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -128,6 +134,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   highlighted: _propTypes.default.shape({
     additionalRadius: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.number,
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
     innerRadius: _propTypes.default.number,
@@ -153,7 +160,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   onClick: _propTypes.default.func,
   /**
    * The radius between circle center and the end of the arc.
-   * @default R_max The maximal radius that fit into the drawing area.
    */
   outerRadius: _propTypes.default.number.isRequired,
   /**

package/PieChart/PieChart.js

@@ -246,10 +246,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
     arcLabel: _propTypes.default.oneOfType([_propTypes.default.oneOf(['formattedValue', 'label', 'value']), _propTypes.default.func]),
     arcLabelMinAngle: _propTypes.default.number,
+    arcLabelRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     color: _propTypes.default.string,
     cornerRadius: _propTypes.default.number,
-    cx: _propTypes.default.number,
-    cy: _propTypes.default.number,
+    cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     data: _propTypes.default.arrayOf(_propTypes.default.shape({
       color: _propTypes.default.string,
       id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -259,6 +260,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: _propTypes.default.number,
     faded: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
@@ -267,6 +269,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     }),
     highlighted: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      arcLabelRadius: _propTypes.default.number,
       color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
@@ -278,8 +281,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
     }),
     id: _propTypes.default.string,
-    innerRadius: _propTypes.default.number,
-    outerRadius: _propTypes.default.number,
+    innerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     paddingAngle: _propTypes.default.number,
     sortingValues: _propTypes.default.oneOfType([_propTypes.default.oneOf(['asc', 'desc', 'none']), _propTypes.default.func]),
     startAngle: _propTypes.default.number,