@mui/x-charts 7.3.0 → 7.3.2

package/PieChart/PieChart.js

@@ -16,9 +16,10 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
+var _ChartsOverlay = require("../ChartsOverlay/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 && Object.prototype.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; }
+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 defaultMargin = {
   top: 5,
   bottom: 5,
@@ -68,7 +69,8 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    loading
   } = props;
   const isRTL = (0, _useIsRTL.useIsRTL)();
   const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -107,10 +109,17 @@ function PieChart(props) {
       slotProps: slotProps,
       onItemClick: onItemClick,
       skipAnimation: skipAnimation
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+      loading: loading,
+      slots: slots,
+      slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -132,30 +141,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -183,30 +169,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The props of the legend.
    * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
@@ -223,6 +186,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * 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.
@@ -244,32 +211,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -307,30 +252,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
     height: _propTypes.default.number,
     width: _propTypes.default.number,
@@ -344,6 +266,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -396,6 +319,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/PieChart/PiePlot.js

@@ -15,7 +15,7 @@ var _utils = require("../internals/utils");
 var _getPieCoordinates = require("./getPieCoordinates");
 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 && Object.prototype.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; }
+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; }
 /**
  * Demos:
  *

package/PieChart/dataTransform/transition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@react-spring/core" />
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/PieChart/dataTransform/useTransformData.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../../context/InteractionProvider");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 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 && Object.prototype.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; }
+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; }
 function useTransformData(series) {
   const {
     id: seriesId,

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -15,7 +15,7 @@ var _useChartContainerDimensions = require("./useChartContainerDimensions");
 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 && Object.prototype.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; }
+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'
@@ -116,6 +116,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -168,6 +169,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -9,7 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 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 && Object.prototype.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; }
+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 useChartContainerDimensions = (inWidth, inHeight) => {
   const rootRef = React.useRef(null);
   const displayError = React.useRef(false);

package/ScatterChart/Scatter.js

@@ -13,7 +13,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 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 && Object.prototype.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; }
+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; }
 /**
  * Demos:
  *

package/ScatterChart/ScatterChart.d.ts

@@ -6,17 +6,20 @@ 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 { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
+import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots {
 }
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
      * The series to display in the scatter chart.
+     * An array of [[ScatterSeriesType]] objects.
      */
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     /**

package/ScatterChart/ScatterChart.js

@@ -13,12 +13,14 @@ var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
+var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 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 && Object.prototype.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; }
+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; }
 /**
  * Demos:
  *
@@ -33,6 +35,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
   const {
     xAxis,
     yAxis,
+    zAxis,
     series,
     tooltip,
     axisHighlight,
@@ -52,9 +55,10 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     onItemClick,
     children,
     slots,
-    slotProps
+    slotProps,
+    loading
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'scatter'
@@ -66,32 +70,39 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
-      voronoiMaxRadius: voronoiMaxRadius,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-      topAxis: topAxis,
-      leftAxis: leftAxis,
-      rightAxis: rightAxis,
-      bottomAxis: bottomAxis,
-      slots: slots,
-      slotProps: slotProps
-    }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
-      vertical: grid.vertical,
-      horizontal: grid.horizontal
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: disableVoronoi ? onItemClick : undefined
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
-      slots: slots,
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
-      x: "none",
-      y: "none"
-    }, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
-      trigger: "item"
-    }, tooltip)), children]
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, {
+      zAxis: zAxis,
+      children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
+        voronoiMaxRadius: voronoiMaxRadius,
+        onItemClick: onItemClick
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+        topAxis: topAxis,
+        leftAxis: leftAxis,
+        rightAxis: rightAxis,
+        bottomAxis: bottomAxis,
+        slots: slots,
+        slotProps: slotProps
+      }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
+        vertical: grid.vertical,
+        horizontal: grid.horizontal
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, {
+        slots: slots,
+        slotProps: slotProps,
+        onItemClick: disableVoronoi ? onItemClick : undefined
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
+        slots: slots,
+        slotProps: slotProps
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
+        x: "none",
+        y: "none"
+      }, axisHighlight)), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, tooltip)), children]
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
@@ -113,30 +124,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -176,30 +164,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * @deprecated Consider using `slotProps.legend` instead.
    */
@@ -214,6 +179,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * If `true`, a loading overlay is displayed.
+   */
+  loading: _propTypes.default.bool,
   /**
    * 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.
@@ -237,32 +206,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the scatter chart.
+   * An array of [[ScatterSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -295,30 +242,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
     height: _propTypes.default.number,
     width: _propTypes.default.number,
@@ -337,6 +261,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -389,6 +314,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -437,5 +363,28 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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({
+      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
+    }), _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)
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
   }))
 } : void 0;

package/ScatterChart/ScatterPlot.js

@@ -12,9 +12,10 @@ var _Scatter = require("./Scatter");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 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 && Object.prototype.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; }
+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; }
 /**
  * Demos:
  *
@@ -33,6 +34,10 @@ function ScatterPlot(props) {
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).scatter;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
   if (seriesData === undefined) {
     return null;
   }
@@ -48,6 +53,7 @@ function ScatterPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const defaultZAxisId = zAxisIds[0];
   const ScatterItems = slots?.scatter ?? _Scatter.Scatter;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesOrder.map(seriesId => {
@@ -55,10 +61,11 @@ function ScatterPlot(props) {
         id,
         xAxisKey,
         yAxisKey,
+        zAxisKey,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId]);
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId], zAxis[zAxisKey ?? defaultZAxisId]);
       const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({