@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.2

package/node/ChartsTooltip/index.js

@@ -4,8 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  getChartsTooltipUtilityClass: true,
+  chartsTooltipClasses: true,
   useMouseTracker: true
 };
+Object.defineProperty(exports, "chartsTooltipClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.chartsTooltipClasses;
+  }
+});
+Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.getChartsTooltipUtilityClass;
+  }
+});
 Object.defineProperty(exports, "useMouseTracker", {
   enumerable: true,
   get: function () {
@@ -24,18 +38,19 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
     }
   });
 });
-var _chartsTooltipClasses = require("./chartsTooltipClasses");
-Object.keys(_chartsTooltipClasses).forEach(function (key) {
+var _ChartsTooltipContainer = require("./ChartsTooltipContainer");
+Object.keys(_ChartsTooltipContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _chartsTooltipClasses[key]) return;
+  if (key in exports && exports[key] === _ChartsTooltipContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _chartsTooltipClasses[key];
+      return _ChartsTooltipContainer[key];
     }
   });
 });
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 Object.keys(_ChartsAxisTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -60,30 +75,6 @@ Object.keys(_ChartsItemTooltipContent).forEach(function (key) {
     }
   });
 });
-var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
-Object.keys(_DefaultChartsAxisTooltipContent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DefaultChartsAxisTooltipContent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DefaultChartsAxisTooltipContent[key];
-    }
-  });
-});
-var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
-Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DefaultChartsItemTooltipContent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DefaultChartsItemTooltipContent[key];
-    }
-  });
-});
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 Object.keys(_ChartsTooltipTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/ChartsTooltip/useAxisTooltip.js

@@ -7,34 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAxisTooltip = useAxisTooltip;
 var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
+var _useAxis = require("../hooks/useAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
-  const {
-    axis
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const defaultXAxis = (0, _useAxis.useXAxis)();
+  const defaultYAxis = (0, _useAxis.useYAxis)();
+  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
+  const store = (0, _useStore.useStore)();
+  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
+    yAxis
   } = (0, _CartesianProvider.useCartesianContext)();
   const {
     zAxis,
     zAxisIds
   } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-
-  // By default use the x-axis
-  const isXaxis = axis.x !== null && axis.x.index !== -1;
-  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
   if (axisData === null) {
     return null;
   }
@@ -42,8 +41,8 @@ function useAxisTooltip() {
     index: dataIndex,
     value: axisValue
   } = axisData;
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
+  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
   const relevantSeries = Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -53,14 +52,14 @@ function useAxisTooltip() {
       const seriesToAdd = seriesOfType.series[seriesId];
       const providedXAxisId = seriesToAdd.xAxisId;
       const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
 
       // Test if the series uses the default axis
       if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? xAxisIds[0];
-        const yAxisId = providedYAxisId ?? yAxisIds[0];
-        const zAxisId = seriesToAdd.zAxisId ?? zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const xAxisId = providedXAxisId ?? defaultXAxis.id;
+        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
@@ -82,7 +81,8 @@ function useAxisTooltip() {
     location: 'tooltip'
   });
   return {
-    identifier: axis,
+    axisDirection: xAxisHasData ? 'x' : 'y',
+    dataIndex,
     seriesItems: relevantSeries,
     axisValue,
     axisFormattedValue

package/node/ChartsTooltip/useItemTooltip.js

@@ -9,16 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.useItemTooltip = useItemTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
 function useItemTooltip() {
-  const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
+  const item = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/node/ChartsTooltip/utils.js

@@ -4,7 +4,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 exports.usePointerType = usePointerType;
 exports.utcFormatter = utcFormatter;
@@ -84,14 +83,6 @@ function usePointerType() {
   }, [svgRef]);
   return pointerType;
 }
-function getTooltipHasData(trigger, displayedData) {
-  if (trigger === 'item') {
-    return displayedData !== null;
-  }
-  const hasAxisXData = displayedData.x !== null;
-  const hasAxisYData = displayedData.y !== null;
-  return hasAxisXData || hasAxisYData;
-}
 function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,19 +1,20 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsVoronoiHandler = ChartsVoronoiHandler;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
+var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _hooks = require("../hooks");
 var _context = require("../context");
@@ -32,9 +33,7 @@ function ChartsVoronoiHandler(props) {
     xAxisIds,
     yAxisIds
   } = (0, _CartesianProvider.useCartesianContext)();
-  const {
-    dispatch
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
   const {
     series,
     seriesOrder
@@ -49,17 +48,19 @@ function ChartsVoronoiHandler(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        useVoronoiInteraction: true
+      })
+    }));
     return () => {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          useVoronoiInteraction: false
+        })
+      }));
     };
-  }, [dispatch]);
+  }, [store]);
   (0, _useEnhancedEffect.default)(() => {
     // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
 
@@ -107,10 +108,10 @@ function ChartsVoronoiHandler(props) {
     lastFind.current = undefined;
   }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
@@ -148,27 +149,38 @@ function ChartsVoronoiHandler(props) {
       };
     }
     const handleMouseLeave = () => {
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      }));
       clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
       if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
+        store.update(prev => (0, _extends2.default)({}, prev, {
+          interaction: (0, _extends2.default)({}, prev.interaction, {
+            axis: {
+              x: null,
+              y: null
+            },
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
+        store.update(prev => (0, _extends2.default)({}, prev, {
+          interaction: (0, _extends2.default)({}, prev.interaction, {
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
@@ -176,14 +188,15 @@ function ChartsVoronoiHandler(props) {
         seriesId,
         dataIndex
       } = closestPoint;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId,
-          dataIndex
-        }
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          item: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        })
+      }));
       setHighlighted({
         seriesId,
         dataIndex
@@ -216,7 +229,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});

package/node/ChartsXAxis/ChartsXAxis.js

@@ -144,8 +144,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -178,9 +176,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: (0, _extends2.default)({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -209,7 +207,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -306,12 +304,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -336,12 +328,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   stroke: _propTypes.default.string,
   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]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/node/ChartsYAxis/ChartsYAxis.js

@@ -49,8 +49,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -83,9 +81,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -120,6 +116,7 @@ function ChartsYAxis(inProps) {
     tickInterval
   });
   const positionSign = position === 'right' ? 1 : -1;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
   const labelRefPoint = {
     x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
@@ -147,7 +144,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -250,12 +247,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -280,12 +271,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   stroke: _propTypes.default.string,
   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]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/node/Gauge/Gauge.js

@@ -144,12 +144,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @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.
    */

package/node/Gauge/GaugeContainer.js

@@ -12,33 +12,16 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useChartContainerDimensions = require("../ChartContainer/useChartContainerDimensions");
 var _ChartsSurface = require("../ChartsSurface");
-var _DrawingProvider = require("../context/DrawingProvider");
+var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
+var _SizeProvider = require("../context/SizeProvider");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
-const ResizableContainer = (0, _styles.styled)('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = (0, _styles.styled)('g')(({
   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
   }
@@ -63,58 +46,47 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    containerRef,
-    width,
-    height
-  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
-    ref: containerRef,
-    ownerState: {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
       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: chartSurfaceRef,
-          title: title,
-          desc: desc,
-          disableAxisListener: true,
-          "aria-hidden": "true",
-          children: children
+      height: inHeight,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
+        margin: (0, _extends2.default)({
+          left: 10,
+          right: 10,
+          top: 10,
+          bottom: 10
+        }, margin),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
+          value: value,
+          valueMin: valueMin,
+          valueMax: valueMax,
+          startAngle: startAngle,
+          endAngle: endAngle,
+          outerRadius: outerRadius,
+          innerRadius: innerRadius,
+          cornerRadius: cornerRadius,
+          cx: cx,
+          cy: cy,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+            title: title,
+            desc: desc,
+            disableAxisListener: true,
+            role: "meter",
+            "aria-valuenow": value === null ? undefined : value,
+            "aria-valuemin": valueMin,
+            "aria-valuemax": valueMax
+          }, other, {
+            ref: ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
+              "aria-hidden": "true",
+              children: children
+            })
+          }))
         })
       })
-    }) : null
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -205,12 +177,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @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.
    */