@mui/x-charts-pro 8.4.0 → 8.5.1

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
+import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mui/x-charts/ScatterChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 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 ScatterChartProSlots extends ScatterChartSlots, Partial<ChartsSlotsPro> {}
+export interface ScatterChartProSlotProps extends ScatterChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: ScatterChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ScatterChartProSlotProps;
 }
 /**
  * Demos:

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -66,9 +66,10 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
     plugins: SCATTER_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
@@ -89,6 +90,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
+      setAxisZoomData: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -311,6 +313,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -375,6 +378,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -434,6 +438,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -493,6 +498,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -552,6 +558,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -611,6 +618,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -670,6 +678,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -729,6 +738,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -800,6 +810,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -863,6 +874,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -921,6 +933,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -979,6 +992,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1037,6 +1051,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1095,6 +1110,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1153,6 +1169,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number
@@ -1211,6 +1228,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
       step: PropTypes.number

package/esm/context/index.d.ts

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

package/esm/context/index.js

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

package/esm/context/useChartApiContext.d.ts

@@ -0,0 +1,9 @@
+import { ChartProApi } from "../ChartContainerPro/index.js";
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ */
+export declare function useChartApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/esm/context/useChartApiContext.js

@@ -0,0 +1,11 @@
+import { useChartApiContext as useChartApiContextCommunity } from '@mui/x-charts/context';
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ */
+export function useChartApiContext() {
+  return useChartApiContextCommunity();
+}

package/esm/hooks/index.d.ts

@@ -1,2 +1,3 @@
-export { useHeatmapSeries } from "./useHeatmapSeries.js";
+export * from "./useHeatmapSeries.js";
+export * from "./useFunnelSeries.js";
 export * from "./zoom/index.js";

package/esm/hooks/index.js

@@ -1,2 +1,3 @@
-export { useHeatmapSeries } from "./useHeatmapSeries.js";
+export * from "./useHeatmapSeries.js";
+export * from "./useFunnelSeries.js";
 export * from "./zoom/index.js";

package/esm/index.d.ts

@@ -25,7 +25,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
-export type { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
+export type { ZoomData, ZoomFilterMode, ZoomSliderShowTooltip, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
@@ -33,6 +33,8 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
+export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
+export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
 export * from "./ChartsToolbarPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.4.0
+ * @mui/x-charts-pro v8.5.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -42,6 +42,8 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
+export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
+export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
 export * from "./ChartsToolbarPro/index.js";

package/esm/internals/material/index.d.ts

@@ -1,4 +1,5 @@
 import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
 import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
 export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;
+export type ChartsSlotPropsPro = { [key in keyof ChartsSlotsPro]: React.ComponentProps<ChartsSlotsPro[key]> };
 export declare const defaultSlotsMaterial: ChartsSlotsPro;

package/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -102,6 +102,14 @@ export const useChartProZoom = ({
       });
     });
   }, [onZoomChange, store, removeIsInteracting]);
+  const setAxisZoomData = React.useCallback((axisId, zoomData) => {
+    setZoomDataCallback(prev => prev.map(prevZoom => {
+      if (prevZoom.axisId !== axisId) {
+        return prevZoom;
+      }
+      return typeof zoomData === 'function' ? zoomData(prevZoom) : zoomData;
+    }));
+  }, [setZoomDataCallback]);
   const moveZoomRange = React.useCallback((axisId, by) => {
     setZoomDataCallback(prevZoomData => {
       return prevZoomData.map(zoom => {
@@ -367,11 +375,13 @@ export const useChartProZoom = ({
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback,
+      setAxisZoomData,
       zoomIn,
       zoomOut
     },
     instance: {
       setZoomData: setZoomDataCallback,
+      setAxisZoomData,
       moveZoomRange,
       zoomIn,
       zoomOut