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

package/legacy/ChartsSurface.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -21,6 +21,8 @@ var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props,
     _props$disableAxisLis = props.disableAxisListener,
     disableAxisListener = _props$disableAxisLis === void 0 ? false : _props$disableAxisLis,
     className = props.className,
+    title = props.title,
+    desc = props.desc,
     other = _objectWithoutProperties(props, _excluded);
   var svgView = _extends({
     width: width,
@@ -36,9 +38,9 @@ var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props,
     ref: ref
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
-      children: props.title
+      children: title
     }), /*#__PURE__*/_jsx("desc", {
-      children: props.desc
+      children: desc
     }), children]
   }));
 });

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -37,7 +37,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
     classes: PropTypes.object,
     itemData: PropTypes.shape({
       dataIndex: PropTypes.number,
-      seriesId: PropTypes.string.isRequired,
+      seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
       type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
     }),
     series: PropTypes.object,
@@ -45,7 +45,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   }),
   itemData: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])

package/legacy/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { isCartesianSeries } from './utils';
+import { isCartesianSeries, utcFormatter } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
@@ -18,7 +18,7 @@ function DefaultChartsAxisTooltipContent(props) {
     return null;
   }
   var axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : function (v) {
-    return v.toLocaleString();
+    return axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString();
   };
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,

package/legacy/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -66,7 +66,7 @@ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propType
    */
   itemData: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     type: PropTypes.oneOf(['bar', 'line', 'pie', 'scatter']).isRequired
   }).isRequired,
   /**

package/legacy/ChartsTooltip/utils.js

@@ -94,4 +94,10 @@ export function isCartesianSeriesType(seriesType) {
 }
 export function isCartesianSeries(series) {
   return isCartesianSeriesType(series.type);
+}
+export function utcFormatter(v) {
+  if (v instanceof Date) {
+    return v.toUTCString();
+  }
+  return v.toLocaleString();
 }

package/legacy/ChartsXAxis/ChartsXAxis.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["scale", "tickNumber"];
+var _excluded = ["scale", "tickNumber", "reverse"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
@@ -9,7 +9,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
-import useTicks from '../hooks/useTicks';
+import { useTicks } from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
@@ -34,6 +34,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 function addLabelDimension(xTicks, _ref) {
   var style = _ref.tickLabelStyle,
     tickLabelInterval = _ref.tickLabelInterval,
+    reverse = _ref.reverse,
     isMounted = _ref.isMounted;
   var withDimension = xTicks.map(function (tick) {
     if (!isMounted || tick.formattedValue === undefined) {
@@ -63,8 +64,9 @@ function addLabelDimension(xTicks, _ref) {
   }
 
   // Filter label to avoid overlap
-  var textStart = 0;
-  var textEnd = 0;
+  var currentTextLimit = 0;
+  var previouseTextLimit = 0;
+  var direction = reverse ? -1 : 1;
   return withDimension.map(function (item, labelIndex) {
     var width = item.width,
       offset = item.offset,
@@ -74,15 +76,15 @@ function addLabelDimension(xTicks, _ref) {
     var textPosition = offset + labelOffset;
     var gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
-    textStart = textPosition - gapRatio * distance / 2;
-    if (labelIndex > 0 && textStart < textEnd) {
+    currentTextLimit = textPosition - direction * (gapRatio * distance) / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * previouseTextLimit) {
       // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `textEnd` from being updated.
+      // Notice that the early return prevents `previouseTextLimit` from being updated.
       return _extends({}, item, {
         skipLabel: true
       });
     }
-    textEnd = textPosition + gapRatio * distance / 2;
+    previouseTextLimit = textPosition + direction * (gapRatio * distance) / 2;
     return item;
   });
 }
@@ -114,6 +116,7 @@ function ChartsXAxis(inProps) {
     _React$useContext2$xA = _React$useContext2.xAxis[(_props$axisId = props.axisId) != null ? _props$axisId : xAxisIds[0]],
     xScale = _React$useContext2$xA.scale,
     tickNumber = _React$useContext2$xA.tickNumber,
+    reverse = _React$useContext2$xA.reverse,
     settings = _objectWithoutProperties(_React$useContext2$xA, _excluded);
   var isMounted = useMounted();
   var defaultizedProps = _extends({}, defaultProps, settings, props);
@@ -169,6 +172,7 @@ function ChartsXAxis(inProps) {
   var xTicksWithDimension = addLabelDimension(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval: tickLabelInterval,
+    reverse: reverse,
     isMounted: isMounted
   });
   var labelRefPoint = {
@@ -231,7 +235,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string,
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/legacy/ChartsYAxis/ChartsYAxis.js

@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
-import useTicks from '../hooks/useTicks';
+import { useTicks } from '../hooks/useTicks';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string,
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/legacy/Gauge/Gauge.js

@@ -0,0 +1,146 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "children", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { GaugeContainer } from './GaugeContainer';
+import { GaugeValueArc } from './GaugeValueArc';
+import { GaugeReferenceArc } from './GaugeReferenceArc';
+import { getGaugeUtilityClass } from './gaugeClasses';
+import { GaugeValueText } from './GaugeValueText';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(props) {
+  var classes = props.classes;
+  var slots = {
+    root: ['root'],
+    valueArc: ['valueArc'],
+    referenceArc: ['referenceArc'],
+    valueText: ['valueText']
+  };
+  return composeClasses(slots, getGaugeUtilityClass, classes);
+};
+function Gauge(props) {
+  var text = props.text,
+    children = props.children,
+    propsClasses = props.classes,
+    other = _objectWithoutProperties(props, _excluded);
+  var classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
+      className: classes.referenceArc
+    }), /*#__PURE__*/_jsx(GaugeValueArc, {
+      className: classes.valueArc
+    }), /*#__PURE__*/_jsx(GaugeValueText, {
+      className: classes.valueText,
+      text: text
+    }), children]
+  }));
+}
+process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: PropTypes.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: PropTypes.number,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * 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.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  title: PropTypes.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: PropTypes.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: PropTypes.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: PropTypes.number,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
+  width: PropTypes.number
+} : void 0;
+export { Gauge };

package/legacy/Gauge/GaugeContainer.js

@@ -0,0 +1,215 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useForkRef from '@mui/utils/useForkRef';
+import { styled } from '@mui/material/styles';
+import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
+import { ChartsSurface } from '../ChartsSurface';
+import { DrawingProvider } from '../context/DrawingProvider';
+import { GaugeProvider } from './GaugeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ResizableContainer = styled('div', {
+  name: 'MuiGauge',
+  slot: 'Container'
+})(function (_ref) {
+  var _ownerState$width, _ownerState$height;
+  var ownerState = _ref.ownerState,
+    theme = _ref.theme;
+  return {
+    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
+    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
+    display: 'flex',
+    position: 'relative',
+    flexGrow: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    '&>svg': {
+      width: '100%',
+      height: '100%'
+    },
+    '& text': {
+      fill: (theme.vars || theme).palette.text.primary
+    }
+  };
+});
+var GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
+  var inWidth = props.width,
+    inHeight = props.height,
+    margin = props.margin,
+    title = props.title,
+    desc = props.desc,
+    value = props.value,
+    _props$valueMin = props.valueMin,
+    valueMin = _props$valueMin === void 0 ? 0 : _props$valueMin,
+    _props$valueMax = props.valueMax,
+    valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
+    startAngle = props.startAngle,
+    endAngle = props.endAngle,
+    outerRadius = props.outerRadius,
+    innerRadius = props.innerRadius,
+    cornerRadius = props.cornerRadius,
+    cx = props.cx,
+    cy = props.cy,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  var _useChartContainerDim = useChartContainerDimensions(inWidth, inHeight),
+    _useChartContainerDim2 = _slicedToArray(_useChartContainerDim, 3),
+    containerRef = _useChartContainerDim2[0],
+    width = _useChartContainerDim2[1],
+    height = _useChartContainerDim2[2];
+  var svgRef = React.useRef(null);
+  var handleRef = useForkRef(ref, svgRef);
+  return /*#__PURE__*/_jsx(ResizableContainer, _extends({
+    ref: containerRef,
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    role: "meter",
+    "aria-valuenow": value === null ? undefined : value,
+    "aria-valuemin": valueMin,
+    "aria-valuemax": valueMax
+  }, other, {
+    children: width && height ? /*#__PURE__*/_jsx(DrawingProvider, {
+      width: width,
+      height: height,
+      margin: _extends({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, margin),
+      svgRef: svgRef,
+      children: /*#__PURE__*/_jsx(GaugeProvider, {
+        value: value,
+        valueMin: valueMin,
+        valueMax: valueMax,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        outerRadius: outerRadius,
+        innerRadius: innerRadius,
+        cornerRadius: cornerRadius,
+        cx: cx,
+        cy: cy,
+        children: /*#__PURE__*/_jsx(ChartsSurface, {
+          width: width,
+          height: height,
+          ref: handleRef,
+          title: title,
+          desc: desc,
+          disableAxisListener: true,
+          "aria-hidden": "true",
+          children: children
+        })
+      })
+    }) : null
+  }));
+});
+process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: PropTypes.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: PropTypes.number,
+  /**
+   * The radius between circle center and the begining of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * 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.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: PropTypes.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: PropTypes.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: PropTypes.number,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
+  width: PropTypes.number
+} : void 0;
+export { GaugeContainer };

package/legacy/Gauge/GaugeProvider.js

@@ -0,0 +1,87 @@
+// @ignore - do not document.
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+import { getPercentageValue } from '../internals/utils';
+import { getArcRatios, getAvailableRadius } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GaugeContext = /*#__PURE__*/React.createContext({
+  value: null,
+  valueMin: 0,
+  valueMax: 0,
+  startAngle: 0,
+  endAngle: 0,
+  innerRadius: 0,
+  outerRadius: 0,
+  cornerRadius: 0,
+  cx: 0,
+  cy: 0,
+  maxRadius: 0,
+  valueAngle: null
+});
+export function GaugeProvider(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? null : _props$value,
+    _props$valueMin = props.valueMin,
+    valueMin = _props$valueMin === void 0 ? 0 : _props$valueMin,
+    _props$valueMax = props.valueMax,
+    valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
+    _props$startAngle = props.startAngle,
+    startAngle = _props$startAngle === void 0 ? 0 : _props$startAngle,
+    _props$endAngle = props.endAngle,
+    endAngle = _props$endAngle === void 0 ? 360 : _props$endAngle,
+    outerRadiusParam = props.outerRadius,
+    innerRadiusParam = props.innerRadius,
+    cornerRadiusParam = props.cornerRadius,
+    cxParam = props.cx,
+    cyParam = props.cy,
+    children = props.children;
+  var _React$useContext = React.useContext(DrawingContext),
+    width = _React$useContext.width,
+    height = _React$useContext.height,
+    top = _React$useContext.top,
+    left = _React$useContext.left;
+  var ratios = getArcRatios(startAngle, endAngle);
+  var innerCx = cxParam ? getPercentageValue(cxParam, width) : ratios.cx * width;
+  var innerCy = cyParam ? getPercentageValue(cyParam, height) : ratios.cy * height;
+  var cx = left + innerCx;
+  var cy = top + innerCy;
+  var maxRadius = getAvailableRadius(innerCx, innerCy, width, height, ratios);
+
+  // If the center is not defined, after computation of the available radius, udpate the center to use the remaining space.
+  if (cxParam === undefined) {
+    var usedWidth = maxRadius * (ratios.maxX - ratios.minX);
+    cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;
+  }
+  if (cyParam === undefined) {
+    var usedHeight = maxRadius * (ratios.maxY - ratios.minY);
+    cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
+  }
+  var outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : maxRadius, maxRadius);
+  var innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : '80%', maxRadius);
+  var cornerRadius = getPercentageValue(cornerRadiusParam != null ? cornerRadiusParam : 0, outerRadius - innerRadius);
+  var contextValue = React.useMemo(function () {
+    var startAngleRad = Math.PI * startAngle / 180;
+    var endAngleRad = Math.PI * endAngle / 180;
+    return {
+      value: value,
+      valueMin: valueMin,
+      valueMax: valueMax,
+      startAngle: startAngleRad,
+      endAngle: endAngleRad,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      cornerRadius: cornerRadius,
+      cx: cx,
+      cy: cy,
+      maxRadius: maxRadius,
+      valueAngle: value === null ? null : startAngleRad + (endAngleRad - startAngleRad) * (value - valueMin) / (valueMax - valueMin)
+    };
+  }, [value, valueMin, valueMax, startAngle, endAngle, outerRadius, innerRadius, cornerRadius, cx, cy, maxRadius]);
+  return /*#__PURE__*/_jsx(GaugeContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export function useGaugeState() {
+  return React.useContext(GaugeContext);
+}

package/legacy/Gauge/GaugeReferenceArc.js

@@ -0,0 +1,37 @@
+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.divider
+  };
+});
+export function GaugeReferenceArc(props) {
+  var _useGaugeState = useGaugeState(),
+    startAngle = _useGaugeState.startAngle,
+    endAngle = _useGaugeState.endAngle,
+    outerRadius = _useGaugeState.outerRadius,
+    innerRadius = _useGaugeState.innerRadius,
+    cornerRadius = _useGaugeState.cornerRadius,
+    cx = _useGaugeState.cx,
+    cy = _useGaugeState.cy;
+  return /*#__PURE__*/_jsx(StyledPath, _extends({
+    transform: "translate(".concat(cx, ", ").concat(cy, ")"),
+    d: d3Arc().cornerRadius(cornerRadius)({
+      startAngle: startAngle,
+      endAngle: endAngle,
+      innerRadius: innerRadius,
+      outerRadius: outerRadius
+    })
+  }, props));
+}