Sankey Diagram

1"use client";
2 
3import { localPoint } from "@visx/event";
4import { ParentSize } from "@visx/responsive";
5import { sankey, sankeyCenter, sankeyLinkHorizontal } from "@visx/sankey";
6import type { Transition } from "motion/react";
7import {
8  memo,
9  type ReactNode,
10  useCallback,
11  useEffect,
12  useMemo,
13  useRef,
14  useState,
15} from "react";
16import { cn } from "@/lib/utils";
17import {
18  type Margin,
19  type SankeyLinkDatum,
20  type SankeyNodeDatum,
21  SankeyProvider,
22  type SankeyTooltipData,
23} from "./sankey-context";
24 
25export interface SankeyData {
26  nodes: SankeyNodeDatum[];
27  links: SankeyLinkDatum[];
28}
29 
30export interface SankeyChartProps {
31  /** Sankey data with nodes and links */
32  data: SankeyData;
33  /** Chart margins */
34  margin?: Partial<Margin>;
35  /** Animation duration in milliseconds. Default: 1100 */
36  animationDuration?: number;
37  /** Motion enter transition (spring or cubic-bezier tween). */
38  enterTransition?: Transition;
39  /** Signature of motion URL state — triggers enter replay when it changes. */
40  revealSignature?: string;
41  /** Aspect ratio as "width / height". Default: "2 / 1" */
42  aspectRatio?: string;
43  /** Node width in pixels. Default: 16 */
44  nodeWidth?: number;
45  /** Node padding in pixels. Default: 24 */
46  nodePadding?: number;
47  /** Additional class name for the container */
48  className?: string;
49  /** Child components (SankeyNode, SankeyLink, SankeyTooltip) */
50  children: ReactNode;
51  /** Controlled hovered node index (e.g. from ChartLegend). */
52  hoveredNodeIndex?: number | null;
53  /** Called when node hover changes from the chart surface. */
54  onNodeHoverChange?: (index: number | null) => void;
55}
56 
57const DEFAULT_MARGIN: Margin = { top: 40, right: 180, bottom: 40, left: 180 };
58 
59interface SankeyChartInnerProps {
60  data: SankeyData;
61  width: number;
62  height: number;
63  margin: Margin;
64  animationDuration: number;
65  enterTransition?: Transition;
66  revealSignature?: string;
67  nodeWidth: number;
68  nodePadding: number;
69  children: ReactNode;
70  hoveredNodeIndexProp?: number | null;
71  onNodeHoverChange?: (index: number | null) => void;
72}
73 
74function SankeyChartInner(props: SankeyChartInnerProps) {
75  const { width, height } = props;
76 
77  if (width < 10 || height < 10) {
78    return null;
79  }
80 
81  return <SankeyChartCore {...props} />;
82}
83 
84const SankeyChartCore = memo(function SankeyChartCore({
85  data,
86  width,
87  height,
88  margin,
89  animationDuration,
90  enterTransition,
91  revealSignature = "",
92  nodeWidth,
93  nodePadding,
94  children,
95// … truncated