@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.5

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/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type ChartsVoronoiHandlerProps = {
+    /**
+     * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+     * If `undefined`, the radius is assumed to be infinite.
+     * @default undefined
+     */
+    voronoiMaxRadius?: number | undefined;
+};
+declare function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps): React.JSX.Element;
+declare namespace ChartsVoronoiHandler {
+    var propTypes: any;
+}
+export { ChartsVoronoiHandler };

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsVoronoiHandler = ChartsVoronoiHandler;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Delaunay = require("d3-delaunay");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _useScale = require("../hooks/useScale");
+var _utils = require("../internals/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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 ChartsVoronoiHandler(props) {
+  const {
+    voronoiMaxRadius
+  } = props;
+  const svgRef = React.useContext(_DrawingProvider.SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const {
+    series,
+    seriesOrder
+  } = React.useContext(_SeriesContextProvider.SeriesContext).scatter ?? {};
+  const voronoiRef = React.useRef({});
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  (0, _useEnhancedEffect.default)(() => {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return () => {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    let points = [];
+    seriesOrder.forEach(seriesId => {
+      const {
+        data,
+        xAxisKey,
+        yAxisKey
+      } = series[seriesId];
+      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+      const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+      const seriesPoints = data.flatMap(({
+        x,
+        y
+      }) => [getXPosition(x), getYPosition(y)]);
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new _d3Delaunay.Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        const seriesId = Object.keys(voronoiRef.current).find(id => {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+          if (dist2 > voronoiMaxRadius ** 2) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId,
+                dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: _propTypes.default.number
+} : void 0;

package/ChartsVoronoiHandler/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';

package/ChartsVoronoiHandler/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsVoronoiHandler = require("./ChartsVoronoiHandler");
+Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsVoronoiHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsVoronoiHandler[key];
+    }
+  });
+});

package/ChartsVoronoiHandler/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsVoronoiHandler/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 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

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

@@ -161,7 +161,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

@@ -153,7 +153,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

@@ -248,8 +248,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     arcLabelMinAngle: _propTypes.default.number,
     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]),
@@ -278,8 +278,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,

package/PieChart/PiePlot.js

@@ -11,6 +11,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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; }
@@ -42,10 +43,6 @@ function PiePlot(props) {
     return null;
   }
   const availableRadius = Math.min(width, height) / 2;
-  const center = {
-    x: left + width / 2,
-    y: top + height / 2
-  };
   const {
     series,
     seriesOrder
@@ -53,22 +50,26 @@ function PiePlot(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlighted,
         faded,
         highlightScope
       } = series[seriesId];
+      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
+      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -84,19 +85,23 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
+      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius ?? availableRadius,