@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSeries = require("../hooks/useSeries");
 var _hooks = require("../hooks");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
@@ -22,11 +21,13 @@ function ChartsOnAxisClickHandler(props) {
   const series = (0, _useSeries.useSeries)();
   const store = (0, _useStore.useStore)();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/node/ChartsSurface/ChartsSurface.js

@@ -15,8 +15,10 @@ var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useAxisEvents = require("../hooks/useAxisEvents");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _hooks = require("../hooks");
-var _SizeProvider = require("../context/SizeProvider");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
@@ -29,7 +31,6 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
-  flexGrow: 1,
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
@@ -54,22 +55,17 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
  * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
  */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const store = (0, _useStore.useStore)();
   const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = (0, _hooks.useDrawingArea)();
+    width: svgWidth,
+    height: svgHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartContainerSize);
   const {
-    hasIntrinsicSize,
-    svgRef: containerRef,
-    inHeight,
-    inWidth
-  } = (0, _SizeProvider.useSize)();
-  const svgRef = (0, _hooks.useSvgRef)();
-  const handleRef = (0, _useForkRef.default)(containerRef, svgRef, ref);
+    width: propsWidth,
+    height: propsHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const handleRef = (0, _useForkRef.default)(svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -82,21 +78,14 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const svgWidth = width + left + right;
-  const svgHeight = height + top + bottom;
-  const svgView = {
-    width: svgWidth,
-    height: svgHeight,
-    x: 0,
-    y: 0
-  };
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
     ownerState: {
-      width: inWidth,
-      height: inHeight
+      width: propsWidth,
+      height: propsHeight
     },
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
     ref: handleRef,

package/node/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -15,6 +15,7 @@ var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _useAxisTooltip = require("./useAxisTooltip");
 var _hooks = require("../hooks");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
   const {
@@ -56,7 +57,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -65,7 +67,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
               className: (0, _clsx.default)(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })

package/node/ChartsTooltip/ChartsItemTooltipContent.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useItemTooltip = require("./useItemTooltip");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsItemTooltipContent(props) {
   const {
@@ -27,7 +28,8 @@ function ChartsItemTooltipContent(props) {
   const {
     color,
     label,
-    formattedValue
+    formattedValue,
+    markType
   } = tooltipData;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
@@ -39,7 +41,8 @@ function ChartsItemTooltipContent(props) {
           className: classes.row,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.markCell, classes.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes.mark
             })

package/node/ChartsTooltip/ChartsTooltipTable.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
+exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipCell = void 0;
 var _styles = require("@mui/material/styles");
-var _createStyled = require("@mui/system/createStyled");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -88,23 +87,4 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
   'td:last-of-type&': {
     paddingRight: theme.spacing(1.5)
   }
-}));
-
-/**
- * @ignore - internal component.
- */
-const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  background: color,
-  boxSizing: 'content-box'
 }));

package/node/ChartsTooltip/useAxisTooltip.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAxisTooltip = useAxisTooltip;
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
@@ -24,13 +23,15 @@ function useAxisTooltip() {
   const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
-    xAxis,
+    xAxis
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   if (axisData === null) {
     return null;
@@ -68,12 +69,15 @@ function useAxisTooltip() {
           color,
           value,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
         };
       }
       return undefined;
     });
-  }).filter(item => item != null);
+  }).filter(function truthy(item) {
+    return Boolean(item);
+  });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'

package/node/ChartsTooltip/useItemTooltip.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useItemTooltip = useItemTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
+var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 function useItemTooltip() {
   const store = (0, _useStore.useStore)();
@@ -21,14 +21,16 @@ function useItemTooltip() {
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
@@ -44,7 +46,7 @@ function useItemTooltip() {
     const value = (0, _extends2.default)({}, point, {
       label
     });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
+    const formattedValue = itemSeries.valueFormatter(value, {
       dataIndex: item.dataIndex
     });
     return {
@@ -52,12 +54,13 @@ function useItemTooltip() {
       color: getColor(item.dataIndex),
       label,
       value,
-      formattedValue
+      formattedValue,
+      markType: point.labelMarkType ?? itemSeries.labelMarkType
     };
   }
   const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
   const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
+  const formattedValue = itemSeries.valueFormatter(value, {
     dataIndex: item.dataIndex
   });
   return {
@@ -65,6 +68,7 @@ function useItemTooltip() {
     color: getColor(item.dataIndex),
     label,
     value,
-    formattedValue
+    formattedValue,
+    markType: itemSeries.labelMarkType
   };
 }

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -12,27 +12,34 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
 var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
-var _hooks = require("../hooks");
-var _context = require("../context");
+var _HighlightedProvider = require("../context/HighlightedProvider");
 var _useSeries = require("../hooks/useSeries");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsVoronoiHandler(props) {
   const {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = (0, _hooks.useSvgRef)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const store = (0, _useStore.useStore)();
   const {
     series,
@@ -44,7 +51,7 @@ function ChartsVoronoiHandler(props) {
   const {
     setHighlighted,
     clearHighlighted
-  } = (0, _context.useHighlighted)();
+  } = (0, _HighlightedProvider.useHighlighted)();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -86,7 +93,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -106,7 +113,7 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new _d3Delaunay.Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
     if (svgRef.current === null) {
       return undefined;
@@ -115,7 +122,7 @@ function ChartsVoronoiHandler(props) {
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -229,7 +236,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});

package/node/ChartsXAxis/ChartsXAxis.js

@@ -14,7 +14,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -25,6 +24,8 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _getWordsByLines = require("../internals/getWordsByLines");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber", "reverse"];
 const useUtilityClasses = ownerState => {
@@ -121,9 +122,9 @@ const defaultProps = {
  */
 function ChartsXAxis(inProps) {
   const {
-    xAxisIds,
-    xAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,
@@ -162,9 +163,11 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -238,13 +241,13 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = isPointInside({
+      const showTick = instance.isPointInside({
         x: offset,
         y: -1
       }, {
         direction: 'x'
       });
-      const showTickLabel = isPointInside({
+      const showTickLabel = instance.isPointInside({
         x: offset + xTickLabel,
         y: -1
       }, {

package/node/ChartsYAxis/ChartsYAxis.js

@@ -15,7 +15,6 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -23,6 +22,8 @@ var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -65,7 +66,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
@@ -99,12 +100,14 @@ function ChartsYAxis(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({
@@ -185,7 +188,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = isPointInside({
+      const showLabel = instance.isPointInside({
         x: -1,
         y: offset
       }, {

package/node/Gauge/Gauge.js

@@ -95,6 +95,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -106,7 +111,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/node/Gauge/GaugeContainer.js

@@ -13,9 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
-var _SizeProvider = require("../context/SizeProvider");
 var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
@@ -47,44 +45,42 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
+    pluginParams: {
       width: inWidth,
       height: inHeight,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
-        margin: (0, _extends2.default)({
-          left: 10,
-          right: 10,
-          top: 10,
-          bottom: 10
-        }, margin),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
-          value: value,
-          valueMin: valueMin,
-          valueMax: valueMax,
-          startAngle: startAngle,
-          endAngle: endAngle,
-          outerRadius: outerRadius,
-          innerRadius: innerRadius,
-          cornerRadius: cornerRadius,
-          cx: cx,
-          cy: cy,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
-            title: title,
-            desc: desc,
-            disableAxisListener: true,
-            role: "meter",
-            "aria-valuenow": value === null ? undefined : value,
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax
-          }, other, {
-            ref: ref,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
-              "aria-hidden": "true",
-              children: children
-            })
-          }))
+      margin: (0, _extends2.default)({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, margin)
+    },
+    plugins: [],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
+      value: value,
+      valueMin: valueMin,
+      valueMax: valueMax,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      cornerRadius: cornerRadius,
+      cx: cx,
+      cy: cy,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+        title: title,
+        desc: desc,
+        role: "meter",
+        "aria-valuenow": value === null ? undefined : value,
+        "aria-valuemin": valueMin,
+        "aria-valuemax": valueMax
+      }, other, {
+        ref: ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
+          "aria-hidden": "true",
+          children: children
         })
-      })
+      }))
     })
   });
 });
@@ -129,6 +125,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -140,7 +141,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,

package/node/LineChart/AnimatedArea.js

@@ -35,7 +35,7 @@ function AnimatedArea(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
   const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {
@@ -51,6 +51,7 @@ function AnimatedArea(props) {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
     children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
+      // @ts-expect-error
       d: style.value.to(interpolator),
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter: