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

package/Heatmap/useHeatmapProps.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeatmapProps = useHeatmapProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("@mui/x-charts/constants");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _Heatmap = require("./Heatmap.plugins");
+var _seriesConfig = require("./seriesConfig");
+const seriesConfig = {
+  heatmap: _seriesConfig.heatmapSeriesConfig
+};
+
+// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
+const defaultColorMap = (0, _d3Interpolate.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);
+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 = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const xAxisWithDefault = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
+    id: _constants.DEFAULT_X_AXIS_KEY
+  }]).map(axis => (0, _extends2.default)({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis, {
+    data: axis.data ?? getDefaultDataForXAxis(series)
+  })), [series, xAxis]);
+  const yAxisWithDefault = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
+    id: _constants.DEFAULT_Y_AXIS_KEY
+  }]).map(axis => (0, _extends2.default)({
+    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 => (0, _extends2.default)({
+    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.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: (0, _extends2.default)({}, slots, {
+      legend: slots?.legend ?? _ChartsLegend.ContinuousColorLegend
+    }),
+    slotProps: {
+      legend: (0, _extends2.default)({
+        labelPosition: 'extremes'
+      }, slotProps?.legend)
+    },
+    sx: slotProps?.legend?.direction === 'vertical' ? {
+      height: 150
+    } : {
+      width: '50%'
+    }
+  };
+  return {
+    chartDataProviderProProps,
+    chartsWrapperProps,
+    heatmapPlotProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    children
+  };
+}

package/LineChartPro/LineChartPro.js

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

package/PieChartPro/PieChartPro.js

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

package/RadarChartPro/RadarChartPro.js

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

package/SankeyChart/SankeyChart.js

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

package/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/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/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/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/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/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/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -61,6 +61,16 @@ 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 (0, _extends2.default)({
       id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
@@ -69,7 +79,8 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       data: {
         nodes: [],
         links: []
-      }
+      },
+      highlightScope
     });
   }
 
@@ -100,6 +111,7 @@ const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
     valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
+    highlightScope,
     data
   });
 };

package/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/SankeyChart/seriesConfig/identifierCleaner.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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
+  };
+};
+var _default = exports.default = identifierCleaner;

package/SankeyChart/seriesConfig/index.js

@@ -11,6 +11,7 @@ var _calculateSankeyLayout = require("../calculateSankeyLayout");
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
+var _identifierCleaner = _interopRequireDefault(require("./identifierCleaner"));
 // Simple passthrough functions for sankey chart
 const seriesProcessor = series => series;
 const colorProcessor = series => series;
@@ -34,5 +35,6 @@ const sankeySeriesConfig = exports.sankeySeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.default
+  identifierSerializer: _identifierSerializer.default,
+  identifierCleaner: _identifierCleaner.default
 };

package/ScatterChartPro/ScatterChartPro.js

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

package/esm/BarChartPro/BarChartPro.js

@@ -97,6 +97,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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.
    * Default is set to 'band' in the bar direction.
@@ -180,7 +185,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   })),
   /**
@@ -201,7 +206,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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.
@@ -231,7 +236,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.string,
     type: PropTypes.oneOf(['bar']).isRequired
   })),
   /**
@@ -356,7 +361,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['bar']).isRequired
   }),
   /**