50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T6ec5,"use client"; import { Sankey as RechartsSankey, Layer, type SankeyProps, type SankeyNodeProps, type SankeyLinkProps, type SankeyData, type SankeyNode as RechartsSankeyNode, } from "recharts"; import { Children, createContext, isValidElement, use, useCallback, useId, useMemo, useState, type FC, type ReactElement, type ReactNode, } from "react"; import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/registry/ui/recharts-tooltip"; import { type ChartConfig, ChartContainer, getColorsCount, LoadingIndicator, } from "@/registry/ui/recharts-chart"; import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background"; import { motion } from "motion/react"; // Constants const LOADING_ANIMATION_DURATION = 2000; // full loading cycle duration in milliseconds const DEFAULT_NODE_WIDTH = 10; const DEFAULT_NODE_PADDING = 10; const DEFAULT_LINK_CURVATURE = 0.5; const DEFAULT_ITERATIONS = 32; type LinkVariant = "gradient" | "solid" | "source" | "target"; type NodeLabelPosition = "inside" | "outside"; // ───────────────────────────────────────────────────────────────────────────── // Shared context // ───────────────────────────────────────────────────────────────────────────── /** * Shared state for every part of the chart. Lifted into so * that , , and can read it without prop drilling. * A sankey chart's data is rigid — the root passes `nodes`/`links` straight to * Recharts — so the parts here configure how those nodes and links render. */ type SankeyChartContextValue = { data: SankeyData; // the nodes + links rendered by the chart config: ChartConfig; // colors + labels keyed by node name chartId: string; // colon-free id scoping this chart's SVG defs isLoading: boolean; // whether the chart shows its loading skeleton selectedNode: string | null; // currently selected node name, or null when none selectNode: (nodeName: string | null) => void; // sets the selected node }; const SankeyChartContext = createContext(null); // Reads the chart context, throwing a helpful error when used outside function useSankeyChart() { const context = use(SankeyChartContext); if (!context) { throw new Error( "Sankey chart parts (, , , …) must be used within ", ); } return context; } // ───────────────────────────────────────────────────────────────────────────── // Root container // ───────────────────────────────────────────────────────────────────────────── type EvilSankeyChartBaseProps = { data: SankeyData; // nodes + links rendered by the chart config: ChartConfig; // node colors + labels keyed by node name children: ReactNode; // composed parts — , , , … className?: string; // extra classes for the chart container sankeyProps?: Omit; // escape hatch for the raw Recharts Sankey nodeWidth?: number; // width of each node in pixels nodePadding?: number; // vertical gap between nodes in pixels linkCurvature?: number; // link curve amount, 0 (straight) to 1 (maximum) iterations?: number; // layout iterations — higher is more accurate sort?: boolean; // sorts nodes automatically for an optimal layout align?: "left" | "justify"; // horizontal node alignment strategy verticalAlign?: "justify" | "top"; // vertical node alignment strategy backgroundVariant?: BackgroundVariant; // background pattern behind the chart defaultSelectedNode?: string | null; // node selected on first render onSelectionChange?: (selection: { dataKey: string; value: number } | null) => void; // fires when the selected node changes isLoading?: boolean; // shows the animated loading skeleton }; type EvilSankeyChartProps = EvilSankeyChartBaseProps; /** * Root of the composible sankey chart. Owns the flow data, the shared context, * the layout configuration, and the loading skeleton. The visual parts — the * nodes, links, and tooltip — are composed as children, so a consumer renders * exactly the parts they need with the styling they want. */ export function EvilSankeyChart({ data, config, children, className, sankeyProps, nodeWidth = DEFAULT_NODE_WIDTH, nodePadding = DEFAULT_NODE_PADDING, linkCurvature = DEFAULT_LINK_CURVATURE, iterations = DEFAULT_ITERATIONS, sort = true, align = "justify", verticalAlign = "justify", backgroundVariant, defaultSelectedNode = null, onSelectionChange, isLoading = false, }: EvilSankeyChartProps) { const chartId = useId().replace(/:/g, ""); // colon-free id keeps CSS/SVG selectors valid const [selectedNode, setSelectedNode] = useState(defaultSelectedNode); // Updates selection state and notifies the parent with the node's flow value const selectNode = useCallback( (nodeName: string | null) => { setSelectedNode(nodeName); if (!onSelectionChange) return; if (nodeName === null) { onSelectionChange(null); return; } onSelectionChange({ dataKey: nodeName, value: getNodeValue(data, nodeName) }); }, [onSelectionChange, data], ); const contextValue = useMemo( () => ({ data, config, chartId, isLoading, selectedNode, selectNode }), [data, config, chartId, isLoading, selectedNode, selectNode], ); return ( {backgroundVariant && } {!isLoading && ( {children} )} {isLoading && ( )} ); } // ───────────────────────────────────────────────────────────────────────────── // Composible parts // ───────────────────────────────────────────────────────────────────────────── type NodeProps = { radius?: number; // corner radius of node rectangles in pixels isClickable?: boolean; // lets nodes be selected by clicking them children?: ReactNode; // optional composition }; /** * Configures how the sankey nodes render. It is a configuration slot — the root * reads its props and wires them into the Recharts Sankey `node` renderer, so it * renders nothing itself. Compose a inside it to show labels. */ const Node: FC = () => null; type NodeLabelProps = { position?: NodeLabelPosition; // places labels inside or beside the nodes showValues?: boolean; // appends each node's total flow value valueFormatter?: (value: number) => string; // formats node values when shown }; /** * Declares labels for the it is composed inside. Like , it is a * configuration slot and renders nothing on its own. */ const NodeLabel: FC = () => null; type LinkProps = { variant?: LinkVariant; // coloring strategy for the link bands verticalPadding?: number; // shrinks link width where it meets a node }; /** * Configures how the sankey links render. Like , it is a configuration * slot read by the root and renders nothing itself. The `variant` controls how * each link band is colored. */ const Link: FC = () => null; type TooltipProps = { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover }; /** * The hover tooltip. Reads the chart's loading state from context and is hidden * automatically while the chart shows its skeleton. */ function Tooltip({ variant, roundness, defaultIndex }: TooltipProps) { const { isLoading } = useSankeyChart(); if (isLoading) return null; return ( } /> ); } // ───────────────────────────────────────────────────────────────────────────── // Children resolution — turns composed / into Sankey renderers // ───────────────────────────────────────────────────────────────────────────── // Sums a node's outgoing flow, falling back to incoming flow for leaf nodes const getNodeValue = (data: SankeyData, nodeName: string): number => { const nodeIndex = data.nodes.findIndex((node) => node.name === nodeName); if (nodeIndex === -1) return 0; const outgoing = data.links .filter((link) => link.source === nodeIndex) .reduce((sum, link) => sum + link.value, 0); const incoming = data.links .filter((link) => link.target === nodeIndex) .reduce((sum, link) => sum + link.value, 0); return outgoing > 0 ? outgoing : incoming; }; // Reads composed and children into the Sankey `node`/`link` render props const resolveSankeyRenderers = (children: ReactNode): Pick => { let nodeProps: NodeProps | null = null; let linkProps: LinkProps | null = null; Children.forEach(children, (child) => { if (!isValidElement(child)) return; if (child.type === Node) { nodeProps = (child as ReactElement).props; } if (child.type === Link) { linkProps = (child as ReactElement).props; } }); return { node: (props: SankeyNodeProps) => , link: (props: SankeyLinkProps) => , }; }; // Reads the composed inside a , if any const resolveNodeLabel = (children: ReactNode): NodeLabelProps | null => { let label: NodeLabelProps | null = null; Children.forEach(children, (child) => { if (isValidElement(child) && child.type === NodeLabel) { label = (child as ReactElement).props; } }); return label; }; // ───────────────────────────────────────────────────────────────────────────── // Node renderer — draws a single sankey node from the resolved config // ───────────────────────────────────────────────────────────────────────────── type SankeyNodeRendererProps = SankeyNodeProps & { nodeConfig: NodeProps | null; // resolved props from the composed }; /** * Renders a single sankey node rectangle, plus its optional label and value. * The root passes one of these per node, configured from the composed . */ const SankeyNode = ({ x, y, width, height, payload, nodeConfig }: SankeyNodeRendererProps) => { const { config, chartId, data, selectedNode, selectNode } = useSankeyChart(); const radius = nodeConfig?.radius ?? 0; const isClickable = nodeConfig?.isClickable ?? false; const label = resolveNodeLabel(nodeConfig?.children); const nodeName = payload.name; const nodeValue = payload.value; const nodeIcon = (payload as RechartsSankeyNode & { icon?: ReactNode }).icon; const isHighlighted = isNodeConnected(data, selectedNode, nodeName); const hasConfigColor = nodeName in config; const configLabel = config[nodeName]?.label ?? nodeName; const dimmed = isClickable && !isHighlighted; const valueFormatter = label?.valueFormatter ?? ((value: number) => value.toLocaleString()); const showValues = label?.showValues ?? false; const labelX = x + width / 2; const labelY = showValues ? y + height / 2 - 8 : y + height / 2; const valueY = y + height / 2 + 8; const outsideLabelX = x + width + 8; const outsideLabelY = y + height / 2; return ( { if (!isClickable) return; selectNode(selectedNode === nodeName ? null : nodeName); }} /> {label?.position === "inside" && ( <> {nodeIcon && (

{nodeIcon}

)} {configLabel} {showValues && ( {valueFormatter(nodeValue)} )} )} {label?.position === "outside" && ( <> {configLabel} {showValues && ( {valueFormatter(nodeValue)} )} )} ); }; // ───────────────────────────────────────────────────────────────────────────── // Link renderer — draws a single sankey link from the resolved config // ───────────────────────────────────────────────────────────────────────────── type SankeyLinkRendererProps = SankeyLinkProps & { linkConfig: LinkProps | null; // resolved props from the composed }; /** * Renders a single sankey link band, colored by the composed variant. * Highlights the bands connected to the selected node and dims the rest. */ const SankeyLink = ({ sourceX, targetX, sourceY, targetY, sourceControlX, targetControlX, linkWidth, index, payload, linkConfig, }: SankeyLinkRendererProps) => { const { config, chartId, selectedNode } = useSankeyChart(); const variant = linkConfig?.variant ?? "gradient"; const verticalPadding = linkConfig?.verticalPadding ?? 0; const sourceName = payload.source.name; const targetName = payload.target.name; const isConnected = selectedNode === null || selectedNode === sourceName || selectedNode === targetName; const paddedLinkWidth = Math.max(1, linkWidth - verticalPadding); const halfWidth = paddedLinkWidth / 2; const linkAreaPath = `M${sourceX},${sourceY - halfWidth} C${sourceControlX},${sourceY - halfWidth} ${targetControlX},${targetY - halfWidth} ${targetX},${targetY - halfWidth} L${targetX},${targetY + halfWidth} C${targetControlX},${targetY + halfWidth} ${sourceControlX},${sourceY + halfWidth} ${sourceX},${sourceY + halfWidth} Z`; return ( {variant === "gradient" && ( )} ); }; // Checks whether a node is the selected one or directly linked to it const isNodeConnected = ( data: SankeyData, selectedNode: string | null, nodeName: string, ): boolean => { if (selectedNode === null || selectedNode === nodeName) return true; const selectedIdx = data.nodes.findIndex((node) => node.name === selectedNode); const nodeIdx = data.nodes.findIndex((node) => node.name === nodeName); return data.links.some( (link) => (link.source === selectedIdx && link.target === nodeIdx) || (link.source === nodeIdx && link.target === selectedIdx), ); }; // Resolves the SVG paint reference for a link band based on its variant const getLinkFill = ( variant: LinkVariant, chartId: string, index: number, config: ChartConfig, sourceName: string, targetName: string, ): string => { switch (variant) { case "gradient": return `url(#${chartId}-link-gradient-${index})`; case "source": return sourceName in config ? `url(#${chartId}-sankey-colors-${sourceName})` : "currentColor"; case "target": return targetName in config ? `url(#${chartId}-sankey-colors-${targetName})` : "currentColor"; case "solid": default: return "currentColor"; } }; // ───────────────────────────────────────────────────────────────────────────── // Style definitions — SVG defs scoped to the chart's unique id // ───────────────────────────────────────────────────────────────────────────── /** Vertical color gradient for every configured node, painted by name. */ const NodeColorGradients = ({ config, chartId }: { config: ChartConfig; chartId: string }) => { return ( <> {Object.entries(config).map(([dataKey, nodeConfig]) => { const colorsCount = getColorsCount(nodeConfig); return ( {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); })} ); }; /** Source-to-target fade gradient that fills a single gradient-variant link. */ const LinkGradient = ({ chartId, index, config, sourceName, targetName, }: { chartId: string; index: number; config: ChartConfig; sourceName: string; targetName: string; }) => { const sourceColor = sourceName in config ? `var(--color-${sourceName}-0)` : "currentColor"; const targetColor = targetName in config ? `var(--color-${targetName}-0)` : "currentColor"; return ( ); }; /** Primary-colored stroke gradient highlighting a link connected to the selection. */ const LinkStrokeGradient = ({ chartId, index }: { chartId: string; index: number }) => { return ( ); }; // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton // ───────────────────────────────────────────────────────────────────────────── /** * The skeleton sankey shown while the chart is loading. Rendered by the root in * place of the real diagram — a fixed grid of pulsing nodes and links. */ const LoadingSankey = () => { const nodes = [ { x: 30, y: 25, width: 12, height: 65, delay: 0 }, { x: 30, y: 110, width: 12, height: 50, delay: 0.3 }, { x: 30, y: 180, width: 12, height: 45, delay: 0.15 }, { x: 244, y: 20, width: 12, height: 55, delay: 0.45 }, { x: 244, y: 95, width: 12, height: 75, delay: 0.6 }, { x: 244, y: 190, width: 12, height: 40, delay: 0.25 }, { x: 458, y: 35, width: 12, height: 80, delay: 0.5 }, { x: 458, y: 135, width: 12, height: 90, delay: 0.1 }, ]; const links = [ { from: 0, to: 3, width: 26, delay: 0.2 }, { from: 0, to: 4, width: 18, delay: 0.7 }, { from: 1, to: 4, width: 24, delay: 0.4 }, { from: 1, to: 5, width: 12, delay: 0.9 }, { from: 2, to: 4, width: 16, delay: 0.1 }, { from: 2, to: 5, width: 14, delay: 0.55 }, { from: 3, to: 6, width: 22, delay: 0.35 }, { from: 3, to: 7, width: 18, delay: 0.8 }, { from: 4, to: 6, width: 28, delay: 0.05 }, { from: 4, to: 7, width: 32, delay: 0.65 }, { from: 5, to: 7, width: 16, delay: 0.45 }, ]; // Builds a bezier path connecting the right edge of one node to the left of another const getLinkPath = (fromIdx: number, toIdx: number) => { const from = nodes[fromIdx]; const to = nodes[toIdx]; const startX = from.x + from.width; const startY = from.y + from.height / 2; const endX = to.x; const endY = to.y + to.height / 2; const controlX1 = startX + (endX - startX) * 0.4; const controlX2 = startX + (endX - startX) * 0.6; return `M${startX},${startY} C${controlX1},${startY} ${controlX2},${endY} ${endX},${endY}`; }; const baseDuration = LOADING_ANIMATION_DURATION / 1000; return ( <> {links.map((link, i) => ( ))} {nodes.map((node, i) => ( ))} ); }; // Compound API: every part hangs off the root as a static member, so a consumer // writes , , … from a single // import — no colliding named marker exports when several charts share one file. EvilSankeyChart.Node = Node; EvilSankeyChart.NodeLabel = NodeLabel; EvilSankeyChart.Link = Link; EvilSankeyChart.Tooltip = Tooltip; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","recharts",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"recharts"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@evilcharts/recharts-chart","@evilcharts/recharts-tooltip","@evilcharts/recharts-background"]}]]}],["$","$L51",null,{"sourceUrl":"https://evilcharts.com/r/recharts-sankey-chart.json","proxyUrl":"https://shadcnregistry.com/r/evilcharts/recharts-sankey-chart","itemId":"@evilcharts/recharts-sankey-chart"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/registry/charts/recharts-sankey-chart.tsx","content":"$53","type":"registry:component","target":"components/evilcharts/charts/recharts-sankey-chart.tsx"}]}]]}],"$L54"]}]

Recharts Sankey Chart

Installation

Files

components

Styles