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

package/esm/Heatmap/seriesConfig/index.js

@@ -1,10 +1,11 @@
-import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
 import { getBaseExtremum } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import getItemAtPosition from "./getItemAtPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 cartesianSeriesTypes.addType('heatmap');
 export const heatmapSeriesConfig = {
@@ -17,5 +18,7 @@ export const heatmapSeriesConfig = {
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  getItemAtPosition,
   keyboardFocusHandler
 };

package/esm/Heatmap/useHeatmapProps.d.ts

@@ -0,0 +1,24 @@
+import { type ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
+import * as React from 'react';
+import { type ChartsLegendProps, type ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
+import type { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
+import { type ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
+import type { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
+import { type HeatmapPluginSignatures } from "./Heatmap.plugins.js";
+import { type HeatmapProps } from "./Heatmap.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import { type HeatmapPlotProps } from "./HeatmapPlot.js";
+export type UseHeatmapProps = HeatmapProps;
+export declare function useHeatmapProps(props: UseHeatmapProps): {
+  chartDataProviderProProps: ChartDataProviderProProps<"heatmap", HeatmapPluginSignatures>;
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  heatmapPlotProps: HeatmapPlotProps;
+  clipPathProps: ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  overlayProps: ChartsOverlayProps;
+  chartsAxisProps: ChartsAxisProps;
+  legendProps: ChartsLegendProps | ChartsLegendSlotExtension;
+  children: React.ReactNode;
+};

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.d.ts

@@ -6,7 +6,7 @@ import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { type LineChartProPluginSignatures } from "./LineChartPro.plugins.js";
 export interface LineChartProSlots extends Omit<LineChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface LineChartProSlotProps extends Omit<LineChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartContainerProProps<'line', LineChartProPluginSignatures>, 'series' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.
    * @default {}

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.d.ts

@@ -6,7 +6,7 @@ import { type PieChartProPluginSignatures } from "./PieChartPro.plugins.js";
 import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 export interface PieChartProSlots extends Omit<PieChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface PieChartProSlotProps extends Omit<PieChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartContainerProProps<'pie', PieChartProPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

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.d.ts

@@ -5,7 +5,7 @@ import { type ChartsToolbarProSlotProps, type ChartsToolbarProSlots } from "../C
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
 export interface RadarChartProSlots extends Omit<RadarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface RadarChartProSlotProps extends Omit<RadarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<RadarDataProviderProps<RadarChartProPluginSignatures>, 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<RadarDataProviderProps<RadarChartProPluginSignatures>, 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

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/RadarChartPro/RadarChartPro.plugins.d.ts

@@ -1,4 +1,4 @@
-import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartPolarAxisSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
+import type { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartVisibilityManagerSignature, UseChartKeyboardNavigationSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type RadarChartProPluginSignatures = [UseChartTooltipSignature<'radar'>, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'radar'>, UseChartProExportSignature];
+export type RadarChartProPluginSignatures = [UseChartTooltipSignature<'radar'>, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartVisibilityManagerSignature<'radar'>, UseChartProExportSignature];
 export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<RadarChartProPluginSignatures>;

package/esm/RadarChartPro/RadarChartPro.plugins.js

@@ -1,3 +1,3 @@
-import { useChartHighlight, useChartTooltip, useChartInteraction, useChartPolarAxis, useChartVisibilityManager } from '@mui/x-charts/internals';
+import { RADAR_PLUGINS } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const RADAR_CHART_PRO_PLUGINS = [useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight, useChartVisibilityManager, useChartProExport];
+export const RADAR_CHART_PRO_PLUGINS = [...RADAR_PLUGINS, useChartProExport];

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.d.ts

@@ -13,7 +13,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
    */
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**
    * Overridable component slots.
    * @default {}