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

package/ChartsXAxis/ChartsXAxis.js

@@ -137,8 +137,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -171,9 +169,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -202,7 +200,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -299,12 +297,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: PropTypes.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: PropTypes.number,
   /**
    * The style applied to the axis label.
    */
@@ -329,12 +321,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   stroke: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: PropTypes.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/ChartsYAxis/ChartsYAxis.js

@@ -42,8 +42,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -76,9 +74,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -113,6 +109,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
@@ -140,7 +137,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -243,12 +240,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The label of the axis.
    */
   label: PropTypes.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: PropTypes.number,
   /**
    * The style applied to the axis label.
    */
@@ -273,12 +264,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   stroke: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: PropTypes.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/Gauge/Gauge.d.ts

@@ -6,5 +6,5 @@ export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProp
     classes?: Partial<GaugeClasses>;
     children?: React.ReactNode;
 }
-declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<unknown>>;
+declare const Gauge: React.ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export { Gauge };

package/Gauge/Gauge.js

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

package/Gauge/GaugeContainer.d.ts

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

package/Gauge/GaugeContainer.js

@@ -6,32 +6,15 @@ const _excluded = ["width", "height", "margin", "title", "desc", "value", "value
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import useForkRef from '@mui/utils/useForkRef';
-import { useChartContainerDimensions } from "../ChartContainer/useChartContainerDimensions.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { DrawingProvider } from "../context/DrawingProvider.js";
+import { DrawingAreaProvider } from "../context/DrawingAreaProvider/index.js";
 import { GaugeProvider } from "./GaugeProvider.js";
+import { SizeProvider } from "../context/SizeProvider/index.js";
+import { ChartProvider } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResizableContainer = styled('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = 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
   }
@@ -56,58 +39,47 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    containerRef,
-    width,
-    height
-  } = useChartContainerDimensions(inWidth, inHeight);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({
-    ref: containerRef,
-    ownerState: {
+  return /*#__PURE__*/_jsx(ChartProvider, {
+    children: /*#__PURE__*/_jsx(SizeProvider, {
       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: chartSurfaceRef,
-          title: title,
-          desc: desc,
-          disableAxisListener: true,
-          "aria-hidden": "true",
-          children: children
+      height: inHeight,
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, {
+        margin: _extends({
+          left: 10,
+          right: 10,
+          top: 10,
+          bottom: 10
+        }, margin),
+        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, _extends({
+            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__*/_jsx(GStyled, {
+              "aria-hidden": "true",
+              children: children
+            })
+          }))
         })
       })
-    }) : null
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -198,12 +170,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @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.
    */