@mui/x-charts-pro 8.27.0 → 9.0.0-alpha.0

package/esm/Heatmap/useHeatmapProps.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
+import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
+import { heatmapSeriesConfig } from "./seriesConfig/index.js";
+const seriesConfig = {
+  heatmap: heatmapSeriesConfig
+};
+
+// 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']);
+function getDefaultDataForAxis(series, dimension) {
+  if (series?.[0]?.data === undefined || series[0].data.length === 0) {
+    return [];
+  }
+  return Array.from({
+    length: Math.max(...series[0].data.map(dataPoint => dataPoint[dimension])) + 1
+  }, (_, index) => index);
+}
+const getDefaultDataForXAxis = series => getDefaultDataForAxis(series, 0);
+const getDefaultDataForYAxis = series => getDefaultDataForAxis(series, 1);
+export function useHeatmapProps(props) {
+  const {
+    apiRef,
+    xAxis,
+    yAxis,
+    zAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    onAxisClick,
+    onItemClick,
+    children,
+    slots,
+    slotProps,
+    loading,
+    highlightedItem,
+    onHighlightChange,
+    enableKeyboardNavigation,
+    borderRadius,
+    hideLegend
+  } = props;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const xAxisWithDefault = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
+    id: DEFAULT_X_AXIS_KEY
+  }]).map(axis => _extends({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis, {
+    data: axis.data ?? getDefaultDataForXAxis(series)
+  })), [series, xAxis]);
+  const yAxisWithDefault = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
+    id: DEFAULT_Y_AXIS_KEY
+  }]).map(axis => _extends({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis, {
+    data: axis.data ?? getDefaultDataForYAxis(series)
+  })), [series, yAxis]);
+  const zAxisWithDefault = React.useMemo(() => zAxis ?? [{
+    colorMap: {
+      type: 'continuous',
+      min: 0,
+      max: 100,
+      color: defaultColorMap
+    }
+  }], [zAxis]);
+  const seriesWithDefault = series.map(s => _extends({
+    type: 'heatmap'
+  }, s));
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend
+  };
+  const chartDataProviderProProps = {
+    apiRef,
+    seriesConfig,
+    series: seriesWithDefault,
+    width,
+    height,
+    margin,
+    xAxis: xAxisWithDefault,
+    yAxis: yAxisWithDefault,
+    zAxis: zAxisWithDefault,
+    colors,
+    dataset,
+    disableAxisListener: true,
+    highlightedItem,
+    onHighlightChange,
+    enableKeyboardNavigation,
+    onAxisClick,
+    onItemClick,
+    plugins: HEATMAP_PLUGINS
+  };
+  const heatmapPlotProps = {
+    borderRadius,
+    slots,
+    slotProps
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = {
+    slots: _extends({}, slots, {
+      legend: slots?.legend ?? ContinuousColorLegend
+    }),
+    slotProps: {
+      legend: _extends({
+        labelPosition: 'extremes'
+      }, slotProps?.legend)
+    },
+    sx: slotProps?.legend?.direction === 'vertical' ? {
+      height: 150
+    } : {
+      width: '50%'
+    }
+  };
+  return {
+    chartDataProviderProProps,
+    chartsWrapperProps,
+    heatmapPlotProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    children
+  };
+}

package/esm/LineChartPro/LineChartPro.js

@@ -102,6 +102,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -181,7 +186,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   })),
   /**
@@ -202,7 +207,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -232,7 +237,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['line']).isRequired
   })),
   /**
@@ -349,7 +354,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['line']).isRequired
   }),
   /**

package/esm/PieChartPro/PieChartPro.js

@@ -138,7 +138,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['pie']).isRequired
   })),
   /**
@@ -151,7 +151,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -181,7 +181,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['pie']).isRequired
   })),
   /**
@@ -260,7 +260,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['pie']).isRequired
   }),
   /**

package/esm/RadarChartPro/RadarChartPro.js

@@ -110,7 +110,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['radar']).isRequired
   })),
   /**
@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -158,7 +158,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['radar']).isRequired
   })),
   /**
@@ -278,7 +278,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['radar']).isRequired
   }),
   /**

package/esm/SankeyChart/SankeyChart.js

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     subType: PropTypes.oneOf([
     /**
      * Subtype to differentiate between node and link
@@ -112,7 +112,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     'node']).isRequired,
     type: PropTypes.oneOf(['sankey']).isRequired
   }), PropTypes.shape({
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     sourceId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     subType: PropTypes.oneOf([
     /**
@@ -196,7 +196,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     subType: PropTypes.oneOf([
     /**
      * Subtype to differentiate between node and link
@@ -204,7 +204,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     'node']).isRequired,
     type: PropTypes.oneOf(['sankey']).isRequired
   }), PropTypes.shape({
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     sourceId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     subType: PropTypes.oneOf([
     /**

package/esm/SankeyChart/SankeyTooltip/SankeyTooltip.types.d.ts

@@ -1,4 +1,8 @@
-import { type ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipContainerProps, type ChartsTooltipClasses, type ChartsTooltipSlots, type ChartsTooltipSlotProps } from '@mui/x-charts/ChartsTooltip';
+export interface SankeyTooltipSlots extends ChartsTooltipSlots {}
+export interface SankeyTooltipSlotProps extends ChartsTooltipSlotProps {}
+export interface SankeyTooltipClasses extends ChartsTooltipClasses {}
+export interface SankeyTooltipContentClasses extends ChartsTooltipClasses {}
 export interface SankeyTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display

package/esm/SankeyChart/SankeyTooltip/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./SankeyTooltip.js";
 export * from "./SankeyTooltipContent.js";
-export type { SankeyTooltipProps } from "./SankeyTooltip.types.js";
+export type { SankeyTooltipProps, SankeyTooltipClasses, SankeyTooltipContentClasses, SankeyTooltipSlots, SankeyTooltipSlotProps } from "./SankeyTooltip.types.js";

package/esm/SankeyChart/index.d.ts

@@ -14,4 +14,4 @@ export * from "./sankeyHighlightHooks.js";
 export * from "../hooks/useSankeySeries.js";
 export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
 export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
-export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";
+export type { SankeyTooltipProps, SankeyTooltipClasses, SankeyTooltipContentClasses, SankeyTooltipSlots, SankeyTooltipSlotProps } from "./SankeyTooltip/index.js";

package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.d.ts

@@ -4,28 +4,28 @@ import type { SankeyLinkFade, SankeyLinkHighlight, SankeyNodeFade, SankeyNodeHig
  * Get the node highlight configuration from the Sankey series.
  * Defaults to 'nodes' if not specified.
  */
-export declare const selectorNodeHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorNodeHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyNodeHighlight;
 /**
  * Get the node fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export declare const selectorNodeFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorNodeFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyNodeFade;
 /**
  * Get the link highlight configuration from the Sankey series.
  * Defaults to 'links' if not specified.
  */
-export declare const selectorLinkHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorLinkHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyLinkHighlight;
 /**
  * Get the link fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export declare const selectorLinkFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorLinkFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyLinkFade;
 /**
@@ -40,7 +40,7 @@ export declare const selectorSankeyHighlightedItem: (args_0: import("./useSankey
  * - It's the highlighted node (unless highlight mode is 'none')
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
-export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, nodeId: SankeyNodeId) => boolean;
 /**
@@ -49,7 +49,7 @@ export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/i
  * - It's the highlighted link (unless highlight mode is 'none')
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
-export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, link: import("../index.js").SankeyLayoutLinkWithPosition) => boolean;
 /**
@@ -59,6 +59,6 @@ export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/i
  * - This item is not highlighted
  * - The fade mode is 'global' for the highlighted element type
  */
-export declare const selectorIsSankeyItemFaded: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsSankeyItemFaded: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, isHighlighted: boolean) => boolean;

package/esm/SankeyChart/sankey.highlight.types.d.ts

@@ -39,4 +39,8 @@ export type SankeyLinkHighlightScope = {
    * @default 'none'
    */
   fade?: SankeyLinkFade;
+};
+export type SankeyHighlightScope = {
+  nodes: SankeyNodeHighlightScope;
+  links: SankeyLinkHighlightScope;
 };

package/esm/SankeyChart/sankey.types.d.ts

@@ -1,7 +1,7 @@
-import type { HighlightScope, SeriesId } from '@mui/x-charts/internals';
+import type { SeriesId } from '@mui/x-charts/internals';
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import type { SankeyLink as D3SankeyLink, SankeyNode as D3SankeyNode } from "./d3Sankey/index.js";
-import type { SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
+import type { SankeyHighlightScope, SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
 export type SankeyNodeId = string | number;
 export interface SankeyNode {
   /**
@@ -216,7 +216,10 @@ export interface SankeyLayout<WithPosition extends boolean = true> {
 }
 export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id' | 'valueFormatter'> {
   data: SankeyLayout<false>;
-  highlightScope?: HighlightScope;
+  /**
+   * Highlight scope for the series derived from nodeOptions and linksOptions
+   */
+  highlightScope: SankeyHighlightScope;
 }
 type SankeyNodeIdentifierBase = {
   type: 'sankey';

package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -54,6 +54,16 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       color: resolvedColor
     });
   });
+  const highlightScope = {
+    nodes: {
+      highlight: seriesData.nodeOptions?.highlight ?? 'links',
+      fade: seriesData.nodeOptions?.fade ?? 'none'
+    },
+    links: {
+      highlight: seriesData.linkOptions?.highlight ?? 'links',
+      fade: seriesData.linkOptions?.fade ?? 'none'
+    }
+  };
   if (!seriesData.data || !links) {
     return _extends({
       id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
@@ -62,7 +72,8 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       data: {
         nodes: [],
         links: []
-      }
+      },
+      highlightScope
     });
   }
 
@@ -93,6 +104,7 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
     valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
+    highlightScope,
     data
   });
 };

package/esm/SankeyChart/seriesConfig/identifierCleaner.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'sankey'>;
+export default identifierCleaner;

package/esm/SankeyChart/seriesConfig/identifierCleaner.js

@@ -0,0 +1,18 @@
+const identifierCleaner = identifier => {
+  if (identifier.subType === 'node') {
+    return {
+      type: identifier.type,
+      seriesId: identifier.seriesId,
+      subType: 'node',
+      nodeId: identifier.nodeId
+    };
+  }
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    subType: 'link',
+    sourceId: identifier.sourceId,
+    targetId: identifier.targetId
+  };
+};
+export default identifierCleaner;

package/esm/SankeyChart/seriesConfig/index.js

@@ -4,6 +4,7 @@ import { calculateSankeyLayout } from "../calculateSankeyLayout.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 import identifierSerializer from "./identifierSerializer.js";
+import identifierCleaner from "./identifierCleaner.js";
 
 // Simple passthrough functions for sankey chart
 const seriesProcessor = series => series;
@@ -28,5 +29,6 @@ export const sankeySeriesConfig = {
   tooltipItemPositionGetter,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer
+  identifierSerializer,
+  identifierCleaner
 };

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -96,6 +96,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -170,7 +175,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -183,7 +188,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -213,7 +218,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['scatter']).isRequired
   })),
   /**
@@ -325,7 +330,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['scatter']).isRequired
   }),
   /**

package/esm/index.d.ts

@@ -29,8 +29,10 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
+export type { ChartsContainerProProps, ChartsContainerProSlots, ChartsContainerProSlotProps } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
-export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps, ChartContainerProSlots, ChartContainerProSlotProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.0
+ * @mui/x-charts-pro v9.0.0-alpha.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -44,6 +44,7 @@ export * from "./colorPalettes/index.js";
 
 // Pro components
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";

package/esm/internals/index.d.ts

@@ -1,7 +1,13 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
+export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
 export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";
 export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
 export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
-export { defaultSlotsMaterial } from "./material/index.js";
+export { useHeatmapProps } from "../Heatmap/useHeatmapProps.js";
+export { defaultSlotsMaterial } from "./material/index.js";
+export * from "../Heatmap/HeatmapSVGPlot.js";
+export type * from "../Heatmap/Heatmap.types.js";
+export { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/esm/internals/index.js

@@ -1,4 +1,8 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
 export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
-export { defaultSlotsMaterial } from "./material/index.js";
+export { useHeatmapProps } from "../Heatmap/useHeatmapProps.js";
+export { defaultSlotsMaterial } from "./material/index.js";
+export * from "../Heatmap/HeatmapSVGPlot.js";
+export { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/esm/internals/plugins/useChartProExport/common.d.ts

@@ -2,4 +2,8 @@ export declare function createExportIframe(title?: string): HTMLIFrameElement;
 /**
  * Applies styles to an element and returns the previous styles.
  */
-export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+/**
+ * Copies the content of all canvases from the original element to the cloned element.
+ */
+export declare function copyCanvasesContent(original: Element, clone: Element): Promise<void[]>;