@mui/x-charts-pro 8.10.2 → 8.11.1

package/esm/SankeyChart/index.d.ts

@@ -0,0 +1,9 @@
+export { SankeyChart as Unstable_SankeyChart } from "./SankeyChart.js";
+export type { SankeyChartProps, SankeySeries } from "./SankeyChart.js";
+export { SankeyPlot } from "./SankeyPlot.js";
+export type { SankeyPlotProps } from "./SankeyPlot.js";
+export * from "./sankey.types.js";
+export * from "./sankeySlots.types.js";
+export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
+export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
+export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";

package/esm/SankeyChart/index.js

@@ -0,0 +1,6 @@
+export { SankeyChart as Unstable_SankeyChart } from "./SankeyChart.js";
+export { SankeyPlot } from "./SankeyPlot.js";
+export * from "./sankey.types.js";
+export * from "./sankeySlots.types.js";
+export { sankeyPlotClasses } from "./sankeyClasses.js";
+export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";

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

@@ -0,0 +1,225 @@
+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';
+export type SankeyNodeId = string | number;
+export interface SankeyNode {
+  /**
+   * Unique identifier for the node
+   */
+  id: SankeyNodeId;
+  /**
+   * The node label to display
+   */
+  label?: string;
+  /**
+   * Optional custom data for the node
+   */
+  data?: any;
+  /**
+   * Optional color override for the node
+   */
+  color?: string;
+}
+export interface SankeyLink {
+  /**
+   * Source node ID
+   */
+  source: SankeyNodeId;
+  /**
+   * Target node ID
+   */
+  target: SankeyNodeId;
+  /**
+   * The value/weight of the link (affects width)
+   */
+  value: number;
+  /**
+   * Optional custom data for the link
+   */
+  data?: any;
+  /**
+   * Optional color override for the link
+   */
+  color?: string;
+}
+export type SankeyNodeOptions = {
+  /**
+   * Default color for nodes without specified colors
+   */
+  color?: string;
+  /**
+   * Width of the nodes in pixels
+   */
+  width?: number;
+  /**
+   * Padding between nodes in pixels
+   */
+  padding?: number;
+  /**
+   * Node alignment strategy
+   * - 'justify': Nodes are evenly distributed across the width.
+   * - 'left': Nodes are  aligned to the left.
+   * - 'right': Nodes are aligned to the right.
+   * - 'center': Nodes are centered.
+   * @default 'justify'
+   */
+  align?: 'justify' | 'left' | 'right' | 'center';
+  /**
+   * Whether to show node labels
+   */
+  showLabels?: boolean;
+  /**
+   * Custom sort function for nodes
+   * @param {SankeyLayoutNode} a - First node to compare
+   * @param {SankeyLayoutNode} b - Second node to compare
+   * @returns {number} Comparison result
+   */
+  sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
+};
+export type SankeyLinkOptions = {
+  /**
+   * Default color for links without specified colors
+   */
+  color?: string;
+  /**
+   * Opacity of the links (0-1)
+   */
+  opacity?: number;
+  /**
+   * Whether to show link values
+   */
+  showValues?: boolean;
+  /**
+   * Custom sort function for links
+   * @param {SankeyLayoutLink} a - First link to compare
+   * @param {SankeyLayoutLink} b - Second link to compare
+   * @returns {number} Comparison result
+   */
+  sort?: (a: SankeyLayoutLink, b: SankeyLayoutLink) => number | null;
+  /**
+   * Applies the given number to the X dimension of the control points of the link's curve function.
+   * This can create better looking links between nodes, but is dependent on the graph layout.
+   * It is specially impacted by the chart height.
+   * @default 10
+   */
+  curveCorrection?: number;
+};
+export interface SankeyData {
+  /**
+   * An array of node configs for the Sankey diagram
+   *
+   * This is optional, but can be used to provide custom labels or styles for nodes.
+   */
+  nodes?: readonly SankeyNode[];
+  /**
+   * Array of links between nodes.
+   *
+   * The node ids will be used as the labels. If you want to provide custom labels, use the `nodes` property.
+   *
+   * Each link should have a `source`, `target`, and `value` property.
+   */
+  links: readonly SankeyLink[];
+}
+export interface SankeySeriesType {
+  /**
+   * Unique identifier for the series
+   */
+  id?: SeriesId;
+  /**
+   * Type identifier for Sankey series
+   */
+  type: 'sankey';
+  /**
+   * The data for the Sankey diagram
+   */
+  data: SankeyData;
+  /**
+   * Optional configuration for the nodes style, layout, and behavior
+   */
+  nodeOptions?: SankeyNodeOptions;
+  /**
+   * Optional configuration for the links style, layout, and behavior
+   */
+  linkOptions?: SankeyLinkOptions;
+  /**
+   * Number of iterations for the layout algorithm
+   * @default 6
+   */
+  iterations?: number;
+}
+/**
+ * Represents the calculated positions and dimensions for a node in the Sankey diagram
+ */
+export interface SankeyLayoutNode extends D3SankeyNode<MakeRequired<SankeyNode, 'label' | 'color'>, SankeyLayoutLink> {
+  targetLinks: SankeyLayoutLink[];
+  sourceLinks: SankeyLayoutLink[];
+  value: number;
+}
+/**
+ * Represents the calculated positions and paths for a link in the Sankey diagram
+ */
+export interface SankeyLayoutLink extends D3SankeyLink<SankeyLayoutNode, Omit<MakeRequired<SankeyLink, 'color'>, 'source' | 'target'>> {
+  path?: string | null;
+  source: SankeyLayoutNode;
+  target: SankeyLayoutNode;
+}
+/**
+ * Calculated layout for the Sankey diagram
+ */
+export interface SankeyLayout {
+  nodes: readonly SankeyLayoutNode[];
+  links: readonly SankeyLayoutLink[];
+}
+export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id'> {
+  data: {
+    nodes: Map<SankeyNodeId, SankeyNode>;
+    links: readonly SankeyLink[];
+  };
+  highlightScope?: HighlightScope;
+}
+type SankeyNodeIdentifierBase = {
+  type: 'sankey';
+  /**
+   * Unique identifier for the series
+   */
+  seriesId: SeriesId;
+};
+export type SankeyNodeIdentifier = SankeyNodeIdentifierBase & {
+  /**
+   * Subtype to differentiate between node and link
+   */
+  subType: 'node';
+  /**
+   * The id of the node
+   */
+  nodeId: SankeyNodeId;
+};
+export type SankeyNodeIdentifierWithData = SankeyNodeIdentifier & {
+  /**
+   * The node object with all the calculated properties
+   */
+  node: SankeyLayoutNode;
+};
+export type SankeyLinkIdentifier = SankeyNodeIdentifierBase & {
+  /**
+   * Subtype to differentiate between node and link
+   */
+  subType: 'link';
+  /**
+   * The id of the source node
+   */
+  sourceId: SankeyNodeId;
+  /**
+   * The id of the target node
+   */
+  targetId: SankeyNodeId;
+};
+export type SankeyLinkIdentifierWithData = SankeyLinkIdentifier & {
+  /**
+   * The link object with all the calculated properties
+   */
+  link: SankeyLayoutLink;
+};
+export type SankeyItemIdentifier = SankeyNodeIdentifier | SankeyLinkIdentifier;
+export type SankeyItemIdentifierWithData = SankeyNodeIdentifierWithData | SankeyLinkIdentifierWithData;
+export {};

package/esm/SankeyChart/sankey.types.js

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

package/esm/SankeyChart/sankeyClasses.d.ts

@@ -0,0 +1,15 @@
+export interface SankeyPlotClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the nodes container. */
+  nodes: string;
+  /** Styles applied to the links container. */
+  links: string;
+  /** Styles applied to the link label container. */
+  linkLabels: string;
+}
+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>;

package/esm/SankeyChart/sankeyClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getSankeyPlotUtilityClass(slot) {
+  return generateUtilityClass('MuiSankeyChart', slot);
+}
+export const sankeyPlotClasses = generateUtilityClasses('MuiSankeyChart', ['root', 'nodes', 'links', 'linkLabels']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    nodes: ['nodes'],
+    links: ['links'],
+    linkLabels: ['linkLabels']
+  };
+  return composeClasses(slots, getSankeyPlotUtilityClass, classes);
+};

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

@@ -0,0 +1,24 @@
+import { ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
+import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { ChartsSlotProps, ChartsSlots } from '@mui/x-charts/internals';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
+export interface SankeyChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface SankeyChartSlotProps extends Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
+  /**
+   * Slot props for the tooltip component.
+   * @default {}
+   */
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+}
+export interface SankeyChartSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: SankeyChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: SankeyChartSlotProps;
+}

package/esm/SankeyChart/sankeySlots.types.js

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

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

@@ -0,0 +1,2 @@
+import type { GetSeriesWithDefaultValues } from '@mui/x-charts/internals';
+export declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'sankey'>;

package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+  const nodeMap = new Map();
+  const nodeColor = seriesData.nodeOptions?.color;
+  const data = seriesData.data;
+  let colorIndex = -1;
+  if (data.nodes) {
+    data.nodes.forEach(node => {
+      const id = node.id || node.label || '';
+      const label = node.label || `${id}`;
+      colorIndex += 1;
+      nodeMap.set(id, _extends({}, node, {
+        id,
+        label,
+        color: node.color ?? nodeColor ?? colors?.[colorIndex % colors.length]
+      }));
+    });
+  }
+  data.links.forEach(v => {
+    if (!nodeMap.has(v.source)) {
+      colorIndex += 1;
+      const source = {
+        id: v.source,
+        label: `${v.source}`,
+        color: nodeColor ?? colors?.[colorIndex % colors.length]
+      };
+      nodeMap.set(source.id, source);
+    }
+    if (!nodeMap.has(v.target)) {
+      colorIndex += 1;
+      const target = {
+        id: v.target,
+        label: `${v.target}`,
+        color: nodeColor ?? colors?.[colorIndex % colors.length]
+      };
+      nodeMap.set(target.id, target);
+    }
+  });
+  return _extends({
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
+  }, seriesData, {
+    data: {
+      links: data.links,
+      nodes: nodeMap
+    }
+  });
+};

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

@@ -0,0 +1,2 @@
+import type { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const seriesConfig: ChartSeriesTypeConfig<'sankey'>;

package/esm/SankeyChart/seriesConfig/index.js

@@ -0,0 +1,14 @@
+import { getSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.js";
+import { tooltipGetter } from "./tooltipGetter.js";
+
+// Simple passthrough functions for sankey chart
+const seriesProcessor = series => series;
+const colorProcessor = series => series;
+const legendGetter = () => [];
+export const seriesConfig = {
+  seriesProcessor,
+  colorProcessor,
+  legendGetter,
+  tooltipGetter,
+  getSeriesWithDefaultValues
+};

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

@@ -0,0 +1,2 @@
+import type { TooltipGetter } from '@mui/x-charts/internals';
+export declare const tooltipGetter: TooltipGetter<'sankey'>;

package/esm/SankeyChart/seriesConfig/tooltipGetter.js

@@ -0,0 +1,39 @@
+export const tooltipGetter = params => {
+  const {
+    identifier
+  } = params;
+  if (!identifier) {
+    return null;
+  }
+  const {
+    subType
+  } = identifier;
+  if (subType === 'node') {
+    const node = identifier.node;
+    return {
+      identifier,
+      color: node.color,
+      label: `${node.label}:`,
+      value: node.value,
+      formattedValue: `${node.value}`,
+      markType: 'square'
+    };
+  }
+  if (subType === 'link') {
+    const link = identifier.link;
+    if (!link) {
+      return null;
+    }
+    const sourceLabel = link.source.label;
+    const targetLabel = link.target.label;
+    return {
+      identifier,
+      color: link.color,
+      label: `${sourceLabel} → ${targetLabel}:`,
+      value: link.value,
+      formattedValue: `${link.value}`,
+      markType: 'line'
+    };
+  }
+  return null;
+};

package/esm/SankeyChart/useSankeyChartProps.d.ts

@@ -0,0 +1,22 @@
+import type { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
+import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
+import type { SankeyChartProps } from "./SankeyChart.js";
+import type { ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type SankeyChartPluginsSignatures } from "./SankeyChart.plugins.js";
+/**
+ * A helper function that extracts SankeyChartProps from the input props
+ * and returns an object with props for the children components of SankeyChart.
+ *
+ * @param props The input props for SankeyChart
+ * @returns An object with props for the children components of SankeyChart
+ */
+export declare const useSankeyChartProps: (props: SankeyChartProps) => {
+  chartContainerProps: ChartContainerProProps<"sankey", SankeyChartPluginsSignatures>;
+  sankeyPlotProps: {
+    onNodeClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, node: import("./sankey.types.js").SankeyNodeIdentifierWithData) => void) | undefined;
+    onLinkClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, link: import("./sankey.types.js").SankeyLinkIdentifierWithData) => void) | undefined;
+  };
+  overlayProps: ChartsOverlayProps;
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  children: import("react").ReactNode;
+};

package/esm/SankeyChart/useSankeyChartProps.js

@@ -0,0 +1,70 @@
+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"];
+import { DEFAULT_MARGINS } from '@mui/x-charts/constants';
+import { defaultizeMargin } from '@mui/x-charts/internals';
+import { SANKEY_CHART_PLUGINS } from "./SankeyChart.plugins.js";
+
+/**
+ * A helper function that extracts SankeyChartProps from the input props
+ * and returns an object with props for the children components of SankeyChart.
+ *
+ * @param props The input props for SankeyChart
+ * @returns An object with props for the children components of SankeyChart
+ */
+export const useSankeyChartProps = props => {
+  const {
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      children,
+      slots,
+      slotProps,
+      loading,
+      // highlightedItem,
+      // onHighlightChange,
+      className,
+      apiRef,
+      onNodeClick,
+      onLinkClick
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  const margin = defaultizeMargin(marginProps, DEFAULT_MARGINS);
+  const chartContainerProps = _extends({}, rest, {
+    series: [_extends({
+      type: 'sankey'
+    }, series)],
+    width,
+    height,
+    margin,
+    colors,
+    sx,
+    // highlightedItem,
+    // onHighlightChange,
+    className,
+    apiRef,
+    plugins: SANKEY_CHART_PLUGINS
+  });
+  const sankeyPlotProps = {
+    onNodeClick,
+    onLinkClick
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const chartsWrapperProps = {
+    sx
+  };
+  return {
+    chartContainerProps,
+    sankeyPlotProps,
+    overlayProps,
+    chartsWrapperProps,
+    children
+  };
+};

package/esm/SankeyChart/utils.d.ts

@@ -0,0 +1,3 @@
+import { sankeyLeft } from '@mui/x-charts-vendor/d3-sankey';
+import type { SankeyNodeOptions } from "./sankey.types.js";
+export declare const getNodeAlignFunction: (align: SankeyNodeOptions["align"]) => typeof sankeyLeft;

package/esm/SankeyChart/utils.js

@@ -0,0 +1,14 @@
+import { sankeyLeft, sankeyRight, sankeyCenter, sankeyJustify } from '@mui/x-charts-vendor/d3-sankey';
+export const getNodeAlignFunction = align => {
+  switch (align) {
+    case 'left':
+      return sankeyLeft;
+    case 'right':
+      return sankeyRight;
+    case 'center':
+      return sankeyCenter;
+    case 'justify':
+    default:
+      return sankeyJustify;
+  }
+};