@mui/x-charts 7.6.2 → 7.7.1

package/LineChart/LineChart.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.LineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AreaPlot = require("./AreaPlot");
 var _LinePlot = require("./LinePlot");
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _MarkPlot = require("./MarkPlot");
 var _ChartsAxis = require("../ChartsAxis/ChartsAxis");
-var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
@@ -22,7 +20,8 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _LineHighlightPlot = require("./LineHighlightPlot");
 var _ChartsGrid = require("../ChartsGrid");
 var _ChartsOnAxisClickHandler = require("../ChartsOnAxisClickHandler");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
+var _useLineChartProps = require("./useLineChartProps");
 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); }
 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; }
@@ -38,110 +37,29 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight = {
-      x: 'line'
-    },
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const id = (0, _useId.default)();
-  const clipPathId = `${id}-clip-path`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
-    ref: ref,
-    series: series.map(s => (0, _extends2.default)({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxis ?? [{
-      id: _constants.DEFAULT_X_AXIS_KEY,
-      scaleType: 'point',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
-    colors: colors,
-    dataset: dataset,
-    sx: sx,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
-      onAxisClick: onAxisClick
-    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onAreaClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, {
-        slots: slots,
-        slotProps: slotProps,
-        onItemClick: onLineClick,
-        skipAnimation: skipAnimation
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onMarkClick,
-      skipAnimation: skipAnimation
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, {
-      slots: slots,
-      slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-      id: clipPathId
-    }), children]
-  });
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  } = (0, _useLineChartProps.useLineChartProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+    ref: ref
+  }, chartContainerProps, {
+    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+  }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/LineHighlightPlot.js

@@ -9,7 +9,7 @@ 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 _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
@@ -37,7 +37,7 @@ function LineHighlightPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);

package/LineChart/LinePlot.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
@@ -23,7 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   if (seriesData === undefined) {
     return [];
   }

package/LineChart/MarkPlot.js

@@ -9,7 +9,7 @@ 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 _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _useChartId = require("../hooks/useChartId");
@@ -40,7 +40,7 @@ function MarkPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {

package/LineChart/useLineChartProps.d.ts

@@ -0,0 +1,117 @@
+/// <reference types="react" />
+import type { LineChartProps } from './LineChart';
+/**
+ * A helper function that extracts LineChartProps from the input props
+ * and returns an object with props for the children components of LineChart.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+export declare const useLineChartProps: (props: LineChartProps) => {
+    chartContainerProps: {
+        series: {
+            color?: string | undefined;
+            area?: boolean | undefined;
+            data?: (number | null)[] | undefined;
+            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
+            id?: import("../internals").SeriesId | undefined;
+            dataKey?: string | undefined;
+            stackOffset?: import("..").StackOffsetType | undefined;
+            valueFormatter?: import("../internals").SeriesValueFormatter<number | null> | undefined;
+            highlightScope?: Partial<import("..").HighlightScope> | undefined;
+            xAxisKey?: string | undefined;
+            yAxisKey?: string | undefined;
+            stack?: string | undefined;
+            stackOrder?: import("..").StackOrderType | undefined;
+            curve?: import("..").CurveType | undefined;
+            showMark?: boolean | ((params: import("..").ShowMarkParams<number | Date>) => boolean) | undefined;
+            disableHighlight: boolean;
+            connectNulls?: boolean | undefined;
+            type: "line";
+        }[];
+        width: number | undefined;
+        height: number | undefined;
+        margin: Partial<import("..").CardinalDirections<number>> | undefined;
+        colors: import("..").ChartsColorPalette | undefined;
+        dataset: import("../internals").DatasetType | undefined;
+        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
+        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
+        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+        highlightedItem: import("..").HighlightItemData | null | undefined;
+        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
+        disableAxisListener: boolean;
+    };
+    axisClickHandlerProps: {
+        onAxisClick: ((event: MouseEvent, data: {
+            dataIndex: number;
+            axisValue?: string | number | Date | undefined;
+            seriesValues: Record<string, number | null | undefined>;
+        } | null) => void) | undefined;
+    };
+    gridProps: {
+        vertical: boolean | undefined;
+        horizontal: boolean | undefined;
+    };
+    clipPathProps: {
+        id: string;
+    };
+    clipPathGroupProps: {
+        clipPath: string;
+    };
+    areaPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onAreaClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    linePlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onLineClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    markPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        onMarkClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
+        skipAnimation: boolean | undefined;
+    };
+    overlayProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        loading: boolean | undefined;
+    };
+    chartsAxisProps: {
+        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
+        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
+        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
+        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+    };
+    axisHighlightProps: {
+        x: "none" | "line" | "band";
+        y?: ("none" | "line" | "band") | undefined;
+    };
+    lineHighlightPlotProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+    };
+    legendProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        position?: import("..").AnchorPosition | undefined;
+        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
+        hidden?: boolean | undefined;
+        direction?: import("..").Direction | undefined;
+    };
+    tooltipProps: {
+        slots: import("./LineChart").LineChartSlots | undefined;
+        slotProps: import("./LineChart").LineChartSlotProps | undefined;
+        trigger?: import("../ChartsTooltip/utils").TriggerOptions | undefined;
+        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
+        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
+        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
+    };
+    children: import("react").ReactNode;
+};

package/LineChart/useLineChartProps.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineChartProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _constants = require("../constants");
+/**
+ * A helper function that extracts LineChartProps from the input props
+ * and returns an object with props for the children components of LineChart.
+ *
+ * @param props The input props for LineChart
+ * @returns An object with props for the children components of LineChart
+ */
+const useLineChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    onAxisClick,
+    onAreaClick,
+    onLineClick,
+    onMarkClick,
+    axisHighlight,
+    disableLineItemHighlight,
+    legend,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children,
+    slots,
+    slotProps,
+    skipAnimation,
+    loading,
+    highlightedItem,
+    onHighlightChange
+  } = props;
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const chartContainerProps = {
+    series: series.map(s => (0, _extends2.default)({
+      disableHighlight: !!disableLineItemHighlight,
+      type: 'line'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    xAxis: xAxis ?? [{
+      id: _constants.DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }],
+    yAxis,
+    sx,
+    highlightedItem,
+    onHighlightChange,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
+  };
+  const axisClickHandlerProps = {
+    onAxisClick
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const areaPlotProps = {
+    slots,
+    slotProps,
+    onAreaClick,
+    skipAnimation
+  };
+  const linePlotProps = {
+    slots,
+    slotProps,
+    onLineClick,
+    skipAnimation
+  };
+  const markPlotProps = {
+    slots,
+    slotProps,
+    onMarkClick,
+    skipAnimation
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const axisHighlightProps = (0, _extends2.default)({
+    x: 'line'
+  }, axisHighlight);
+  const lineHighlightPlotProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = (0, _extends2.default)({}, legend, {
+    slots,
+    slotProps
+  });
+  const tooltipProps = (0, _extends2.default)({}, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    axisClickHandlerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    areaPlotProps,
+    linePlotProps,
+    markPlotProps,
+    overlayProps,
+    chartsAxisProps,
+    axisHighlightProps,
+    lineHighlightPlotProps,
+    legendProps,
+    tooltipProps,
+    children
+  };
+};
+exports.useLineChartProps = useLineChartProps;

package/PieChart/PieChart.d.ts

@@ -9,12 +9,12 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
 export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * Indicate which axis to display the bottom of the charts.
      * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.

package/PieChart/PieChart.js

@@ -16,7 +16,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 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); }
 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; }

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizableContainer = void 0;
+var _styles = require("@mui/material/styles");
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+const ResizableContainer = exports.ResizableContainer = (0, _styles.styled)('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  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%'
+  }
+}));

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -9,33 +9,13 @@ 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 _styles = require("@mui/material/styles");
 var _ChartContainer = require("../ChartContainer");
 var _useChartContainerDimensions = require("./useChartContainerDimensions");
+var _ResizableContainer = require("./ResizableContainer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height"];
 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 ResizableContainer = (0, _styles.styled)('div', {
-  name: 'MuiResponsiveChart',
-  slot: 'Container'
-})(({
-  ownerState
-}) => ({
-  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%'
-  }
-}));
 const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
@@ -43,7 +23,7 @@ const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, {
     ref: containerRef,
     ownerState: {
       width: inWidth,
@@ -236,5 +216,28 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
   }))
 } : void 0;

package/ScatterChart/ScatterChart.d.ts

@@ -6,7 +6,7 @@ import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';