recharts-sankey-chart

1"use client";
2 
3import {
4  Sankey as RechartsSankey,
5  Layer,
6  type SankeyProps,
7  type SankeyNodeProps,
8  type SankeyLinkProps,
9  type SankeyData,
10  type SankeyNode as RechartsSankeyNode,
11} from "recharts";
12import {
13  Children,
14  createContext,
15  isValidElement,
16  use,
17  useCallback,
18  useId,
19  useMemo,
20  useState,
21  type FC,
22  type ReactElement,
23  type ReactNode,
24} from "react";
25import {
26  ChartTooltip,
27  ChartTooltipContent,
28  type TooltipRoundness,
29  type TooltipVariant,
30} from "@/registry/ui/recharts-tooltip";
31import {
32  type ChartConfig,
33  ChartContainer,
34  getColorsCount,
35  LoadingIndicator,
36} from "@/registry/ui/recharts-chart";
37import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background";
38import { motion } from "motion/react";
39 
40// Constants
41const LOADING_ANIMATION_DURATION = 2000; // full loading cycle duration in milliseconds
42const DEFAULT_NODE_WIDTH = 10;
43const DEFAULT_NODE_PADDING = 10;
44const DEFAULT_LINK_CURVATURE = 0.5;
45const DEFAULT_ITERATIONS = 32;
46 
47type LinkVariant = "gradient" | "solid" | "source" | "target";
48type NodeLabelPosition = "inside" | "outside";
49 
50// ─────────────────────────────────────────────────────────────────────────────
51// Shared context
52// ─────────────────────────────────────────────────────────────────────────────
53 
54/**
55 * Shared state for every part of the chart. Lifted into <EvilSankeyChart /> so
56 * that <Node />, <Link />, and <Tooltip /> can read it without prop drilling.
57 * A sankey chart's data is rigid — the root passes `nodes`/`links` straight to
58 * Recharts — so the parts here configure how those nodes and links render.
59 */
60type SankeyChartContextValue = {
61  data: SankeyData; // the nodes + links rendered by the chart
62  config: ChartConfig; // colors + labels keyed by node name
63  chartId: string; // colon-free id scoping this chart's SVG defs
64  isLoading: boolean; // whether the chart shows its loading skeleton
65  selectedNode: string | null; // currently selected node name, or null when none
66  selectNode: (nodeName: string | null) => void; // sets the selected node
67};
68 
69const SankeyChartContext = createContext<SankeyChartContextValue | null>(null);
70 
71// … truncated