@mui/x-charts-pro 8.1.0 → 8.3.0

package/FunnelChart/useFunnelChartProps.d.ts

@@ -1,11 +1,10 @@
 import { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
-import { ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
 import { ChartsWrapperProps } from '@mui/x-charts/internals';
 import { ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { FunnelPlotProps } from "./FunnelPlot.js";
-import type { FunnelChartProps } from './FunnelChart';
+import type { FunnelChartProps } from "./FunnelChart.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props
@@ -20,10 +19,6 @@ export declare const useFunnelChartProps: (props: FunnelChartProps) => {
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;
   legendProps: ChartsLegendSlotExtension;
-  clipPathGroupProps: {
-    clipPath: string;
-  };
-  clipPathProps: ChartsClipPathProps;
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   axisHighlightProps: ChartsAxisHighlightProps;
   children: import("react").ReactNode;

package/FunnelChart/useFunnelChartProps.js

@@ -9,10 +9,10 @@ exports.useFunnelChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("@mui/x-charts/constants");
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-charts/internals");
 var _warning = require("@mui/x-internals/warning");
-const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef"];
+var _colorPalettes = require("@mui/x-charts/colorPalettes");
+const _excluded = ["categoryAxis", "series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "onItemClick", "highlightedItem", "onHighlightChange", "className", "hideLegend", "axisHighlight", "apiRef", "gap"];
 function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   const maxSeriesLength = Math.max(...series.map(s => (s.data ?? []).length), 0);
   const maxSeriesValue = Array.from({
@@ -20,7 +20,7 @@ function getCategoryAxisConfig(categoryAxis, series, isHorizontal, direction) {
   }, (_, index) => series.reduce((a, s) => a + (s.data?.[index]?.value ?? 0), 0));
   if (process.env.NODE_ENV !== 'production') {
     if ((categoryAxis?.position === 'left' || categoryAxis?.position === 'right') && isHorizontal || (categoryAxis?.position === 'top' || categoryAxis?.position === 'bottom') && !isHorizontal) {
-      (0, _warning.warnOnce)([`MUI X: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
+      (0, _warning.warnOnce)([`MUI X Charts: the categoryAxis position is set to '${categoryAxis.position}' but the series layout is ${isHorizontal ? 'horizontal' : 'vertical'}.`, `Ensure that the categoryAxis position is set to '${isHorizontal ? 'top' : 'left'}' or '${isHorizontal ? 'bottom' : 'right'}' for ${isHorizontal ? 'horizontal' : 'vertical'} layout.\n`], 'warning');
     }
   }
   const side = isHorizontal ? 'bottom' : 'left';
@@ -90,12 +90,11 @@ const useFunnelChartProps = props => {
       onHighlightChange,
       className,
       axisHighlight,
-      apiRef
+      apiRef,
+      gap
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _internals.defaultizeMargin)(marginProps, _constants.DEFAULT_MARGINS);
-  const id = (0, _useId.default)();
-  const clipPathId = `${id}-clip-path`;
   const isHorizontal = series.some(s => s.layout === 'horizontal');
   const valueAxisConfig = {
     id: isHorizontal ? _constants.DEFAULT_Y_AXIS_KEY : _constants.DEFAULT_X_AXIS_KEY,
@@ -113,7 +112,7 @@ const useFunnelChartProps = props => {
     width,
     height,
     margin,
-    colors,
+    colors: colors ?? _colorPalettes.strawberrySkyPalette,
     xAxis: [xAxis],
     yAxis: [yAxis],
     sx,
@@ -123,6 +122,7 @@ const useFunnelChartProps = props => {
     apiRef
   });
   const funnelPlotProps = {
+    gap,
     onItemClick,
     slots,
     slotProps
@@ -140,12 +140,6 @@ const useFunnelChartProps = props => {
     slots,
     slotProps
   };
-  const clipPathGroupProps = {
-    clipPath: `url(#${clipPathId})`
-  };
-  const clipPathProps = {
-    id: clipPathId
-  };
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
@@ -158,8 +152,6 @@ const useFunnelChartProps = props => {
     overlayProps,
     chartsAxisProps,
     legendProps,
-    clipPathGroupProps,
-    clipPathProps,
     chartsWrapperProps,
     axisHighlightProps,
     children

package/Heatmap/Heatmap.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
-import { ChartsAxisSlots, ChartsAxisSlotProps, ChartsXAxisProps, ChartsYAxisProps, AxisConfig } from '@mui/x-charts/internals';
+import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-charts/internals';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
@@ -25,13 +25,13 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
+  xAxis: Readonly<Omit<MakeOptional<XAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
+  yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeriesType]] objects.

package/Heatmap/Heatmap.js

@@ -194,7 +194,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**
@@ -292,16 +292,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func,
-    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
-      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
-      maxEnd: _propTypes.default.number,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
+    valueFormatter: _propTypes.default.func
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -359,16 +350,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number,
-    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
-      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
-      maxEnd: _propTypes.default.number,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
+    width: _propTypes.default.number
   })).isRequired,
   /**
    * The configuration of the z-axes.

package/LineChartPro/LineChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { LineChartProps } from '@mui/x-charts/LineChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/LineChartPro/LineChartPro.js

@@ -22,11 +22,13 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _internals = require("@mui/x-charts/internals");
+var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _LineChartPro = require("./LineChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
  * Demos:
  *
@@ -46,7 +48,8 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -78,10 +81,10 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -96,6 +99,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -197,7 +201,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**
@@ -225,6 +229,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[LineSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * @default false
@@ -312,6 +321,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -372,6 +384,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -427,6 +442,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -482,6 +500,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -537,6 +558,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -592,6 +616,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -647,6 +674,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -702,6 +732,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),
@@ -769,6 +802,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -828,6 +864,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -882,6 +921,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -936,6 +978,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -990,6 +1035,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1044,6 +1092,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1098,6 +1149,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1152,6 +1206,9 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
 import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {}
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/ScatterChartPro/ScatterChartPro.js

@@ -21,11 +21,13 @@ var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _internals = require("@mui/x-charts/internals");
+var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _ScatterChartPro = require("./ScatterChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
  * Demos:
  *
@@ -45,7 +47,8 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -72,8 +75,8 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
@@ -90,6 +93,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
+      exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
@@ -188,7 +192,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**
@@ -214,6 +218,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -306,6 +315,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -366,6 +378,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -421,6 +436,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -476,6 +494,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -531,6 +552,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -586,6 +610,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -641,6 +668,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -696,6 +726,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),
@@ -763,6 +796,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -822,6 +858,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -876,6 +915,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -930,6 +972,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -984,6 +1029,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1038,6 +1086,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1092,6 +1143,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1146,6 +1200,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),

package/esm/BarChartPro/BarChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { BarChartProps } from '@mui/x-charts/BarChart';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {}
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *