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

package/ChartsXAxis/ChartsXAxis.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
@@ -19,6 +18,8 @@ import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/useChartContext.js";
+import { useXAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -114,9 +115,9 @@ const defaultProps = {
  */
 function ChartsXAxis(inProps) {
   const {
-    xAxisIds,
-    xAxis
-  } = useCartesianContext();
+    xAxis,
+    xAxisIds
+  } = useXAxes();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,
@@ -137,8 +138,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -157,9 +156,11 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -171,9 +172,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 +203,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -233,13 +234,13 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = isPointInside({
+      const showTick = instance.isPointInside({
         x: offset,
         y: -1
       }, {
         direction: 'x'
       });
-      const showTickLabel = isPointInside({
+      const showTickLabel = instance.isPointInside({
         x: offset + xTickLabel,
         y: -1
       }, {
@@ -299,12 +300,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 +324,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

@@ -9,7 +9,6 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
@@ -17,6 +16,8 @@ import { ChartsText } from "../ChartsText/index.js";
 import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -42,8 +43,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -60,7 +59,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = useCartesianContext();
+  } = useYAxes();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
@@ -76,9 +75,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -96,12 +93,14 @@ function ChartsYAxis(inProps) {
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
+  const {
+    instance
+  } = useChartContext();
   const {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
@@ -113,6 +112,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 +140,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -181,7 +181,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = isPointInside({
+      const showLabel = instance.isPointInside({
         x: -1,
         y: offset
       }, {
@@ -243,12 +243,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 +267,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

@@ -88,6 +88,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -99,7 +104,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * 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,
@@ -137,12 +141,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,17 +1,10 @@
 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.
-     */
-    width?: number;
-    /**
-     * The height of the chart in px. If not defined, it takes the height of the parent element.
-     */
-    height?: number;
+import { MergeSignaturesProperty } from '../internals/plugins/models';
+import { ChartCorePluginSignatures } from '../internals/plugins/corePlugins';
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
     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,13 @@ 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 { GaugeProvider } from "./GaugeProvider.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 +37,45 @@ 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, {
+    pluginParams: {
       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,
+      height: inHeight,
       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,
+      }, margin)
+    },
+    plugins: [],
+    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,
+        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 --------------------------------
@@ -150,6 +118,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -161,7 +134,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * 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,
@@ -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.
    */

package/Gauge/GaugeProvider.js

@@ -1,4 +1,6 @@
 // @ignore - do not document.
+'use client';
+
 import * as React from 'react';
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getArcRatios, getAvailableRadius } from "./utils.js";