@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber", "reverse"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -36,61 +36,68 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
-function addLabelDimension(xTicks, {
+
+/* Returns a set of indices of the tick labels that should be visible.  */
+function getVisibleLabels(xTicks, {
   tickLabelStyle: style,
   tickLabelInterval,
+  tickLabelMinGap,
   reverse,
-  isMounted
+  isMounted,
+  isPointInside
 }) {
-  const withDimension = xTicks.map(tick => {
+  const getTickLabelSize = tick => {
     if (!isMounted || tick.formattedValue === undefined) {
-      return _extends({}, tick, {
+      return {
         width: 0,
         height: 0
-      });
+      };
     }
     const tickSizes = getWordsByLines({
       style,
       needsComputation: true,
       text: tick.formattedValue
     });
-    return _extends({}, tick, {
+    return {
       width: Math.max(...tickSizes.map(size => size.width)),
       height: Math.max(tickSizes.length * tickSizes[0].height)
-    });
-  });
+    };
+  };
   if (typeof tickLabelInterval === 'function') {
-    return withDimension.map((item, index) => _extends({}, item, {
-      skipLabel: !tickLabelInterval(item.value, index)
-    }));
+    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
   }
 
   // Filter label to avoid overlap
-  let currentTextLimit = 0;
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-  return withDimension.map((item, labelIndex) => {
+  return new Set(xTicks.filter((item, labelIndex) => {
     const {
-      width,
       offset,
-      labelOffset,
-      height
+      labelOffset
     } = item;
-    const distance = getMinXTranslation(width, height, style?.angle);
     const textPosition = offset + labelOffset;
-    const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
+    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
+      return false;
+    }
+    if (!isPointInside(textPosition)) {
+      return false;
+    }
 
-    currentTextLimit = textPosition - direction * (gapRatio * distance) / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * previousTextLimit) {
+    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
+    const {
+      width,
+      height
+    } = getTickLabelSize(item);
+    const distance = getMinXTranslation(width, height, style?.angle);
+    const currentTextLimit = textPosition - direction * distance / 2;
+    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
       // Except for the first label, we skip all label that overlap with the last accepted.
       // Notice that the early return prevents `previousTextLimit` from being updated.
-      return _extends({}, item, {
-        skipLabel: true
-      });
+      return false;
     }
-    previousTextLimit = textPosition + direction * (gapRatio * distance) / 2;
-    return item;
-  });
+    previousTextLimit = textPosition + direction * distance / 2;
+    return true;
+  }));
 }
 const XAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsXAxis',
@@ -98,10 +105,10 @@ const XAxisRoot = styled(AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickSize: 6
+  tickSize: 6,
+  tickLabelMinGap: 4
 };
 
 /**
@@ -146,12 +153,12 @@ function ChartsXAxis(inProps) {
     tickLabelInterval,
     tickPlacement,
     tickLabelPlacement,
-    sx
+    tickLabelMinGap,
+    sx,
+    offset
   } = defaultizedProps;
   const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
-  }));
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     left,
     top,
@@ -171,7 +178,7 @@ function ChartsXAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: _extends({
+      style: _extends({}, theme.typography.caption, {
         fontSize: 12,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
@@ -188,11 +195,18 @@ function ChartsXAxis(inProps) {
     tickPlacement,
     tickLabelPlacement
   });
-  const xTicksWithDimension = addLabelDimension(xTicks, {
+  const visibleLabels = getVisibleLabels(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
+    tickLabelMinGap,
     reverse,
-    isMounted
+    isMounted,
+    isPointInside: x => instance.isPointInside({
+      x,
+      y: -1
+    }, {
+      direction: 'x'
+    })
   });
   const labelRefPoint = {
     x: left + width / 2,
@@ -215,44 +229,40 @@ function ChartsXAxis(inProps) {
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
+  // - The position is set to 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity) || position === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsxs(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: left,
       x2: left + width,
       className: classes.line
-    }, slotProps?.axisLine)), xTicksWithDimension.map(({
-      formattedValue,
-      offset,
-      labelOffset,
-      skipLabel
-    }, index) => {
+    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+      const {
+        formattedValue,
+        offset: tickOffset,
+        labelOffset
+      } = item;
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
       const showTick = instance.isPointInside({
-        x: offset,
-        y: -1
-      }, {
-        direction: 'x'
-      });
-      const showTickLabel = instance.isPointInside({
-        x: offset + xTickLabel,
+        x: tickOffset,
         y: -1
       }, {
         direction: 'x'
       });
+      const showTickLabel = visibleLabels.has(item);
       return /*#__PURE__*/_jsxs("g", {
-        transform: `translate(${offset}, 0)`,
+        transform: `translate(${tickOffset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {
@@ -272,6 +282,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: PropTypes.oneOf(['x']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -304,10 +315,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: PropTypes.object,
-  /**
-   * Position of the axis.
-   */
-  position: PropTypes.oneOf(['bottom', 'top']),
   /**
    * The props used for each component slot.
    * @default {}
@@ -341,6 +348,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * If two tick labels are closer than this minimum gap, one of them will be hidden.
+   * @default 4
+   */
+  tickLabelMinGap: PropTypes.number,
   /**
    * The placement of ticks label. Can be the middle of the band, or the tick position.
    * Only used if scale is 'band'.

package/modern/ChartsXAxis/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsXAxis.js";

package/modern/ChartsYAxis/ChartsYAxis.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
+ */
+declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+declare namespace ChartsYAxis {
+  var propTypes: any;
+}
+export { ChartsYAxis };

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 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 { useThemeProps, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useTicks } from "../hooks/useTicks.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -40,7 +40,6 @@ const YAxisRoot = styled(AxisRoot, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'left',
   disableLine: false,
   disableTicks: false,
   tickSize: 6
@@ -86,13 +85,11 @@ function ChartsYAxis(inProps) {
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx
+    sx,
+    offset
   } = defaultizedProps;
-  const theme = useTheme();
   const isRtl = useRtl();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
-  }));
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
   } = useChartContext();
@@ -158,14 +155,16 @@ function ChartsYAxis(inProps) {
   });
   const domain = yScale.domain();
   const ordinalAxis = isBandScale(yScale);
+
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
+  // - The position is 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity) || position === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsxs(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width : left}, 0)`,
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
     sx: sx,
     children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
@@ -174,7 +173,7 @@ function ChartsYAxis(inProps) {
       className: classes.line
     }, lineSlotProps)), yTicks.map(({
       formattedValue,
-      offset,
+      offset: tickOffset,
       labelOffset,
       value
     }, index) => {
@@ -183,7 +182,7 @@ function ChartsYAxis(inProps) {
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
         x: -1,
-        y: offset
+        y: tickOffset
       }, {
         direction: 'y'
       });
@@ -191,7 +190,7 @@ function ChartsYAxis(inProps) {
         return null;
       }
       return /*#__PURE__*/_jsxs("g", {
-        transform: `translate(0, ${offset})`,
+        transform: `translate(0, ${tickOffset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           x2: positionSign * tickSize,
@@ -215,6 +214,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: PropTypes.oneOf(['y']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
@@ -247,10 +247,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The style applied to the axis label.
    */
   labelStyle: PropTypes.object,
-  /**
-   * Position of the axis.
-   */
-  position: PropTypes.oneOf(['left', 'right']),
   /**
    * The props used for each component slot.
    * @default {}

package/modern/ChartsYAxis/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsYAxis.js";

package/modern/Gauge/Gauge.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GaugeContainerProps } from "./GaugeContainer.js";
+import { GaugeClasses } from "./gaugeClasses.js";
+import { GaugeValueTextProps } from "./GaugeValueText.js";
+export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProps, 'text'> {
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
+}
+declare const Gauge: React.ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export { Gauge };

package/modern/Gauge/Gauge.js

@@ -97,14 +97,15 @@ 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`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, 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%'.

package/modern/Gauge/GaugeContainer.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { GaugeProviderProps } from "./GaugeProvider.js";
+import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
+import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
+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<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export { GaugeContainer };

package/modern/Gauge/GaugeContainer.js

@@ -9,6 +9,7 @@ import { styled } from '@mui/material/styles';
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { GaugeProvider } from "./GaugeProvider.js";
 import { ChartProvider } from "../context/ChartProvider/index.js";
+import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GStyled = styled('g')(({
   theme
@@ -41,12 +42,12 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
     pluginParams: {
       width: inWidth,
       height: inHeight,
-      margin: _extends({
+      margin: defaultizeMargin(margin, {
         left: 10,
         right: 10,
         top: 10,
         bottom: 10
-      }, margin)
+      })
     },
     plugins: [],
     children: /*#__PURE__*/_jsx(GaugeProvider, {
@@ -127,14 +128,15 @@ 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`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
+  margin: PropTypes.oneOfType([PropTypes.number, 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%'.

package/modern/Gauge/GaugeProvider.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+interface CircularConfig {
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * 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%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * 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?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | 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?: number | 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?: number | string;
+}
+interface ProcessedCircularConfig {
+  /**
+   * The start angle (rad).
+   */
+  startAngle: number;
+  /**
+   * The end angle (rad).
+   */
+  endAngle: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   */
+  innerRadius: number;
+  /**
+   * The radius between circle center and the end of the arc.
+   */
+  outerRadius: number;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   */
+  cornerRadius: number;
+  /**
+   * The x coordinate of the pie center.
+   */
+  cx: number;
+  /**
+   * The y coordinate of the pie center.
+   */
+  cy: number;
+}
+interface GaugeConfig {
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+}
+export declare const GaugeContext: React.Context<Required<GaugeConfig> & ProcessedCircularConfig & {
+  /**
+   * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+   */
+  maxRadius: number;
+  /**
+   * The angle (rad) associated to the current value.
+   */
+  valueAngle: null | number;
+}>;
+export interface GaugeProviderProps extends GaugeConfig, CircularConfig {
+  children: React.ReactNode;
+}
+export declare function GaugeProvider(props: GaugeProviderProps): React.JSX.Element;
+export declare function useGaugeState(): Required<GaugeConfig> & ProcessedCircularConfig & {
+  /**
+   * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+   */
+  maxRadius: number;
+  /**
+   * The angle (rad) associated to the current value.
+   */
+  valueAngle: null | number;
+};
+export {};

package/modern/Gauge/GaugeReferenceArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;

package/modern/Gauge/GaugeValueArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;

package/modern/Gauge/GaugeValueText.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsTextProps } from "../ChartsText/index.js";
+export interface GaugeFormatterParams {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+}
+export interface GaugeValueTextProps extends Omit<ChartsTextProps, 'text'> {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+}
+declare function GaugeValueText(props: GaugeValueTextProps): React.JSX.Element | null;
+declare namespace GaugeValueText {
+  var propTypes: any;
+}
+export { GaugeValueText };

package/modern/Gauge/gaugeClasses.d.ts

@@ -0,0 +1,14 @@
+export interface GaugeClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+}
+export type GaugeClassKey = keyof GaugeClasses;
+export declare function getGaugeUtilityClass(slot: string): string;
+export declare const gaugeClasses: GaugeClasses;
+export default gaugeClasses;

package/modern/Gauge/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Gauge.js";
+export * from "./GaugeContainer.js";
+export * from "./GaugeValueText.js";
+export * from "./GaugeValueArc.js";
+export * from "./GaugeReferenceArc.js";
+export * from "./gaugeClasses.js";
+export { useGaugeState } from "./GaugeProvider.js";

package/modern/Gauge/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export declare function getArcRatios(startAngle: number, endAngle: number): {
+  cx: number;
+  cy: number;
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+};
+export declare function getAvailableRadius(cx: number, cy: number, width: number, height: number, {
+  minX,
+  maxX,
+  minY,
+  maxY
+}: {
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+}): number;

package/modern/LineChart/AnimatedArea.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { AreaElementOwnerState } from './AreaElement';
+export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path'> {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+ */
+declare function AnimatedArea(props: AnimatedAreaProps): React.JSX.Element;
+declare namespace AnimatedArea {
+  var propTypes: any;
+}
+export { AnimatedArea };