@mui/x-charts-pro 8.14.0 → 8.14.1

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

@@ -0,0 +1,68 @@
+import type { SankeyLayoutLink, SankeyLayoutNode } from "../sankey.types.js";
+import type { SankeyLinkFade, SankeyLinkHighlight, SankeyNodeFade, SankeyNodeHighlight } from "../sankey.highlight.types.js";
+/**
+ * Get the node highlight configuration from the Sankey series.
+ * Defaults to 'nodes' if not specified.
+ */
+export declare const selectorNodeHighlightConfig: import("reselect").Selector<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<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, SankeyNodeHighlight, any[]>;
+/**
+ * Get the node fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+export declare const selectorNodeFadeConfig: import("reselect").Selector<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<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, SankeyNodeFade, any[]>;
+/**
+ * Get the link highlight configuration from the Sankey series.
+ * Defaults to 'links' if not specified.
+ */
+export declare const selectorLinkHighlightConfig: import("reselect").Selector<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<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, SankeyLinkHighlight, any[]>;
+/**
+ * Get the link fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+export declare const selectorLinkFadeConfig: import("reselect").Selector<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<{}> & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+} & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, SankeyLinkFade, any[]>;
+/**
+ * Get the currently highlighted item in the Sankey chart.
+ * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
+ * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
+ */
+export declare const selectorSankeyHighlightedItem: import("reselect").Selector<import("./useSankeyHighlight.types.js").UseSankeyHighlightState & {
+  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+}, import("../index.js").SankeyItemIdentifier | null, []>;
+/**
+ * Determines if a specific node should be highlighted.
+ * A node is highlighted if:
+ * - 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: import("reselect").Selector<any, boolean, [node: SankeyLayoutNode]>;
+/**
+ * Selector that determines if a specific link should be highlighted.
+ * A link is highlighted if:
+ * - 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: import("reselect").Selector<any, boolean, [link: SankeyLayoutLink]>;
+/**
+ * Selector that determines if an item should be faded.
+ * An item is faded if:
+ * - There's a highlighted item
+ * - This item is not highlighted
+ * - The fade mode is 'global' for the highlighted element type
+ */
+export declare const selectorIsSankeyItemFaded: import("reselect").Selector<any, boolean, [isHighlighted: any]>;

package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -0,0 +1,120 @@
+import { createSelector } from '@mui/x-charts/internals';
+const selectorSankeyHighlight = state => state.highlight;
+const selectSeries = state => state.series;
+const selectorSankeySeries = createSelector([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const DEFAULT_NODE_HIGHLIGHT = 'links';
+const DEFAULT_LINK_HIGHLIGHT = 'links';
+const DEFAULT_FADE = 'none';
+
+/**
+ * Get the node highlight configuration from the Sankey series.
+ * Defaults to 'nodes' if not specified.
+ */
+export const selectorNodeHighlightConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
+
+/**
+ * Get the node fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+export const selectorNodeFadeConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
+
+/**
+ * Get the link highlight configuration from the Sankey series.
+ * Defaults to 'links' if not specified.
+ */
+export const selectorLinkHighlightConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
+
+/**
+ * Get the link fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+export const selectorLinkFadeConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
+
+/**
+ * Get the currently highlighted item in the Sankey chart.
+ * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
+ * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
+ */
+export const selectorSankeyHighlightedItem = createSelector([selectorSankeyHighlight], highlight => highlight.item);
+
+/**
+ * Determines if a specific node should be highlighted.
+ * A node is highlighted if:
+ * - It's the highlighted node (unless highlight mode is 'none')
+ * - It's connected to a highlighted link (based on linkOptions.highlight)
+ */
+export const selectorIsNodeHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (_, node) => node.id], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
+  if (!highlightedItem) {
+    return false;
+  }
+  if (highlightedItem.subType === 'node' && highlightedItem.nodeId === nodeId) {
+    return nodeHighlight !== 'none';
+  }
+  if (highlightedItem.subType === 'link') {
+    if (!linkHighlight || linkHighlight === 'none' || linkHighlight === 'links') {
+      return false;
+    }
+    const {
+      sourceId,
+      targetId
+    } = highlightedItem;
+    switch (linkHighlight) {
+      case 'nodes':
+        return nodeId === sourceId || nodeId === targetId;
+      case 'source':
+        return nodeId === sourceId;
+      case 'target':
+        return nodeId === targetId;
+      default:
+        return false;
+    }
+  }
+  return false;
+});
+
+/**
+ * Selector that determines if a specific link should be highlighted.
+ * A link is highlighted if:
+ * - It's the highlighted link (unless highlight mode is 'none')
+ * - It's connected to a highlighted node (based on nodeOptions.highlight)
+ */
+export const selectorIsLinkHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (_, link) => link], (highlightedItem, nodeHighlight, linkHighlight, link) => {
+  if (!highlightedItem) {
+    return false;
+  }
+  if (highlightedItem.subType === 'link' && highlightedItem.sourceId === link.source.id && highlightedItem.targetId === link.target.id) {
+    return linkHighlight !== 'none';
+  }
+  if (highlightedItem.subType === 'node') {
+    if (!nodeHighlight || nodeHighlight === 'none' || nodeHighlight === 'nodes') {
+      return false;
+    }
+    const highlightedNodeId = highlightedItem.nodeId;
+    switch (nodeHighlight) {
+      case 'links':
+        return link.source.id === highlightedNodeId || link.target.id === highlightedNodeId;
+      case 'incoming':
+        return link.target.id === highlightedNodeId;
+      case 'outgoing':
+        return link.source.id === highlightedNodeId;
+      default:
+        return false;
+    }
+  }
+  return false;
+});
+
+/**
+ * Selector that determines if an item should be faded.
+ * An item is faded if:
+ * - There's a highlighted item
+ * - This item is not highlighted
+ * - The fade mode is 'global' for the highlighted element type
+ */
+export const selectorIsSankeyItemFaded = createSelector([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (_, isHighlighted) => isHighlighted], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
+  if (!highlightedItem || isHighlighted) {
+    return false;
+  }
+  const fadeMode = highlightedItem.subType === 'node' ? nodeFade : linkFade;
+  return fadeMode === 'global';
+});

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

@@ -0,0 +1,55 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { ChartPluginSignature } from '@mui/x-charts/internals';
+import { SankeyItemIdentifier } from "../sankey.types.js";
+/**
+ * The data of the highlighted item in a Sankey chart.
+ * Can be either a node or a link.
+ *
+ * @example
+ * // Highlight a node
+ * { type: 'sankey', seriesId: 'series-1', subType: 'node', nodeId: 'A' }
+ *
+ * // Highlight a link
+ * { type: 'sankey', seriesId: 'series-1', subType: 'link', sourceId: 'A', targetId: 'B' }
+ *
+ * // Clear the highlight
+ * null
+ */
+export type SankeyHighlightItemData = SankeyItemIdentifier;
+export interface UseSankeyHighlightInstance {
+  /**
+   * Remove all highlight.
+   */
+  clearHighlight: () => void;
+  /**
+   * Set the highlighted item.
+   * @param {SankeyHighlightItemData} item The item to highlight.
+   */
+  setHighlight: (item: SankeyHighlightItemData) => void;
+}
+export interface UseSankeyHighlightParameters {
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?: SankeyHighlightItemData | null;
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {SankeyHighlightItemData | null} highlightedItem The newly highlighted item.
+   */
+  onHighlightChange?: (highlightedItem: SankeyHighlightItemData | null) => void;
+}
+export type UseSankeyHighlightDefaultizedParameters = DefaultizedProps<UseSankeyHighlightParameters, 'highlightedItem'>;
+export interface UseSankeyHighlightState {
+  highlight: {
+    item: SankeyHighlightItemData | null;
+  };
+}
+export type UseSankeyHighlightSignature = ChartPluginSignature<{
+  instance: UseSankeyHighlightInstance;
+  state: UseSankeyHighlightState;
+  params: UseSankeyHighlightParameters;
+  defaultizedParams: UseSankeyHighlightDefaultizedParameters;
+  modelNames: 'highlightedItem';
+}>;

package/esm/SankeyChart/plugins/useSankeyHighlight.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+export type SankeyNodeHighlight = 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none';
+export type SankeyNodeFade = 'global' | 'none';
+export type SankeyLinkHighlight = 'links' | 'nodes' | 'source' | 'target' | 'none';
+export type SankeyLinkFade = 'global' | 'none';
+export type SankeyNodeHighlightScope = {
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+export type SankeyLinkHighlightScope = {
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};

package/esm/SankeyChart/sankey.highlight.types.js

@@ -0,0 +1,3 @@
+'use client';
+
+export {};

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

@@ -1,6 +1,7 @@
 import type { HighlightScope, SeriesId } from '@mui/x-charts/internals';
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import type { SankeyLink as D3SankeyLink, SankeyNode as D3SankeyNode } from '@mui/x-charts-vendor/d3-sankey';
+import type { SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
 export type SankeyNodeId = string | number;
 export interface SankeyNode {
   /**
@@ -79,7 +80,7 @@ export type SankeyNodeOptions = {
    * @returns {number} Comparison result
    */
   sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
-};
+} & SankeyNodeHighlightScope;
 export type SankeyLinkOptions = {
   /**
    * Default color for links without specified colors.
@@ -111,7 +112,7 @@ export type SankeyLinkOptions = {
    * @default 10
    */
   curveCorrection?: number;
-};
+} & SankeyLinkHighlightScope;
 export interface SankeyData {
   /**
    * An array of node configs for the Sankey diagram

package/esm/SankeyChart/sankeyClasses.d.ts

@@ -12,4 +12,4 @@ export declare function getSankeyPlotUtilityClass(slot: string): string;
 export declare const sankeyPlotClasses: SankeyPlotClasses;
 export declare const useUtilityClasses: (ownerState: {
   classes?: Partial<SankeyPlotClasses>;
-}) => Record<"root" | "nodes" | "links" | "linkLabels", string>;
+}) => Record<"nodes" | "links" | "root" | "linkLabels", string>;

package/esm/SankeyChart/useSankeyChartProps.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "loading", "className", "apiRef", "onNodeClick", "onLinkClick"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "apiRef", "onNodeClick", "onLinkClick"];
 import { DEFAULT_MARGINS } from '@mui/x-charts/constants';
 import { defaultizeMargin } from '@mui/x-charts/internals';
 import { SANKEY_CHART_PLUGINS } from "./SankeyChart.plugins.js";
@@ -24,8 +24,8 @@ export const useSankeyChartProps = props => {
       slots,
       slotProps,
       loading,
-      // highlightedItem,
-      // onHighlightChange,
+      highlightedItem,
+      onHighlightChange,
       className,
       apiRef,
       onNodeClick,
@@ -42,8 +42,8 @@ export const useSankeyChartProps = props => {
     margin,
     colors,
     sx,
-    // highlightedItem,
-    // onHighlightChange,
+    highlightedItem,
+    onHighlightChange,
     className,
     apiRef,
     plugins: SANKEY_CHART_PLUGINS

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.0
+ * @mui/x-charts-pro v8.14.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.14.0
+ * @mui/x-charts-pro v8.14.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.14.0",
+  "version": "8.14.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "8.14.0",
-    "@mui/x-charts": "8.14.0",
-    "@mui/x-internals": "8.14.0",
+    "@mui/x-charts": "8.14.1",
+    "@mui/x-charts-vendor": "8.14.1",
     "@mui/x-internal-gestures": "0.3.3",
-    "@mui/x-license": "8.14.0"
+    "@mui/x-internals": "8.14.0",
+    "@mui/x-license": "8.14.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",