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

package/esm/ChartsLegend/DefaultChartsLegend.js

@@ -0,0 +1,286 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { NoSsr } from '@mui/base/NoSsr';
+import { useTheme, styled } from '@mui/material/styles';
+import { ChartsText } from '../ChartsText';
+import { getWordsByLines } from '../internals/getWordsByLines';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ChartsLegendRoot = styled('g', {
+  name: 'MuiChartsLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+/**
+ * Transforms number or partial padding object to a defaultized padding object.
+ */
+const getStandardizedPadding = padding => {
+  if (typeof padding === 'number') {
+    return {
+      left: padding,
+      right: padding,
+      top: padding,
+      bottom: padding
+    };
+  }
+  return _extends({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }, padding);
+};
+function DefaultChartsLegend(props) {
+  const {
+    hidden,
+    position,
+    direction,
+    seriesToDisplay,
+    drawingArea,
+    classes,
+    itemMarkWidth = 20,
+    itemMarkHeight = 20,
+    markGap = 5,
+    itemGap = 10,
+    padding: paddingProps = 10,
+    labelStyle: inLabelStyle
+  } = props;
+  const theme = useTheme();
+  const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
+    color: 'inherit',
+    dominantBaseline: 'central',
+    textAnchor: 'start',
+    fill: (theme.vars || theme).palette.text.primary,
+    lineHeight: 1
+  }, inLabelStyle),
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
+  const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
+  const getItemSpace = React.useCallback((label, inStyle = {}) => {
+    const style = _objectWithoutPropertiesLoose(inStyle, _excluded);
+    const linesSize = getWordsByLines({
+      style,
+      needsComputation: true,
+      text: label
+    });
+    const innerSize = {
+      innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map(size => size.width)),
+      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
+    };
+    return _extends({}, innerSize, {
+      outerWidth: innerSize.innerWidth + itemGap,
+      outerHeight: innerSize.innerHeight + itemGap
+    });
+  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
+  const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
+  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
+  const availableWidth = totalWidth - padding.left - padding.right;
+  const availableHeight = totalHeight - padding.top - padding.bottom;
+  const seriesWithPosition = React.useMemo(() => {
+    // Start at 0, 0. Will be modified later by padding and position.
+    let x = 0;
+    let y = 0;
+
+    // total values used to align legend later.
+    let totalWidthUsed = 0;
+    let totalHeightUsed = 0;
+    let rowIndex = 0;
+    const rowMaxHeight = [0];
+    const seriesWithRawPosition = seriesToDisplay.map(_ref => {
+      let {
+          label
+        } = _ref,
+        other = _objectWithoutPropertiesLoose(_ref, _excluded2);
+      const itemSpace = getItemSpace(label, labelStyle);
+      const rep = _extends({}, other, {
+        label,
+        positionX: x,
+        positionY: y,
+        innerHeight: itemSpace.innerHeight,
+        innerWidth: itemSpace.innerWidth,
+        outerHeight: itemSpace.outerHeight,
+        outerWidth: itemSpace.outerWidth,
+        rowIndex
+      });
+      if (direction === 'row') {
+        if (x + itemSpace.innerWidth > availableWidth) {
+          // This legend item would create overflow along the x-axis, so we start a new row.
+          x = 0;
+          y += rowMaxHeight[rowIndex];
+          rowIndex += 1;
+          if (rowMaxHeight.length <= rowIndex) {
+            rowMaxHeight.push(0);
+          }
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
+        x += itemSpace.outerWidth;
+      }
+      if (direction === 'column') {
+        if (y + itemSpace.innerHeight > availableHeight) {
+          // This legend item would create overflow along the y-axis, so we start a new column.
+          x = totalWidthUsed + itemGap;
+          y = 0;
+          rowIndex = 0;
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        if (rowMaxHeight.length <= rowIndex) {
+          rowMaxHeight.push(0);
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowIndex += 1;
+        y += itemSpace.outerHeight;
+      }
+      return rep;
+    });
+
+    // Move the legend according to padding and position
+    let gapX = 0;
+    let gapY = 0;
+    switch (position.horizontal) {
+      case 'left':
+        gapX = padding.left;
+        break;
+      case 'right':
+        gapX = totalWidth - padding.right - totalWidthUsed;
+        break;
+      default:
+        gapX = (totalWidth - totalWidthUsed) / 2;
+        break;
+    }
+    switch (position.vertical) {
+      case 'top':
+        gapY = padding.top;
+        break;
+      case 'bottom':
+        gapY = totalHeight - padding.bottom - totalHeightUsed;
+        break;
+      default:
+        gapY = (totalHeight - totalHeightUsed) / 2;
+        break;
+    }
+    return seriesWithRawPosition.map(item => _extends({}, item, {
+      // Add the gap due to the position
+      positionX: item.positionX + gapX,
+      // Add the gap due to the position
+      positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+      : item.outerHeight / 2) // Get the center of the item
+    }));
+  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(NoSsr, {
+    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
+      className: classes.root,
+      children: seriesWithPosition.map(({
+        id,
+        label,
+        color,
+        positionX,
+        positionY
+      }) => /*#__PURE__*/_jsxs("g", {
+        className: classes.series,
+        transform: `translate(${positionX} ${positionY})`,
+        children: [/*#__PURE__*/_jsx("rect", {
+          className: classes.mark,
+          y: -itemMarkHeight / 2,
+          width: itemMarkWidth,
+          height: itemMarkHeight,
+          fill: color
+        }), /*#__PURE__*/_jsx(ChartsText, {
+          style: labelStyle,
+          text: label,
+          x: itemMarkWidth + markGap,
+          y: 0
+        })]
+      }, id))
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']).isRequired,
+  drawingArea: PropTypes.shape({
+    bottom: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    left: PropTypes.number.isRequired,
+    right: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired
+  }).isRequired,
+  /**
+   * Set to true to hide the legend.
+   * @default false
+   */
+  hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
+  position: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+  }).isRequired,
+  series: PropTypes.object.isRequired,
+  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    label: PropTypes.string.isRequired
+  })).isRequired
+} : void 0;
+export { DefaultChartsLegend };

package/esm/ChartsLegend/index.js

@@ -1,3 +1,4 @@
 export * from './ChartsLegend';
+export * from './DefaultChartsLegend';
 export * from './chartsLegendClasses';
 export * from './utils';

package/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -10,7 +10,7 @@ function ChartsReferenceLine(props) {
     y
   } = props;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
     throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
@@ -29,7 +29,7 @@ process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
    * The id of the axis used for the reference value.
    * @default The `id` of the first defined axis.
    */
-  axisId: PropTypes.string,
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/ChartsSurface.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+const _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';
@@ -17,7 +17,9 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
       width,
       height,
       viewBox,
-      disableAxisListener = false
+      disableAxisListener = false,
+      title,
+      desc
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgView = _extends({
@@ -34,9 +36,9 @@ const 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/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -39,7 +39,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,
@@ -47,7 +47,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/esm/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) {
@@ -19,7 +19,7 @@ function DefaultChartsAxisTooltipContent(props) {
   if (dataIndex == null) {
     return null;
   }
-  const axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : v => v.toLocaleString();
+  const axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString();
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -69,7 +69,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/esm/ChartsTooltip/utils.js

@@ -84,4 +84,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/esm/ChartsXAxis/ChartsXAxis.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["scale", "tickNumber"];
+const _excluded = ["scale", "tickNumber", "reverse"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
@@ -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 { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText } from '../ChartsText';
@@ -35,6 +35,7 @@ const useUtilityClasses = ownerState => {
 function addLabelDimension(xTicks, {
   tickLabelStyle: style,
   tickLabelInterval,
+  reverse,
   isMounted
 }) {
   const withDimension = xTicks.map(tick => {
@@ -61,8 +62,9 @@ function addLabelDimension(xTicks, {
   }
 
   // Filter label to avoid overlap
-  let textStart = 0;
-  let textEnd = 0;
+  let currentTextLimit = 0;
+  let previouseTextLimit = 0;
+  const direction = reverse ? -1 : 1;
   return withDimension.map((item, labelIndex) => {
     const {
       width,
@@ -74,15 +76,15 @@ function addLabelDimension(xTicks, {
     const textPosition = offset + labelOffset;
     const 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;
   });
 }
@@ -117,7 +119,8 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_ref]: {
           scale: xScale,
-          tickNumber
+          tickNumber,
+          reverse
         }
       }
     } = _React$useContext,
@@ -179,6 +182,7 @@ function ChartsXAxis(inProps) {
   const xTicksWithDimension = addLabelDimension(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
+    reverse,
     isMounted
   });
   const labelRefPoint = {
@@ -242,7 +246,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/esm/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';
@@ -176,7 +176,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/esm/Gauge/Gauge.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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";
+const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    valueArc: ['valueArc'],
+    referenceArc: ['referenceArc'],
+    valueText: ['valueText']
+  };
+  return composeClasses(slots, getGaugeUtilityClass, classes);
+};
+function Gauge(props) {
+  const {
+      text,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const 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 };