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

package/esm/PieChart/PieArcLabel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
@@ -41,7 +41,7 @@ const PieArcLabelRoot = styled(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;
   }
@@ -49,8 +49,8 @@ const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle,
     padAngle,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius
   });
   if (variable === 'x') {
     return x;
@@ -65,8 +65,7 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -86,8 +85,8 @@ function PieArcLabel(props) {
     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'))
+      x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
     }, style),
     children: formattedArcLabel
   }));

package/esm/PieChart/PieArcLabelPlot.js

@@ -1,7 +1,7 @@
 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"];
+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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -29,8 +29,9 @@ function PieArcLabelPlot(props) {
   const {
       slots,
       slotProps,
-      innerRadius = 0,
+      innerRadius,
       outerRadius,
+      arcLabelRadius,
       cornerRadius = 0,
       paddingAngle = 0,
       id,
@@ -48,6 +49,7 @@ function PieArcLabelPlot(props) {
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     paddingAngle,
     id,
@@ -71,6 +73,7 @@ function PieArcLabelPlot(props) {
           paddingAngle: pA,
           innerRadius: iR,
           outerRadius: oR,
+          arcLabelRadius: aLR,
           cornerRadius: cR
         } = _ref,
         style = _objectWithoutPropertiesLoose(_ref, _excluded2);
@@ -80,6 +83,7 @@ function PieArcLabelPlot(props) {
         paddingAngle: pA,
         innerRadius: iR,
         outerRadius: oR,
+        arcLabelRadius: aLR,
         cornerRadius: cR,
         style: style,
         id: id,
@@ -104,6 +108,11 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    * The minimal angle required to display the arc label.
    */
   arcLabelMinAngle: PropTypes.number,
+  /**
+   * The radius between circle center and the arc label in px.
+   * @default (innerRadius - outerRadius) / 2
+   */
+  arcLabelRadius: PropTypes.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -125,6 +134,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -136,6 +146,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -154,7 +165,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   innerRadius: PropTypes.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.number.isRequired,
   /**

package/esm/PieChart/PieArcPlot.js

@@ -1,7 +1,7 @@
 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"];
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -88,6 +88,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.number,
   /**
    * The radius applied to arc corners (similar to border radius).
    * @default 0
@@ -109,6 +114,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   faded: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -120,6 +126,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   highlighted: PropTypes.shape({
     additionalRadius: PropTypes.number,
+    arcLabelRadius: PropTypes.number,
     color: PropTypes.string,
     cornerRadius: PropTypes.number,
     innerRadius: PropTypes.number,
@@ -145,7 +152,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   onClick: PropTypes.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.number.isRequired,
   /**

package/esm/PieChart/PieChart.js

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

package/esm/PieChart/PiePlot.js

@@ -4,6 +4,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
+import { getPercentageValue } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,10 +35,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
@@ -45,22 +42,26 @@ function PiePlot(props) {
   return /*#__PURE__*/_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 = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          outerRadius: outerRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -76,22 +77,29 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius,
-        outerRadius,
+        innerRadius: innerRadiusParam,
+        outerRadius: outerRadiusParam,
+        arcLabelRadius: arcLabelRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
         data,
-        cx,
-        cy,
+        cx: cxParam,
+        cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
+      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
+      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
       return /*#__PURE__*/_jsx("g", {
-        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
           outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/esm/PieChart/dataTransform/transition.js

@@ -70,6 +70,7 @@ export const defaultLabelTransitionConfig = {
   from: ({
     innerRadius,
     outerRadius,
+    arcLabelRadius,
     cornerRadius,
     startAngle,
     endAngle,
@@ -78,6 +79,7 @@ export const defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius: (innerRadius + outerRadius) / 2,
     cornerRadius,
+    arcLabelRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     paddingAngle,
@@ -90,6 +92,7 @@ export const defaultLabelTransitionConfig = {
   }) => ({
     innerRadius,
     outerRadius: innerRadius,
+    arcLabelRadius: innerRadius,
     startAngle: (startAngle + endAngle) / 2,
     endAngle: (startAngle + endAngle) / 2,
     opacity: 0
@@ -98,12 +101,14 @@ export const defaultLabelTransitionConfig = {
     innerRadius,
     outerRadius,
     startAngle,
-    endAngle
+    endAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
     startAngle,
     endAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   update: ({
@@ -112,7 +117,8 @@ export const defaultLabelTransitionConfig = {
     cornerRadius,
     startAngle,
     endAngle,
-    paddingAngle
+    paddingAngle,
+    arcLabelRadius
   }) => ({
     innerRadius,
     outerRadius,
@@ -120,6 +126,7 @@ export const defaultLabelTransitionConfig = {
     startAngle,
     endAngle,
     paddingAngle,
+    arcLabelRadius,
     opacity: 1
   }),
   config: {

package/esm/PieChart/dataTransform/useTransformData.js

@@ -11,6 +11,7 @@ export function useTransformData(series) {
     highlighted,
     paddingAngle: basePaddingAngle = 0,
     innerRadius: baseInnerRadius = 0,
+    arcLabelRadius: baseArcLabelRadius,
     outerRadius: baseOuterRadius,
     cornerRadius: baseCornerRadius = 0
   } = series;
@@ -34,26 +35,28 @@ export function useTransformData(series) {
     };
   }, [highlightScope, highlightedItem, seriesId]);
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    var _attibuesOverride$pad, _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+    var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
     const {
       isHighlighted,
       isFaded
     } = getHighlightStatus(itemIndex);
-    const attibuesOverride = _extends({
+    const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, Math.PI * ((_attibuesOverride$pad = attibuesOverride.paddingAngle) != null ? _attibuesOverride$pad : basePaddingAngle) / 180);
-    const innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
-    const outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
-    const cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
-    return _extends({}, item, attibuesOverride, {
+    const paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
+    const outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
+    const cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
+    const arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
+    return _extends({}, item, attributesOverride, {
       isFaded,
       isHighlighted,
       paddingAngle,
       innerRadius,
       outerRadius,
-      cornerRadius
+      cornerRadius,
+      arcLabelRadius
     });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, getHighlightStatus, highlighted]);
   return dataWithHighlight;
 }

package/esm/ResponsiveChartContainer/index.js

@@ -60,11 +60,11 @@ const useChartDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI: Charts does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI-X-Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI: Charts does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI-X-Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/esm/context/CartesianContextProvider.js

@@ -52,7 +52,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
@@ -64,7 +64,7 @@ function CartesianContextProvider({
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/esm/context/SeriesContextProvider.js

@@ -40,7 +40,7 @@ const formatSeries = (series, colors, dataset) => {
       };
     }
     if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
-      throw new Error(`MUI: series' id "${id}" is not unique`);
+      throw new Error(`MUI-X-Charts: series' id "${id}" is not unique`);
     }
     seriesGroups[type].series[id] = _extends({
       id

package/esm/index.js

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';

package/esm/internals/getWordsByLines.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getStringSize } from './domUtils';
+export function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => _extends({
+    text: subText
+  }, needsComputation ? getStringSize(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}

package/esm/internals/utils.js

@@ -13,4 +13,33 @@ export function getSVGPoint(svg, event) {
   pt.x = event.clientX;
   pt.y = event.clientY;
   return pt.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    const val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.4
+ * @mui/x-charts v7.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
     }
   });
 });
+var _ChartsText = require("./ChartsText");
+Object.keys(_ChartsText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsText[key];
+    }
+  });
+});
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -7,8 +7,9 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         id?: string | number | undefined;
     }[];
     type: "pie";
-    innerRadius?: number | undefined;
-    outerRadius?: number | undefined;
+    innerRadius?: string | number | undefined;
+    outerRadius?: string | number | undefined;
+    arcLabelRadius?: string | number | undefined;
     cornerRadius?: number | undefined;
     startAngle?: number | undefined;
     endAngle?: number | undefined;
@@ -16,14 +17,15 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
     arcLabel?: "label" | "value" | "formattedValue" | ((item: import("../models/seriesType").DefaultizedPieValueType) => string) | undefined;
     arcLabelMinAngle?: number | undefined;
-    cx?: number | undefined;
-    cy?: number | undefined;
+    cx?: string | number | undefined;
+    cy?: string | number | undefined;
     highlighted?: {
         additionalRadius?: number | undefined;
         innerRadius?: number | undefined;
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         paddingAngle?: number | undefined;
+        arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
     faded?: {
@@ -32,6 +34,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         paddingAngle?: number | undefined;
+        arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
     id?: string | undefined;

package/internals/{components/ChartsText.d.ts → getWordsByLines.d.ts}

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
 export interface ChartsTextStyle extends React.CSSProperties {
     angle?: number;
@@ -8,7 +8,7 @@ export interface ChartsTextStyle extends React.CSSProperties {
      */
     dominantBaseline?: ChartsTextBaseline;
 }
-interface GetWordsByLinesParams {
+export interface GetWordsByLinesParams {
     /**
      * Text displayed.
      */
@@ -23,13 +23,4 @@ interface GetWordsByLinesParams {
      */
     needsComputation?: boolean;
 }
-export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
-    /**
-     * Height of a text line (in `em`).
-     */
-    lineHeight?: number;
-    ownerState?: any;
-}
 export declare function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams): any[];
-export declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
-export {};

package/internals/getWordsByLines.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWordsByLines = getWordsByLines;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _domUtils = require("./domUtils");
+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
+  }));
+}

package/internals/utils.d.ts

@@ -10,4 +10,11 @@ export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U,
  * @param event The mouseEvent to transform
  */
 export declare function getSVGPoint(svg: SVGSVGElement, event: MouseEvent): DOMPoint;
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export declare function getPercentageValue(value: number | string, refValue: number): number;
 export {};