@mui/x-charts 7.9.0 → 7.11.0

package/ChartsLegend/index.d.ts

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

package/ChartsLegend/index.js

@@ -25,6 +25,28 @@ Object.keys(_DefaultChartsLegend).forEach(function (key) {
     }
   });
 });
+var _ContinuousColorLegend = require("./ContinuousColorLegend");
+Object.keys(_ContinuousColorLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContinuousColorLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ContinuousColorLegend[key];
+    }
+  });
+});
+var _PiecewiseColorLegend = require("./PiecewiseColorLegend");
+Object.keys(_PiecewiseColorLegend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PiecewiseColorLegend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PiecewiseColorLegend[key];
+    }
+  });
+});
 var _chartsLegendClasses = require("./chartsLegendClasses");
 Object.keys(_chartsLegendClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsLegend/legend.types.d.ts

@@ -0,0 +1,62 @@
+import { ChartsTextBaseline, ChartsTextStyle } from '../internals/getWordsByLines';
+import { AxisId } from '../models/axis';
+export type AnchorX = 'left' | 'right' | 'middle';
+export type AnchorY = 'top' | 'bottom' | 'middle';
+export type AnchorPosition = {
+    horizontal: AnchorX;
+    vertical: AnchorY;
+};
+export type Direction = 'row' | 'column';
+export interface ColorLegendSelector {
+    /**
+     * The axis direction containing the color configuration to represent.
+     * @default 'z'
+     */
+    axisDirection?: 'x' | 'y' | 'z';
+    /**
+     * The id of the axis item with the color configuration to represent.
+     * @default The first axis item.
+     */
+    axisId?: AxisId;
+}
+export interface LegendPlacement {
+    /**
+     * The position of the legend.
+     */
+    position?: AnchorPosition;
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
+}
+export type BoundingBox = {
+    width: number;
+    height: number;
+};
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface TextPosition extends Position {
+    dominantBaseline: ChartsTextBaseline;
+    textAnchor: ChartsTextStyle['textAnchor'];
+}
+export type PiecewiseLabelFormatterParams = {
+    /**
+     * The min value of the piece. `null` is infinite.
+     */
+    min: number | Date | null;
+    /**
+     * The max value of the piece. `null` is infinite.
+     */
+    max: number | Date | null;
+    /**
+     * The formatted min value of the piece. `null` is infinite.
+     */
+    formattedMin: string | null;
+    /**
+     * The formatted max value of the piece. `null` is infinite.
+     */
+    formattedMax: string | null;
+};

package/ChartsLegend/legend.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartsLegend/legendItemsPlacement.d.ts

@@ -0,0 +1,3 @@
+import { ChartsTextStyle } from '../ChartsText';
+import { GetItemSpaceType, LegendItemParams, LegendItemWithPosition } from './chartsLegend.types';
+export declare function legendItemPlacements(itemsToDisplay: LegendItemParams[], getItemSpace: GetItemSpaceType, labelStyle: ChartsTextStyle, direction: string, availableWidth: number, availableHeight: number, itemGap: number): [LegendItemWithPosition[], number, number];

package/ChartsLegend/legendItemsPlacement.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.legendItemPlacements = legendItemPlacements;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+const _excluded = ["label"];
+function legendItemPlacements(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap) {
+  // 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 = itemsToDisplay.map(_ref => {
+    let {
+        label
+      } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    const itemSpace = getItemSpace(label, labelStyle);
+    const rep = (0, _extends2.default)({}, 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;
+  });
+  return [seriesWithRawPosition.map(item => (0, _extends2.default)({}, item, {
+    positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+    : item.outerHeight / 2) // Get the center of the item
+  })), totalWidthUsed, totalHeightUsed];
+}

package/ChartsLegend/useAxis.d.ts

@@ -0,0 +1,7 @@
+import { AxisDefaultized } from '../models/axis';
+import { ZAxisDefaultized } from '../models/z-axis';
+import { ColorLegendSelector } from './legend.types';
+/**
+ * Helper to select an axis definition according to its direction and id.
+ */
+export declare function useAxis({ axisDirection, axisId, }: ColorLegendSelector): ZAxisDefaultized | AxisDefaultized;

package/ChartsLegend/useAxis.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxis = useAxis;
+var React = _interopRequireWildcard(require("react"));
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useCartesianContext = require("../context/CartesianProvider/useCartesianContext");
+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 && {}.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; }
+/**
+ * Helper to select an axis definition according to its direction and id.
+ */
+function useAxis({
+  axisDirection,
+  axisId
+}) {
+  const {
+    xAxis,
+    xAxisIds,
+    yAxis,
+    yAxisIds
+  } = (0, _useCartesianContext.useCartesianContext)();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  switch (axisDirection) {
+    case 'x':
+      {
+        const id = typeof axisId === 'string' ? axisId : xAxisIds[axisId ?? 0];
+        return xAxis[id];
+      }
+    case 'y':
+      {
+        const id = typeof axisId === 'string' ? axisId : yAxisIds[axisId ?? 0];
+        return yAxis[id];
+      }
+    case 'z':
+    default:
+      {
+        const id = typeof axisId === 'string' ? axisId : zAxisIds[axisId ?? 0];
+        return zAxis[id];
+      }
+  }
+}

package/ChartsLegend/utils.d.ts

@@ -1,9 +1,2 @@
 import { FormattedSeries } from '../context/SeriesContextProvider';
-export type AnchorX = 'left' | 'right' | 'middle';
-export type AnchorY = 'top' | 'bottom' | 'middle';
-export type AnchorPosition = {
-    horizontal: AnchorX;
-    vertical: AnchorY;
-};
-export type Direction = 'row' | 'column';
-export declare function getSeriesToDisplay(series: FormattedSeries): import("../models/seriesType/config").LegendParams[];
+export declare function getSeriesToDisplay(series: FormattedSeries): import("./chartsLegend.types").LegendItemParams[];

package/ChartsReferenceLine/ChartsReferenceLine.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChartsXReferenceLineProps } from './ChartsXReferenceLine';
 import { ChartsYReferenceLineProps } from './ChartsYReferenceLine';
-import { XOR } from '../internals/utils';
+import { XOR } from '../internals/ts-generic';
 type ChartsReferenceLineProps<TValue extends string | number | Date = string | number | Date> = XOR<ChartsXReferenceLineProps<TValue>, ChartsYReferenceLineProps<TValue>>;
 declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX.Element;
 declare namespace ChartsReferenceLine {

package/ChartsSurface.js

@@ -30,6 +30,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       height,
       viewBox,
       disableAxisListener = false,
+      className,
       title,
       desc
     } = props,
@@ -45,7 +46,8 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref
+    ref: ref,
+    className: className
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: title

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -25,12 +25,7 @@ function ChartsVoronoiHandler(props) {
     onItemClick
   } = props;
   const svgRef = (0, _hooks.useSvgRef)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = (0, _hooks.useDrawingArea)();
+  const drawingArea = (0, _hooks.useDrawingArea)();
   const {
     xAxis,
     yAxis,
@@ -46,6 +41,7 @@ function ChartsVoronoiHandler(props) {
   } = (0, _useSeries.useScatterSeries)() ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
+  const lastFind = React.useRef(undefined);
   const {
     setHighlighted,
     clearHighlighted
@@ -86,7 +82,20 @@ function ChartsVoronoiHandler(props) {
       const seriesPoints = data.flatMap(({
         x,
         y
-      }) => [getXPosition(x), getYPosition(y)]);
+      }) => {
+        const pointX = getXPosition(x);
+        const pointY = getYPosition(y);
+        if (!drawingArea.isPointInside({
+          x: pointX,
+          y: pointY
+        })) {
+          // If the point is not displayed we move them to a trash coordinate.
+          // This avoids managing index mapping before/after filtering.
+          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
+          return [-drawingArea.width, -drawingArea.height];
+        }
+        return [pointX, pointY];
+      });
       voronoiRef.current[seriesId] = {
         seriesId,
         startIndex: points.length,
@@ -95,29 +104,28 @@ function ChartsVoronoiHandler(props) {
       points = points.concat(seriesPoints);
     });
     delauneyRef.current = new _d3Delaunay.Delaunay(points);
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+    lastFind.current = undefined;
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null) {
       return undefined;
     }
-
-    // TODO: A perf optimisation of voronoi could be to use the last point as the initial point for the next search.
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
+      if (!drawingArea.isPointInside(svgPoint)) {
+        lastFind.current = undefined;
         return 'outside-chart';
       }
       if (!delauneyRef.current) {
         return 'no-point-found';
       }
-      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y);
+      const closestPointIndex = delauneyRef.current.find(svgPoint.x, svgPoint.y, lastFind.current);
       if (closestPointIndex === undefined) {
         return 'no-point-found';
       }
+      lastFind.current = closestPointIndex;
       const closestSeries = Object.values(voronoiRef.current).find(value => {
         return 2 * closestPointIndex >= value.startIndex && 2 * closestPointIndex < value.endIndex;
       });
@@ -139,7 +147,7 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       };
     }
-    const handleMouseOut = () => {
+    const handleMouseLeave = () => {
       dispatch({
         type: 'exitChart'
       });
@@ -200,15 +208,15 @@ function ChartsVoronoiHandler(props) {
         dataIndex
       });
     };
-    element.addEventListener('pointerout', handleMouseOut);
+    element.addEventListener('pointerleave', handleMouseLeave);
     element.addEventListener('pointermove', handleMouseMove);
     element.addEventListener('click', handleMouseClick);
     return () => {
-      element.removeEventListener('pointerout', handleMouseOut);
+      element.removeEventListener('pointerleave', handleMouseLeave);
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);
+  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});

package/ChartsXAxis/ChartsXAxis.js

@@ -221,7 +221,7 @@ function ChartsXAxis(inProps) {
       x1: left,
       x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.filter(tick => tick.offset >= left - 1 && tick.offset <= left + width + 1).map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
       labelOffset,

package/ChartsYAxis/ChartsYAxis.js

@@ -145,6 +145,14 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
+  const lineSlotProps = (0, _utils.useSlotProps)({
+    elementType: Line,
+    externalSlotProps: slotProps?.axisLine,
+    additionalProps: {
+      strokeLinecap: 'square'
+    },
+    ownerState: {}
+  });
   const domain = yScale.domain();
   if (domain.length === 0 || domain[0] === domain[1]) {
     // Skip axis rendering if
@@ -156,10 +164,10 @@ function ChartsYAxis(inProps) {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
     children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      y1: yScale.range()[0],
-      y2: yScale.range()[1],
+      y1: top,
+      y2: top + height,
       className: classes.line
-    }, slotProps?.axisLine)), yTicks.map(({
+    }, lineSlotProps)), yTicks.map(({
       formattedValue,
       offset,
       labelOffset,
@@ -168,6 +176,10 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
+      const showLabel = offset >= top - 1 && offset <= height + top + 1;
+      if (!showLabel) {
+        return null;
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,

package/Gauge/Gauge.d.ts

@@ -6,8 +6,5 @@ export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProp
     classes?: Partial<GaugeClasses>;
     children?: React.ReactNode;
 }
-declare function Gauge(props: GaugeProps): React.JSX.Element;
-declare namespace Gauge {
-    var propTypes: any;
-}
+declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<unknown>>;
 export { Gauge };

package/Gauge/Gauge.js

@@ -4,19 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Gauge = Gauge;
+exports.Gauge = 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
 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"];
+const _excluded = ["text", "children", "classes", "className"];
 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 && {}.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 => {
@@ -31,15 +32,17 @@ const useUtilityClasses = props => {
   };
   return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
 };
-function Gauge(props) {
+const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   const {
       text,
-      children
+      children,
+      className
     } = 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,
+    className: (0, _clsx.default)(classes.root, className),
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
       className: classes.referenceArc
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
@@ -49,7 +52,7 @@ function Gauge(props) {
       text: text
     }), children]
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/Gauge/GaugeContainer.js

@@ -9,8 +9,8 @@ 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 _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useChartContainerDimensions = require("../ResponsiveChartContainer/useChartContainerDimensions");
 var _ChartsSurface = require("../ChartsSurface");
 var _DrawingProvider = require("../context/DrawingProvider");
@@ -63,9 +63,13 @@ 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 {
+    containerRef,
+    width,
+    height
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
   const svgRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
     ref: containerRef,
     ownerState: {
@@ -101,7 +105,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
           width: width,
           height: height,
-          ref: handleRef,
+          ref: chartSurfaceRef,
           title: title,
           desc: desc,
           disableAxisListener: true,

package/Gauge/GaugeProvider.js

@@ -7,8 +7,8 @@ exports.GaugeContext = void 0;
 exports.GaugeProvider = GaugeProvider;
 exports.useGaugeState = useGaugeState;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("../internals/utils");
-var _utils2 = require("./utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
+var _utils = require("./utils");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 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); }
@@ -52,12 +52,12 @@ function GaugeProvider(props) {
     width,
     height
   } = (0, _useDrawingArea.useDrawingArea)();
-  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;
+  const ratios = (0, _utils.getArcRatios)(startAngle, endAngle);
+  const innerCx = cxParam ? (0, _getPercentageValue.getPercentageValue)(cxParam, width) : ratios.cx * width;
+  const innerCy = cyParam ? (0, _getPercentageValue.getPercentageValue)(cyParam, height) : ratios.cy * height;
   let cx = left + innerCx;
   let cy = top + innerCy;
-  const maxRadius = (0, _utils2.getAvailableRadius)(innerCx, innerCy, width, height, ratios);
+  const maxRadius = (0, _utils.getAvailableRadius)(innerCx, innerCy, width, height, ratios);
 
   // If the center is not defined, after computation of the available radius, update the center to use the remaining space.
   if (cxParam === undefined) {
@@ -68,9 +68,9 @@ function GaugeProvider(props) {
     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 outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? maxRadius, maxRadius);
+  const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? '80%', maxRadius);
+  const cornerRadius = (0, _getPercentageValue.getPercentageValue)(cornerRadiusParam ?? 0, outerRadius - innerRadius);
   const contextValue = React.useMemo(() => {
     const startAngleRad = Math.PI * startAngle / 180;
     const endAngleRad = Math.PI * endAngle / 180;

package/LineChart/AnimatedArea.js

@@ -14,7 +14,7 @@ var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
 var _web = require("@react-spring/web");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
@@ -71,7 +71,7 @@ function AnimatedArea(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = (0, _utils.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,

package/LineChart/AnimatedLine.js

@@ -14,7 +14,7 @@ var _web = require("@react-spring/web");
 var _d3Color = require("d3-color");
 var _styles = require("@mui/material/styles");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _useChartId = require("../hooks/useChartId");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -74,7 +74,7 @@ function AnimatedLine(props) {
     reset: false,
     immediate: skipAnimation
   });
-  const clipId = (0, _utils.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,

package/LineChart/AreaPlot.js

@@ -63,7 +63,13 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
-      const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
+      const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const value = d.y && yScale(d.y[0]);
+        if (Number.isNaN(value)) {
+          return yScale.range()[0];
+        }
+        return value;
+      }).y1(d => d.y && yScale(d.y[1]));
       const curve = (0, _getCurve.default)(series[seriesId].curve);
       const formattedData = xData?.map((x, index) => ({
         x,