{link.source.name} → {link.target.name}:{" "} {formatValue(link.value)}

4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T3598,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" // ── Types ────────────────────────────────────────────────────────────────── export interface SankeyNode { id: string name: string color?: string } export interface SankeyLink { source: string target: string value: number } export interface SankeyChartProps extends React.HTMLAttributes { nodes: SankeyNode[] links: SankeyLink[] title?: string subtitle?: string footer?: React.ReactNode height?: number nodeWidth?: number nodePadding?: number showLabels?: boolean showValues?: boolean valueFormatter?: (v: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean loading?: boolean locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const sankeyChartContainerVariants = cva("w-full overflow-visible", { variants: {}, }) // ── Constants ────────────────────────────────────────────────────────────── const CHART_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] // ── SVG Sankey Layout Engine ─────────────────────────────────────────────── interface LayoutNode extends SankeyNode { x: number y: number width: number height: number column: number colorIndex: number } interface LayoutLink { source: LayoutNode target: LayoutNode value: number sourceY: number targetY: number thickness: number color: string opacity: number } function layoutSankey( nodes: SankeyNode[], links: SankeyLink[], width: number, height: number, nodeWidth: number, nodePadding: number ): { nodes: LayoutNode[]; links: LayoutLink[] } { // Build adjacency const nodeMap = new Map() nodes.forEach((n, i) => nodeMap.set(n.id, i)) // Determine columns using BFS from source nodes const inDegree = new Map() nodes.forEach((n) => inDegree.set(n.id, 0)) links.forEach((l) => inDegree.set(l.target, (inDegree.get(l.target) ?? 0) + 1) ) const columns = new Map() const queue = nodes .filter((n) => (inDegree.get(n.id) ?? 0) === 0) .map((n) => n.id) queue.forEach((id) => columns.set(id, 0)) let head = 0 while (head < queue.length) { const curr = queue[head++]! links.forEach((l) => { if (l.source === curr) { const newCol = (columns.get(curr) ?? 0) + 1 if ((columns.get(l.target) ?? -1) < newCol) { columns.set(l.target, newCol) queue.push(l.target) } } }) } // Nodes not reachable from source nodes.forEach((n) => { if (!columns.has(n.id)) columns.set(n.id, 0) }) const maxCol = Math.max(...Array.from(columns.values())) const numCols = maxCol + 1 // Group by column const byCol: Map = new Map() nodes.forEach((n) => { const col = columns.get(n.id) ?? 0 if (!byCol.has(col)) byCol.set(col, []) byCol.get(col)!.push(n) }) // Compute node values (sum of outgoing or incoming links) const nodeValue = new Map() nodes.forEach((n) => nodeValue.set(n.id, 0)) links.forEach((l) => { nodeValue.set(l.source, (nodeValue.get(l.source) ?? 0) + l.value) nodeValue.set(l.target, (nodeValue.get(l.target) ?? 0) + l.value) }) // Compute layout const colXStep = numCols > 1 ? (width - nodeWidth) / (numCols - 1) : 0 const layoutNodes: LayoutNode[] = [] let colorIdx = 0 for (const [col, colNodes] of byCol.entries()) { const totalValue = colNodes.reduce( (s, n) => s + (nodeValue.get(n.id) ?? 1), 0 ) const availableHeight = height - nodePadding * (colNodes.length - 1) let yOffset = 0 colNodes.forEach((n) => { const v = nodeValue.get(n.id) ?? 1 const nodeH = Math.max(8, (v / totalValue) * availableHeight) layoutNodes.push({ ...n, x: col * colXStep, y: yOffset, width: nodeWidth, height: nodeH, column: col, colorIndex: colorIdx % 5, }) yOffset += nodeH + nodePadding colorIdx++ }) } // Compute link paths const nodeById = new Map() layoutNodes.forEach((n) => nodeById.set(n.id, n)) // Track offsets for link placement on source/target nodes const sourceOffset = new Map() const targetOffset = new Map() layoutNodes.forEach((n) => { sourceOffset.set(n.id, n.y) targetOffset.set(n.id, n.y) }) const layoutLinks: LayoutLink[] = links.map((l) => { const src = nodeById.get(l.source)! const tgt = nodeById.get(l.target)! const srcNode = layoutNodes.find((n) => n.id === l.source)! const tgtNode = layoutNodes.find((n) => n.id === l.target)! const totalSrcValue = links .filter((lk) => lk.source === l.source) .reduce((s, lk) => s + lk.value, 0) const totalTgtValue = links .filter((lk) => lk.target === l.target) .reduce((s, lk) => s + lk.value, 0) const srcH = (l.value / totalSrcValue) * srcNode.height const tgtH = (l.value / totalTgtValue) * tgtNode.height const thickness = Math.max(2, Math.min(srcH, tgtH)) const sy = (sourceOffset.get(l.source) ?? srcNode.y) + thickness / 2 const ty = (targetOffset.get(l.target) ?? tgtNode.y) + thickness / 2 sourceOffset.set(l.source, sy - thickness / 2 + thickness) targetOffset.set(l.target, ty - thickness / 2 + thickness) const srcColor = src.color ?? CHART_COLORS[src.colorIndex % CHART_COLORS.length]! return { source: src, target: tgt, value: l.value, sourceY: sy, targetY: ty, thickness, color: srcColor, opacity: 0.35, } }) return { nodes: layoutNodes, links: layoutLinks } } // ── SankeyChart ──────────────────────────────────────────────────────────── export function SankeyChart({ nodes, links, title, subtitle, footer, height = 360, nodeWidth = 18, nodePadding = 16, showLabels = true, showValues = true, valueFormatter, format, decimals = 0, currency = "USD", abbreviate = false, loading = false, locale = "en-US", className, ...props }: SankeyChartProps) { const containerRef = React.useRef(null) const [svgWidth, setSvgWidth] = React.useState(600) React.useEffect(() => { const el = containerRef.current if (!el) return setSvgWidth(el.clientWidth) const ro = new ResizeObserver((entries) => { setSvgWidth(entries[0]!.contentRect.width) }) ro.observe(el) return () => ro.disconnect() }, []) const formatValue = React.useCallback( (v: number) => { if (valueFormatter) return valueFormatter(v) return formatChartValue(v, { format, decimals, locale, currency, abbreviate, }) }, [valueFormatter, format, decimals, locale, currency, abbreviate] ) // ── Loading ───────────────────────────────────────────────────────────── if (loading) { return ( {(title || subtitle) && ( {title && } {subtitle && } )} {footer && {footer}} ) } // ── Empty ──────────────────────────────────────────────────────────────── if (nodes.length === 0 || links.length === 0) { return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )}

{UI_I18N[locale].emptyState.noData}

{footer && {footer}} ) } const innerH = height - 16 const innerW = svgWidth - (showLabels ? 80 : 16) const { nodes: lnodes, links: llinks } = layoutSankey( nodes, links, innerW, innerH, nodeWidth, nodePadding ) const labelOffset = showLabels ? 40 : 8 return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )}

{footer && {footer}} ) } 4c:["$","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,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","card","ui-i18n","format-utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/sankey-chart.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-sankey-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]