51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2ec5,import * as React from 'react' import { cn } from '@/lib/utils' import { ChartEmpty } from './chart' export interface SankeyNode { id: string label: string color?: string } export interface SankeyLink { source: string target: string value: number } export interface SankeyChartProps extends React.HTMLAttributes { nodes: SankeyNode[] links: SankeyLink[] height?: number showTooltip?: boolean showLabels?: boolean /** Accessible label for screen readers (default: "Sankey chart") */ ariaLabel?: string emptyState?: React.ReactNode } const NODE_COLORS = [ 'hsl(var(--primary))', 'hsl(var(--secondary))', 'hsl(var(--accent))', 'hsl(var(--success))', 'hsl(var(--info))', 'hsl(var(--warning))', ] interface ComputedNode { id: string label: string color: string x: number y: number width: number height: number value: number } interface ComputedLink { source: ComputedNode target: ComputedNode value: number sourceY: number targetY: number thickness: number path: string color: string } function computeLayout( nodes: SankeyNode[], links: SankeyLink[], width: number, height: number ): { computedNodes: ComputedNode[]; computedLinks: ComputedLink[] } { const padding = { top: 16, right: 120, bottom: 16, left: 120 } const nodeWidth = 16 const nodePadding = 10 // Build adjacency const nodeMap = new Map() nodes.forEach((n, i) => nodeMap.set(n.id, { ...n, index: i })) // Determine columns (depth) via BFS const depth = new Map() const inLinks = new Map() const outLinks = new Map() nodes.forEach(n => { inLinks.set(n.id, []); outLinks.set(n.id, []) }) links.forEach(l => { outLinks.get(l.source)?.push(l) inLinks.get(l.target)?.push(l) }) const sources = nodes.filter(n => (inLinks.get(n.id) || []).length === 0) const queue = sources.map(n => n.id) queue.forEach(id => depth.set(id, 0)) while (queue.length > 0) { const id = queue.shift()! const d = depth.get(id) ?? 0 for (const link of outLinks.get(id) || []) { if (!depth.has(link.target)) { depth.set(link.target, d + 1) queue.push(link.target) } } } // Warn about nodes dropped due to cycles (nodes not reachable from any source) if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') { const droppedNodes = nodes.filter(n => !depth.has(n.id)) if (droppedNodes.length > 0) { console.warn( `[SankeyChart] ${droppedNodes.length} node(s) were dropped because they are part of a cycle or unreachable from source nodes: ${droppedNodes.map(n => n.id).join(', ')}` ) } } // Guard against an empty depth map (e.g. a fully-cyclic graph with no source // node) — Math.max(...[]) returns -Infinity, which would corrupt colWidth and // produce NaN/Infinity node x positions. const depthValues = Array.from(depth.values()) const maxDepth = depthValues.length ? Math.max(...depthValues) : 0 const colWidth = maxDepth === 0 ? 0 : (width - padding.left - padding.right - nodeWidth) / maxDepth // Group nodes by column const cols = new Map() depth.forEach((d, id) => { if (!cols.has(d)) cols.set(d, []) const col = cols.get(d) if (col) col.push(id) }) // Node values = sum of in-links (or out-links for sources) const nodeValue = new Map() nodes.forEach(n => { const inVal = (inLinks.get(n.id) || []).reduce((s, l) => s + l.value, 0) const outVal = (outLinks.get(n.id) || []).reduce((s, l) => s + l.value, 0) nodeValue.set(n.id, Math.max(inVal, outVal, 1)) }) const innerHeight = height - padding.top - padding.bottom // Compute node heights and y positions per column const computedNodes = new Map() cols.forEach((ids, col) => { const colTotal = ids.reduce((s, id) => s + (nodeValue.get(id) || 1), 0) const gaps = Math.max(0, ids.length - 1) // When a column is crowded, the fixed padding would consume the whole column // (or more), driving totalNodeHeight negative and overflowing the SVG. Cap // the combined padding to half the column so nodes always have room. const effectivePadding = gaps > 0 ? Math.min(nodePadding, (innerHeight * 0.5) / gaps) : 0 const totalNodeHeight = innerHeight - effectivePadding * gaps let yOffset = padding.top ids.forEach((id) => { const val = nodeValue.get(id) || 1 const h = Math.max(8, (val / colTotal) * totalNodeHeight) const node = nodeMap.get(id)! computedNodes.set(id, { id, label: node.label, color: node.color || NODE_COLORS[node.index % NODE_COLORS.length], x: padding.left + col * colWidth, y: yOffset, width: nodeWidth, height: h, value: val, }) yOffset += h + effectivePadding }) }) // Track current link offsets per node side const sourceOffsets = new Map() const targetOffsets = new Map() computedNodes.forEach((n, id) => { sourceOffsets.set(id, n.y) targetOffsets.set(id, n.y) }) const computedLinks: ComputedLink[] = links.map(link => { const src = computedNodes.get(link.source) const tgt = computedNodes.get(link.target) if (!src || !tgt) return null const srcTotal = (outLinks.get(link.source) || []).reduce((s, l) => s + l.value, 0) const tgtTotal = (inLinks.get(link.target) || []).reduce((s, l) => s + l.value, 0) // Math.max(..., 1) guards the denominator so all-zero link values can't // produce 0/0 = NaN, which would emit an invalid SVG path. const thickness = Math.max(2, (link.value / Math.max(srcTotal, tgtTotal, 1)) * src.height) const sY = sourceOffsets.get(link.source) ?? 0 const tY = targetOffsets.get(link.target) ?? 0 sourceOffsets.set(link.source, sY + thickness) targetOffsets.set(link.target, tY + thickness) const x1 = src.x + src.width const x2 = tgt.x const mx = (x1 + x2) / 2 const path = `M${x1},${sY} C${mx},${sY} ${mx},${tY} ${x2},${tY} L${x2},${tY + thickness} C${mx},${tY + thickness} ${mx},${sY + thickness} ${x1},${sY + thickness} Z` return { source: src, target: tgt, value: link.value, sourceY: sY, targetY: tY, thickness, path, color: src.color, } }).filter(Boolean) as ComputedLink[] return { computedNodes: Array.from(computedNodes.values()), computedLinks } } const SankeyChart = React.forwardRef( ( { // Defaulted at the destructure: computeLayout() runs *above* the empty // guard, so `undefined` (the shape a still-loading fetch passes) would // throw before the guard could render . nodes = [], links = [], height = 320, showTooltip = true, showLabels = true, ariaLabel = 'Sankey chart', emptyState, className, ...props }, ref ) => { const isEmpty = !nodes || nodes.length === 0 || !links || links.length === 0 const containerRef = React.useRef(null) const [width, setWidth] = React.useState(600) const [tooltip, setTooltip] = React.useState<{ x: number; y: number; label: string; value: number } | null>(null) // useLayoutEffect fires before paint, preventing the initial layout flash // that would occur with useEffect + the 600px placeholder width. // SankeyChart is client-only (ResizeObserver), so useLayoutEffect is safe here. const mountedRef = React.useRef(true) React.useLayoutEffect(() => { mountedRef.current = true if (!containerRef.current) return const ro = new ResizeObserver(entries => { if (mountedRef.current) { setWidth(entries[0].contentRect.width) } }) ro.observe(containerRef.current) setWidth(containerRef.current.offsetWidth) return () => { mountedRef.current = false ro.disconnect() } }, []) const { computedNodes, computedLinks } = React.useMemo( () => computeLayout(nodes, links, width, height), [nodes, links, width, height] ) if (isEmpty) { return } return (

{/* Text alternative. The diagram's only data affordance is a mouse hover tooltip, so without this the flows are unreadable to anyone not using a pointer. Visually hidden, fully announced. */} {links.map((link, i) => ( ))}

{ariaLabel}
From	To	Value
{link.source}	{link.target}	{link.value}

{/* Tooltip */} {showTooltip && tooltip && (

{tooltip.label}

{tooltip.value.toLocaleString()}

)}

) } ) SankeyChart.displayName = 'SankeyChart' export { SankeyChart } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/chart"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/sankey-chart.tsx","content":"$53","type":"registry:ui","target":"components/ui/sankey-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]