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

package/legacy/Gauge/GaugeValueArc.js

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

package/legacy/Gauge/GaugeValueText.js

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

package/legacy/Gauge/gaugeClasses.js

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

package/legacy/Gauge/index.js

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

package/legacy/Gauge/utils.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+function deg2rad(angle) {
+  return Math.PI * angle / 180;
+}
+function getPoint(angle) {
+  var radAngle = deg2rad(angle);
+  return [Math.sin(radAngle), -Math.cos(radAngle)];
+}
+
+/**
+ * Retruns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export function getArcRatios(startAngle, endAngle) {
+  // Set the start, end and center point.
+  var points = [[0, 0], getPoint(startAngle), getPoint(endAngle)];
+
+  // Add cardinal points included in the arc
+  var minAngle = Math.min(startAngle, endAngle);
+  var maxAngle = Math.max(startAngle, endAngle);
+  var initialAngle = Math.floor(minAngle / 90) * 90;
+  for (var step = 1; step <= 4; step += 1) {
+    var cartinalAngle = initialAngle + step * 90;
+    if (cartinalAngle < maxAngle) {
+      points.push(getPoint(cartinalAngle));
+    }
+  }
+  var minX = Math.min.apply(Math, _toConsumableArray(points.map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      x = _ref2[0];
+    return x;
+  })));
+  var maxX = Math.max.apply(Math, _toConsumableArray(points.map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+      x = _ref4[0];
+    return x;
+  })));
+  var minY = Math.min.apply(Math, _toConsumableArray(points.map(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      y = _ref6[1];
+    return y;
+  })));
+  var maxY = Math.max.apply(Math, _toConsumableArray(points.map(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      y = _ref8[1];
+    return y;
+  })));
+  return {
+    cx: -minX / (maxX - minX),
+    cy: -minY / (maxY - minY),
+    minX: minX,
+    maxX: maxX,
+    minY: minY,
+    maxY: maxY
+  };
+}
+export function getAvailableRadius(cx, cy, width, height, _ref9) {
+  var minX = _ref9.minX,
+    maxX = _ref9.maxX,
+    minY = _ref9.minY,
+    maxY = _ref9.maxY;
+  return Math.min.apply(Math, _toConsumableArray([{
+    ratio: Math.abs(minX),
+    space: cx
+  }, {
+    ratio: Math.abs(maxX),
+    space: width - cx
+  }, {
+    ratio: Math.abs(minY),
+    space: cy
+  }, {
+    ratio: Math.abs(maxY),
+    space: height - cy
+  }].map(function (_ref10) {
+    var ratio = _ref10.ratio,
+      space = _ref10.space;
+    if (ratio < 0.00001) {
+      return Infinity;
+    }
+    return space / ratio;
+  })));
+}

package/legacy/LineChart/LineChart.js

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

package/legacy/PieChart/PieArc.js

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

package/legacy/PieChart/PieArcLabelPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+var _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -26,27 +26,27 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 }
 function PieArcLabelPlot(props) {
   var _slots$pieArcLabel;
-  var slots = props.slots,
-    slotProps = props.slotProps,
-    innerRadius = props.innerRadius,
-    outerRadius = props.outerRadius,
+  var arcLabel = props.arcLabel,
+    _props$arcLabelMinAng = props.arcLabelMinAngle,
+    arcLabelMinAngle = _props$arcLabelMinAng === void 0 ? 0 : _props$arcLabelMinAng,
     arcLabelRadius = props.arcLabelRadius,
     _props$cornerRadius = props.cornerRadius,
     cornerRadius = _props$cornerRadius === void 0 ? 0 : _props$cornerRadius,
-    _props$paddingAngle = props.paddingAngle,
-    paddingAngle = _props$paddingAngle === void 0 ? 0 : _props$paddingAngle,
-    id = props.id,
-    highlightScope = props.highlightScope,
-    highlighted = props.highlighted,
+    data = props.data,
     _props$faded = props.faded,
     faded = _props$faded === void 0 ? {
       additionalRadius: -5
     } : _props$faded,
-    data = props.data,
-    arcLabel = props.arcLabel,
-    _props$arcLabelMinAng = props.arcLabelMinAngle,
-    arcLabelMinAngle = _props$arcLabelMinAng === void 0 ? 0 : _props$arcLabelMinAng,
+    highlighted = props.highlighted,
+    highlightScope = props.highlightScope,
+    id = props.id,
+    innerRadius = props.innerRadius,
+    outerRadius = props.outerRadius,
+    _props$paddingAngle = props.paddingAngle,
+    paddingAngle = _props$paddingAngle === void 0 ? 0 : _props$paddingAngle,
     skipAnimation = props.skipAnimation,
+    slotProps = props.slotProps,
+    slots = props.slots,
     other = _objectWithoutProperties(props, _excluded);
   var transformedData = useTransformData({
     innerRadius: innerRadius,

package/legacy/PieChart/PieChart.js

@@ -113,6 +113,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -195,6 +200,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
+   * The props of the legend.
+   * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
    * @deprecated Consider using `slotProps.legend` instead.
    */
   legend: PropTypes.shape({
@@ -220,6 +227,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
   onItemClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -248,6 +258,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the pie chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -259,9 +272,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default {}
    */
   slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,

package/legacy/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,83 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerWindow from '@mui/utils/ownerWindow';
 import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
+import { useChartContainerDimensions } from './useChartContainerDimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
-var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
-  var rootRef = React.useRef(null);
-  var displayError = React.useRef(false);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    height = _React$useState4[0],
-    setHeight = _React$useState4[1];
-
-  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
-  var computeSize = React.useCallback(function () {
-    var mainEl = rootRef == null ? void 0 : rootRef.current;
-    if (!mainEl) {
-      return;
-    }
-    var win = ownerWindow(mainEl);
-    var computedStyle = win.getComputedStyle(mainEl);
-    var newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
-    var newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
-    setWidth(newWidth);
-    setHeight(newHeight);
-  }, []);
-  React.useEffect(function () {
-    // Ensure the error detection occurs after the first rendering.
-    displayError.current = true;
-  }, []);
-  useEnhancedEffect(function () {
-    if (inWidth !== undefined && inHeight !== undefined) {
-      return function () {};
-    }
-    computeSize();
-    var elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return function () {};
-    }
-    var animationFrame;
-    var observer = new ResizeObserver(function () {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(function () {
-        computeSize();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return function () {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [computeSize, inHeight, inWidth]);
-  if (process.env.NODE_ENV !== 'production') {
-    if (displayError.current && inWidth === undefined && width === 0) {
-      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 X Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
-      displayError.current = false;
-    }
-  }
-  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
-};
 var ResizableContainer = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container'
@@ -104,11 +34,11 @@ var ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Responsive
   var inWidth = props.width,
     inHeight = props.height,
     other = _objectWithoutProperties(props, _excluded);
-  var _useChartDimensions = useChartDimensions(inWidth, inHeight),
-    _useChartDimensions2 = _slicedToArray(_useChartDimensions, 3),
-    containerRef = _useChartDimensions2[0],
-    width = _useChartDimensions2[1],
-    height = _useChartDimensions2[2];
+  var _useChartContainerDim = useChartContainerDimensions(inWidth, inHeight),
+    _useChartContainerDim2 = _slicedToArray(_useChartContainerDim, 3),
+    containerRef = _useChartContainerDim2[0],
+    width = _useChartContainerDim2[1],
+    height = _useChartContainerDim2[2];
   return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
     ownerState: {

package/legacy/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+export var useChartContainerDimensions = function useChartContainerDimensions(inWidth, inHeight) {
+  var rootRef = React.useRef(null);
+  var displayError = React.useRef(false);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    height = _React$useState4[0],
+    setHeight = _React$useState4[1];
+
+  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
+  var computeSize = React.useCallback(function () {
+    var mainEl = rootRef == null ? void 0 : rootRef.current;
+    if (!mainEl) {
+      return;
+    }
+    var win = ownerWindow(mainEl);
+    var computedStyle = win.getComputedStyle(mainEl);
+    var newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    var newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, []);
+  React.useEffect(function () {
+    // Ensure the error detection occurs after the first rendering.
+    displayError.current = true;
+  }, []);
+  useEnhancedEffect(function () {
+    if (inWidth !== undefined && inHeight !== undefined) {
+      return function () {};
+    }
+    computeSize();
+    var elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return function () {};
+    }
+    var animationFrame;
+    var observer = new ResizeObserver(function () {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(function () {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return function () {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, inHeight, inWidth]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (displayError.current && inWidth === undefined && width === 0) {
+      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 X Charts: ChartContainer does not have `height` prop, and its container has no `height` defined.");
+      displayError.current = false;
+    }
+  }
+  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
+};