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

package/Gauge/Gauge.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gauge = Gauge;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _GaugeContainer = require("./GaugeContainer");
+var _GaugeValueArc = require("./GaugeValueArc");
+var _GaugeReferenceArc = require("./GaugeReferenceArc");
+var _gaugeClasses = require("./gaugeClasses");
+var _GaugeValueText = require("./GaugeValueText");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["text", "children", "classes"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    valueArc: ['valueArc'],
+    referenceArc: ['referenceArc'],
+    valueText: ['valueText']
+  };
+  return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
+};
+function Gauge(props) {
+  const {
+      text,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GaugeContainer.GaugeContainer, (0, _extends2.default)({}, other, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
+      className: classes.referenceArc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
+      className: classes.valueArc
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.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.default.node,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  desc: _propTypes.default.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.default.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: _propTypes.default.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  title: _propTypes.default.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: _propTypes.default.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: _propTypes.default.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: _propTypes.default.number,
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
+  width: _propTypes.default.number
+} : void 0;

package/Gauge/GaugeContainer.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ChartsSurfaceProps } from '../ChartsSurface';
+import { DrawingProviderProps } from '../context/DrawingProvider';
+import { GaugeProviderProps } from './GaugeProvider';
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Omit<DrawingProviderProps, 'svgRef' | 'width' | 'height' | 'children'>, Omit<GaugeProviderProps, 'children'> {
+    /**
+     * The width of the chart in px. If not defined, it takes the width of the parent element.
+     * @default undefined
+     */
+    width?: number;
+    /**
+     * The height of the chart in px. If not defined, it takes the height of the parent element.
+     * @default undefined
+     */
+    height?: number;
+    children?: React.ReactNode;
+}
+declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<unknown>>;
+export { GaugeContainer };

package/Gauge/GaugeContainer.js

@@ -0,0 +1,216 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GaugeContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _styles = require("@mui/material/styles");
+var _useChartContainerDimensions = require("../ResponsiveChartContainer/useChartContainerDimensions");
+var _ChartsSurface = require("../ChartsSurface");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _GaugeProvider = require("./GaugeProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ResizableContainer = (0, _styles.styled)('div', {
+  name: 'MuiGauge',
+  slot: 'Container'
+})(({
+  ownerState,
+  theme
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: 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
+  }
+}));
+const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
+  const {
+      width: inWidth,
+      height: inHeight,
+      margin,
+      title,
+      desc,
+      value,
+      valueMin = 0,
+      valueMax = 100,
+      startAngle,
+      endAngle,
+      outerRadius,
+      innerRadius,
+      cornerRadius,
+      cx,
+      cy,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
+  const svgRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
+    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__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
+      width: width,
+      height: height,
+      margin: (0, _extends2.default)({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, margin),
+      svgRef: svgRef,
+      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, {
+          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.default.node,
+  className: _propTypes.default.string,
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  desc: _propTypes.default.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.default.bool,
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle: _propTypes.default.number,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
+  height: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.string,
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value: _propTypes.default.number,
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax: _propTypes.default.number,
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin: _propTypes.default.number,
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
+  width: _propTypes.default.number
+} : void 0;

package/Gauge/GaugeProvider.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+interface CircularConfig {
+    /**
+     * The start angle (deg).
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * The end angle (deg).
+     * @default 360
+     */
+    endAngle?: 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?: number | string;
+    /**
+     * 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?: number | string;
+    /**
+     * The radius applied to arc corners (similar to border radius).
+     * Set it to '50%' to get rounded arc.
+     * @default 0
+     */
+    cornerRadius?: number | 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?: number | 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?: number | string;
+}
+interface ProcessedCircularConfig {
+    /**
+     * The start angle (rad).
+     */
+    startAngle: number;
+    /**
+     * The end angle (rad).
+     */
+    endAngle: number;
+    /**
+     * The radius between circle center and the begining of the arc.
+     */
+    innerRadius: number;
+    /**
+     * The radius between circle center and the end of the arc.
+     */
+    outerRadius: number;
+    /**
+     * The radius applied to arc corners (similar to border radius).
+     */
+    cornerRadius: number;
+    /**
+     * The x coordinate of the pie center.
+     */
+    cx: number;
+    /**
+     * The y coordinate of the pie center.
+     */
+    cy: number;
+}
+interface GaugeConfig {
+    /**
+     * The value of the gauge.
+     * Set to `null` to not display a value.
+     */
+    value?: number | null;
+    /**
+     * The minimal value of the gauge.
+     * @default 0
+     */
+    valueMin?: number;
+    /**
+     * The maximal value of the gauge.
+     * @default 100
+     */
+    valueMax?: number;
+}
+export declare const GaugeContext: React.Context<Required<GaugeConfig> & ProcessedCircularConfig & {
+    /**
+     * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+     */
+    maxRadius: number;
+    /**
+     * The angle (rad) associated to the current value.
+     */
+    valueAngle: null | number;
+}>;
+export interface GaugeProviderProps extends GaugeConfig, CircularConfig {
+    children: React.ReactNode;
+}
+export declare function GaugeProvider(props: GaugeProviderProps): React.JSX.Element;
+export declare function useGaugeState(): Required<GaugeConfig> & ProcessedCircularConfig & {
+    /**
+     * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+     */
+    maxRadius: number;
+    /**
+     * The angle (rad) associated to the current value.
+     */
+    valueAngle: number | null;
+};
+export {};

package/Gauge/GaugeProvider.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GaugeContext = void 0;
+exports.GaugeProvider = GaugeProvider;
+exports.useGaugeState = useGaugeState;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+var _utils = require("../internals/utils");
+var _utils2 = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// @ignore - do not document.
+
+const GaugeContext = exports.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
+});
+function GaugeProvider(props) {
+  const {
+    value = null,
+    valueMin = 0,
+    valueMax = 100,
+    startAngle = 0,
+    endAngle = 360,
+    outerRadius: outerRadiusParam,
+    innerRadius: innerRadiusParam,
+    cornerRadius: cornerRadiusParam,
+    cx: cxParam,
+    cy: cyParam,
+    children
+  } = props;
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  const ratios = (0, _utils2.getArcRatios)(startAngle, endAngle);
+  const innerCx = cxParam ? (0, _utils.getPercentageValue)(cxParam, width) : ratios.cx * width;
+  const innerCy = cyParam ? (0, _utils.getPercentageValue)(cyParam, height) : ratios.cy * height;
+  let cx = left + innerCx;
+  let cy = top + innerCy;
+  const maxRadius = (0, _utils2.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) {
+    const usedWidth = maxRadius * (ratios.maxX - ratios.minX);
+    cx = left + (width - usedWidth) / 2 + ratios.cx * usedWidth;
+  }
+  if (cyParam === undefined) {
+    const usedHeight = maxRadius * (ratios.maxY - ratios.minY);
+    cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
+  }
+  const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? maxRadius, maxRadius);
+  const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? '80%', maxRadius);
+  const cornerRadius = (0, _utils.getPercentageValue)(cornerRadiusParam ?? 0, outerRadius - innerRadius);
+  const contextValue = React.useMemo(() => {
+    const startAngleRad = Math.PI * startAngle / 180;
+    const endAngleRad = Math.PI * endAngle / 180;
+    return {
+      value,
+      valueMin,
+      valueMax,
+      startAngle: startAngleRad,
+      endAngle: endAngleRad,
+      outerRadius,
+      innerRadius,
+      cornerRadius,
+      cx,
+      cy,
+      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__*/(0, _jsxRuntime.jsx)(GaugeContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+function useGaugeState() {
+  return React.useContext(GaugeContext);
+}

package/Gauge/GaugeReferenceArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;

package/Gauge/GaugeReferenceArc.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GaugeReferenceArc = GaugeReferenceArc;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("d3-shape");
+var _styles = require("@mui/material/styles");
+var _GaugeProvider = require("./GaugeProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledPath = (0, _styles.styled)('path', {
+  name: 'MuiGauge',
+  slot: 'ReferenceArc',
+  overridesResolver: (props, styles) => styles.referenceArc
+})(({
+  theme
+}) => ({
+  fill: (theme.vars || theme).palette.divider
+}));
+function GaugeReferenceArc(props) {
+  const {
+    startAngle,
+    endAngle,
+    outerRadius,
+    innerRadius,
+    cornerRadius,
+    cx,
+    cy
+  } = (0, _GaugeProvider.useGaugeState)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({
+    transform: `translate(${cx}, ${cy})`,
+    d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)({
+      startAngle,
+      endAngle,
+      innerRadius,
+      outerRadius
+    })
+  }, props));
+}

package/Gauge/GaugeValueArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;