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:T2c99,"use client" import * as React from "react" import { Sankey, type SankeyLinkProps, type SankeyNode as RechartsSankeyNode, type SankeyNodeProps, } from "recharts" import { cn } from "@/lib/utils" import { formatNumber } from "@/registry/dashboardcn/lib/format" import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" export interface SankeyChartNode { name: string /** Any CSS color. Sources default to the palette in order; targets inherit the color of their largest incoming link. */ color?: string } export interface SankeyChartLink { /** Node name or index into `nodes`. */ source: number | string /** Node name or index into `nodes`. */ target: number | string value: number } export interface SankeyChartProps extends Omit, "config" | "children"> { nodes: SankeyChartNode[] links: SankeyChartLink[] valueFormatter?: (value: number) => string /** Append each node's share of the total flow to its label, e.g. "Writing · 18%". */ showShares?: boolean showTooltip?: boolean nodeWidth?: number /** Vertical gap between nodes in the same column. */ nodePadding?: number /** Fill opacity of the links. Hovered links are drawn at double this, up to 1. */ linkOpacity?: number /** "outside" reserves a margin and puts labels left of sources and right of targets; "inside" draws them over the flow. */ labelPosition?: "outside" | "inside" /** Palette cycled through source nodes without a color. Defaults to chart-1 through chart-5. */ colors?: string[] } const DEFAULT_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] /** Approximate rendered width of a text-xs string, for reserving label margins. */ const CHAR_WIDTH = 6.4 const LABEL_GAP = 8 interface ResolvedNode { name: string color: string /** Share of the total flow, as a fraction. */ share: number /** Which side of the node bar the label is drawn on. */ side: "left" | "right" /** Label text next to the node, share included. */ label: string shareLabel: string } interface ResolvedLink { source: number target: number value: number } function round(n: number) { return Math.round(n * 1000) / 1000 } function slugify(name: string) { return name.toLowerCase().replace(/[^a-z0-9]+/g, "-") } function SankeyChart({ nodes, links, valueFormatter = (value) => formatNumber(value), showShares = true, showTooltip = true, nodeWidth = 12, nodePadding = 16, linkOpacity = 0.25, labelPosition = "outside", colors = DEFAULT_COLORS, className, ...props }: SankeyChartProps) { const palette = colors.length ? colors : DEFAULT_COLORS const hoverOpacity = Math.min(1, linkOpacity * 2) const { data, margin, config } = React.useMemo(() => { const indexByName = new Map(nodes.map((node, index) => [node.name, index])) const resolveIndex = (ref: number | string) => typeof ref === "number" ? Number.isInteger(ref) && ref >= 0 && ref < nodes.length ? ref : -1 : (indexByName.get(ref) ?? -1) const resolvedLinks: ResolvedLink[] = links .map((link) => ({ source: resolveIndex(link.source), target: resolveIndex(link.target), value: link.value, })) .filter( (link) => link.source >= 0 && link.target >= 0 && link.source !== link.target && Number.isFinite(link.value) && link.value > 0 ) const incoming = nodes.map(() => 0) const outgoing = nodes.map(() => 0) const strongestSource = nodes.map(() => null) const strongestValue = nodes.map(() => 0) for (const link of resolvedLinks) { outgoing[link.source]! += link.value incoming[link.target]! += link.value if (link.value > strongestValue[link.target]!) { strongestValue[link.target] = link.value strongestSource[link.target] = link.source } } const isRoot = nodes.map((_, index) => incoming[index] === 0) const isLeaf = nodes.map((_, index) => outgoing[index] === 0) const values = nodes.map((_, index) => Math.max(incoming[index]!, outgoing[index]!)) const total = values.reduce((sum, value, index) => (isRoot[index] ? sum + value : sum), 0) // Roots cycle through the palette; everything else inherits its strongest source. const resolvedColors: (string | undefined)[] = nodes.map(() => undefined) let paletteIndex = 0 nodes.forEach((node, index) => { if (node.color) resolvedColors[index] = node.color else if (isRoot[index]) resolvedColors[index] = palette[paletteIndex++ % palette.length] }) const colorOf = (index: number, seen: Set): string => { const known = resolvedColors[index] if (known) return known const source = strongestSource[index] ?? null if (source !== null && !seen.has(index)) { seen.add(index) const inherited = colorOf(source, seen) resolvedColors[index] = inherited return inherited } const fallback = palette[paletteIndex++ % palette.length]! resolvedColors[index] = fallback return fallback } const resolvedNodes: ResolvedNode[] = nodes.map((node, index) => { const share = total > 0 ? values[index]! / total : 0 const shareLabel = showShares ? ` · ${formatNumber(share, { format: "percent", maximumFractionDigits: 0 })}` : "" const side: ResolvedNode["side"] = labelPosition === "outside" ? isRoot[index] && !isLeaf[index] ? "left" : "right" : isLeaf[index] && !isRoot[index] ? "left" : "right" return { name: node.name, color: colorOf(index, new Set()), share, side, label: node.name, shareLabel, } }) const labelWidth = (node: ResolvedNode) => Math.ceil((node.label.length + node.shareLabel.length) * CHAR_WIDTH) + LABEL_GAP const widest = (predicate: (index: number) => boolean) => resolvedNodes.reduce( (max, node, index) => predicate(index) && values[index]! > 0 ? Math.max(max, labelWidth(node)) : max, 0 ) const margin = labelPosition === "outside" ? { top: 4, bottom: 4, left: widest((index) => resolvedNodes[index]!.side === "left"), right: widest((index) => resolvedNodes[index]!.side === "right"), } : { top: 4, bottom: 4, left: 4, right: 4 } const config = Object.fromEntries( resolvedNodes.map((node) => [slugify(node.name), { label: node.name, color: node.color }]) ) satisfies ChartConfig return { data: { nodes: resolvedNodes, links: resolvedLinks }, margin, config } }, [nodes, links, palette, showShares, labelPosition]) const renderNode = React.useCallback((props: SankeyNodeProps) => { const { x, y, width, height, payload } = props const node = payload as unknown as RechartsSankeyNode & ResolvedNode if (!(node.value > 0) || !(height > 0)) return null const radius = Math.min(3, width / 2, height / 2) const labelX = node.side === "left" ? x - LABEL_GAP : x + width + LABEL_GAP return ( {node.label} {node.shareLabel ? ( {node.shareLabel} ) : null} ) }, []) const renderLink = React.useCallback( (props: SankeyLinkProps) => { const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload, } = props const source = payload.source as RechartsSankeyNode & ResolvedNode const half = Math.max(linkWidth, 0.5) / 2 const top = (yValue: number) => round(yValue - half) const bottom = (yValue: number) => round(yValue + half) const d = [ `M${round(sourceX)},${top(sourceY)}`, `C${round(sourceControlX)},${top(sourceY)} ${round(targetControlX)},${top(targetY)} ${round(targetX)},${top(targetY)}`, `L${round(targetX)},${bottom(targetY)}`, `C${round(targetControlX)},${bottom(targetY)} ${round(sourceControlX)},${bottom(sourceY)} ${round(sourceX)},${bottom(sourceY)}`, "Z", ].join(" ") return ( ) }, [linkOpacity, hoverOpacity] ) return ( {showTooltip ? ( { // Links carry resolved source/target nodes; nodes carry their own meta. const raw = item.payload as Record | undefined const source = raw?.source as (RechartsSankeyNode & ResolvedNode) | undefined const target = raw?.target as (RechartsSankeyNode & ResolvedNode) | undefined const isLink = typeof source === "object" && typeof target === "object" const label = isLink ? `${source.name} → ${target.name}` : String(raw?.name ?? name) const color = isLink ? source.color : (raw?.color as string | undefined) return (

{label} {valueFormatter(Number(value))}

) }} /> } /> ) : null} ) } export { SankeyChart } 50:Tc05,export type NumberFormat = "number" | "compact" | "currency" | "percent" export interface FormatNumberOptions { format?: NumberFormat /** ISO 4217 code, used when format is "currency". Defaults to USD. */ currency?: string locale?: string maximumFractionDigits?: number /** Abbreviate large values, e.g. "$158K" instead of "$158,143". */ compact?: boolean } const formatterCache = new Map() function getFormatter(locale: string, options: Intl.NumberFormatOptions) { const key = locale + JSON.stringify(options) let formatter = formatterCache.get(key) if (!formatter) { formatter = new Intl.NumberFormat(locale, options) formatterCache.set(key, formatter) } return formatter } /** * Format a metric value for display. * * formatNumber(1234567) -> "1,234,567" * formatNumber(1234567, { format: "compact" }) -> "1.2M" * formatNumber(48.2, { format: "currency" }) -> "$48.20" * formatNumber(158143, { format: "currency", compact: true }) -> "$158K" * formatNumber(0.124, { format: "percent" }) -> "12.4%" */ export function formatNumber( value: number, { format = "number", currency = "USD", locale = "en-US", maximumFractionDigits, compact = false, }: FormatNumberOptions = {} ): string { if (!Number.isFinite(value)) return "—" // Compact values keep three significant digits: $158K, $1.23M, 41.2K. const compactOptions: Intl.NumberFormatOptions = compact ? maximumFractionDigits === undefined ? { notation: "compact", maximumSignificantDigits: 3 } : { notation: "compact", maximumFractionDigits } : {} switch (format) { case "compact": return getFormatter(locale, { notation: "compact", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) case "currency": return getFormatter(locale, { style: "currency", currency, maximumFractionDigits: maximumFractionDigits ?? 2, ...compactOptions, }).format(value) case "percent": return getFormatter(locale, { style: "percent", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) default: return getFormatter(locale, { maximumFractionDigits: maximumFractionDigits ?? 0, ...compactOptions, }).format(value) } } /** * Format a fractional change as a signed percentage. * * formatDelta(0.124) -> "+12.4%" * formatDelta(-0.03) -> "-3.0%" * formatDelta(0) -> "0.0%" */ export function formatDelta(delta: number, locale = "en-US"): string { if (!Number.isFinite(delta)) return "—" return getFormatter(locale, { style: "percent", signDisplay: "exceptZero", maximumFractionDigits: 1, minimumFractionDigits: 1, }).format(delta) } /** * Fractional change between two values. Returns 0 when there is no baseline. */ export function computeDelta(current: number, previous: number): number { if (!previous) return 0 return (current - previous) / Math.abs(previous) } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L4d",null,{"namespace":"@dashboardcn","registryDependencies":["chart"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/dashboardcn/ui/sankey-chart.tsx","content":"$4f","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$50","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]