@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.1

package/context/ChartDataProviderPro/ChartDataProviderPro.js

@@ -3,44 +3,45 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartsAxesGradients, DrawingProvider, InteractionProvider, PluginProvider, SeriesProvider, AnimationProvider } from '@mui/x-charts/internals';
-import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { DrawingAreaProvider, InteractionProvider, PluginProvider, SeriesProvider, AnimationProvider, SvgRefProvider, SizeProvider } from '@mui/x-charts/internals';
 import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { getReleaseInfo } from "../../internals/utils/releaseInfo.js";
 import { CartesianProviderPro } from "../CartesianProviderPro/index.js";
 import { ZoomProvider } from "../ZoomProvider/index.js";
 import { useChartContainerProProps } from "./useChartDataProviderProProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
-const ChartDataProviderPro = /*#__PURE__*/React.forwardRef(function ChartDataProviderPro(props, ref) {
+function ChartDataProviderPro(props) {
   const {
     zoomProviderProps,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     cartesianProviderProps,
-    chartsSurfaceProps,
+    sizeProviderProps,
     pluginProviderProps,
     animationProviderProps,
     children
-  } = useChartContainerProProps(props, ref);
+  } = useChartContainerProProps(props);
   useLicenseVerifier('x-charts-pro', releaseInfo);
-  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-        children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
-          children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-            children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
-              children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-                children: /*#__PURE__*/_jsx(InteractionProvider, {
-                  children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                    children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                      children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+  return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+    children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+      children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+        children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+          children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
+            children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+              children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
+                children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+                  children: /*#__PURE__*/_jsx(InteractionProvider, {
+                    children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                      children: /*#__PURE__*/_jsx(SvgRefProvider, {
+                        children: children
+                      })
                     }))
-                  }))
-                })
+                  })
+                }))
               }))
             }))
           }))
@@ -48,7 +49,7 @@ const ChartDataProviderPro = /*#__PURE__*/React.forwardRef(function ChartDataPro
       }))
     }))
   }));
-});
+}
 process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/context/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -1,16 +1,14 @@
 import { ZoomProviderProps } from '../ZoomProvider';
 import type { ChartDataProviderProProps } from './ChartDataProviderPro';
-export declare const useChartContainerProProps: (props: ChartDataProviderProProps, ref: React.Ref<SVGSVGElement>) => {
+export declare const useChartContainerProProps: (props: ChartDataProviderProProps) => {
     zoomProviderProps: Omit<ZoomProviderProps, "children">;
     children: import("react").ReactNode;
-    drawingProviderProps: Omit<import("@mui/x-charts/internals").DrawingProviderProps, "children">;
+    drawingAreaProviderProps: Omit<import("@mui/x-charts/internals").DrawingAreaProviderProps, "children">;
     pluginProviderProps: Omit<import("@mui/x-charts/internals").PluginProviderProps, "children">;
     seriesProviderProps: Omit<import("@mui/x-charts/internals").SeriesProviderProps, "children">;
     cartesianProviderProps: Omit<import("@mui/x-charts/internals").CartesianProviderProps, "children">;
     zAxisContextProps: Omit<import("@mui/x-charts").ZAxisContextProviderProps, "children">;
     highlightedProviderProps: Omit<import("@mui/x-charts").HighlightedProviderProps, "children">;
-    chartsSurfaceProps: import("@mui/x-charts").ChartsSurfaceProps & {
-        ref: any;
-    };
+    sizeProviderProps: Omit<import("@mui/x-charts/internals").SizeProviderProps, "children">;
     animationProviderProps: Omit<import("@mui/x-charts/internals").AnimationProviderProps, "children">;
 };

package/context/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["zoom", "onZoomChange"];
 import { useChartDataProviderProps } from '@mui/x-charts/internals';
-export const useChartContainerProProps = (props, ref) => {
+export const useChartContainerProProps = props => {
   const {
       zoom,
       onZoomChange
@@ -11,17 +11,17 @@ export const useChartContainerProProps = (props, ref) => {
     baseProps = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
+    sizeProviderProps,
     pluginProviderProps,
     animationProviderProps,
     xAxis,
     yAxis
-  } = useChartDataProviderProps(baseProps, ref);
+  } = useChartDataProviderProps(baseProps);
   const zoomProviderProps = {
     zoom,
     onZoomChange,
@@ -31,13 +31,13 @@ export const useChartContainerProProps = (props, ref) => {
   return {
     zoomProviderProps,
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     pluginProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
+    sizeProviderProps,
     animationProviderProps
   };
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-alpha.0
+ * @mui/x-charts-pro v8.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/BarChartPro/BarChartPro.js

@@ -99,9 +99,9 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = useBarChartProps(other);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsxs(ChartContainerPro, _extends({
     ref: ref
   }, chartContainerProps, {
@@ -109,7 +109,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     onZoomChange: onZoomChange,
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarChartPlotZoom, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
@@ -121,7 +121,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -238,16 +238,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -276,30 +266,12 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ResizableContainer } from '@mui/x-charts/internals';
+import { ChartsSurface } from '@mui/x-charts';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { ChartDataProviderPro } from "../context/ChartDataProviderPro/index.js";
 import { useChartContainerProProps } from "./useChartContainerProProps.js";
@@ -13,14 +14,19 @@ const releaseInfo = getReleaseInfo();
 const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerPro(props, ref) {
   const {
     chartDataProviderProProps,
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    children,
+    resizableContainerProps,
+    chartsSurfaceProps
   } = useChartContainerProProps(props, ref);
-  return /*#__PURE__*/_jsxs(ResizableContainer, _extends({}, resizableChartContainerProps, {
-    children: [hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps)) : null, /*#__PURE__*/_jsx(Watermark, {
-      packageName: "x-charts-pro",
-      releaseInfo: releaseInfo
-    })]
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/_jsxs(ResizableContainer, _extends({}, resizableContainerProps, {
+      children: [/*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: children
+      })), /*#__PURE__*/_jsx(Watermark, {
+        packageName: "x-charts-pro",
+        releaseInfo: releaseInfo
+      })]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
@@ -86,16 +92,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -109,12 +105,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/ChartContainerPro/useChartContainerProProps.js

@@ -16,12 +16,14 @@ export const useChartContainerProProps = (props, ref) => {
   };
   const {
     chartDataProviderProps,
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    chartsSurfaceProps,
+    resizableContainerProps,
+    children
   } = useChartContainerProps(baseProps, ref);
   return {
     chartDataProviderProProps: _extends({}, chartDataProviderProps, chartDataProviderProProps),
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    resizableContainerProps,
+    chartsSurfaceProps,
+    children
   };
 };

package/modern/Heatmap/Heatmap.js

@@ -7,14 +7,13 @@ import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
 import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
-import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerPro } from "../ChartContainerPro/index.js";
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { plugin as heatmapPlugin } from "./plugin.js";
-import { DefaultHeatmapTooltip } from "./DefaultHeatmapTooltip.js";
+import { HeatmapTooltip } from "./HeatmapTooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
@@ -34,7 +33,6 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     colors,
     dataset,
     sx,
-    tooltip,
     topAxis,
     leftAxis,
     rightAxis,
@@ -65,6 +63,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
       color: defaultColorMap
     }
   }], [zAxis]);
+  const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
   return /*#__PURE__*/_jsxs(ChartContainerPro, {
     ref: ref,
     plugins: [heatmapPlugin],
@@ -102,14 +101,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({
-      trigger: "item"
-    }, tooltip, {
-      slots: _extends({
-        itemContent: DefaultHeatmapTooltip
-      }, slots),
-      slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsClipPath, {
+    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -190,16 +182,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -227,26 +209,13 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The configuration of the tooltip.
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
+  tooltip: PropTypes.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */