8b:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_7AEYezTtbv8YMN9y719SFhQErt35"],"SWRDataProvider"] 8d:T63d3,[V0_FILE]typescriptreact:file="components/sankey/index.tsx" isMerged="true" export { SankeyDiagram } from "./sankey-diagram" export type { SankeyData, SankeyNode, SankeyLink } from "./sankey-diagram" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { SankeyDiagram, type SankeyData, type SankeyDiagramHandle } from "@/components/sankey" import { useRef } from "react" import { Button } from "@/components/ui/button" export default function Home() { const energyDiagramRef = useRef(null) const salesDiagramRef = useRef(null) const colorDemoRef = useRef(null) const energyData: SankeyData = { nodes: [ { id: "coal", label: "Coal", color: "hsl(var(--chart-1))" }, { id: "gas", label: "Natural Gas", color: "hsl(var(--chart-2))" }, { id: "solar", label: "Solar", color: "hsl(var(--chart-4))" }, { id: "electricity", label: "Electricity", color: "hsl(var(--chart-3))" }, { id: "heat", label: "Heat", color: "hsl(var(--chart-5))" }, { id: "residential", label: "Residential", color: "hsl(var(--chart-1))" }, { id: "commercial", label: "Commercial", color: "hsl(var(--chart-2))" }, { id: "industrial", label: "Industrial", color: "hsl(var(--chart-3))" }, ], links: [ { source: "coal", target: "electricity", value: 350 }, { source: "gas", target: "electricity", value: 200 }, { source: "gas", target: "heat", value: 150 }, { source: "solar", target: "electricity", value: 100 }, { source: "electricity", target: "residential", value: 250 }, { source: "electricity", target: "commercial", value: 200 }, { source: "electricity", target: "industrial", value: 200 }, { source: "heat", target: "residential", value: 80 }, { source: "heat", target: "commercial", value: 70 }, ], } const salesData: SankeyData = { nodes: [ { id: "visitors", label: "Website Visitors", color: "hsl(var(--chart-1))" }, { id: "signups", label: "Sign Ups", color: "hsl(var(--chart-2))" }, { id: "trials", label: "Free Trials", color: "hsl(var(--chart-3))" }, { id: "customers", label: "Paying Customers", color: "hsl(var(--chart-4))" }, { id: "churn", label: "Churned", color: "hsl(var(--chart-5))" }, ], links: [ { source: "visitors", target: "signups", value: 5000 }, { source: "signups", target: "trials", value: 1200 }, { source: "trials", target: "customers", value: 450 }, { source: "trials", target: "churn", value: 750 }, ], } const colorDemoData: SankeyData = { nodes: [ { id: "a", label: "Source A" }, { id: "b", label: "Source B" }, { id: "c", label: "Target C" }, { id: "d", label: "Target D" }, { id: "e", label: "Final E" }, ], links: [ { source: "a", target: "c", value: 80 }, { source: "a", target: "d", value: 40 }, { source: "b", target: "c", value: 60 }, { source: "b", target: "d", value: 50 }, { source: "c", target: "e", value: 100 }, { source: "d", target: "e", value: 70 }, ], } return (

Sankey Diagram Library

A reusable component with zoom, pan, export, and flow conservation

Energy Flow Example

Visualizing energy sources to end-use consumption (zoom enabled)

Sales Funnel Example

Customer journey from visitor to paying customer (zoom enabled)

`${value.toLocaleString()} users`} enableZoom />

Color Scheme Examples

Different color palettes for various use cases

Pastel Colors

Vibrant Colors

Monochrome

Custom Colors

Usage

            {`import { SankeyDiagram, type SankeyData, type SankeyDiagramHandle } from "@/components/sankey"
import { useRef } from "react"

const diagramRef = useRef(null)

const data: SankeyData = {
  nodes: [
    { id: "a", label: "Node A" }, // color will be auto-assigned
    { id: "b", label: "Node B", color: "#FF6B6B" }, // or specify custom
  ],
  links: [
    { source: "a", target: "b", value: 100 },
  ],
}

// Export functionality



// Features:
// - Color schemes: "default" | "pastel" | "vibrant" | "monochrome" | "custom"
// - Zoom & Pan: enableZoom prop (scroll to zoom, drag to pan)
// - Flow conservation: ensures links never expand beyond source value
// - No backward flow: nodes are automatically positioned left-to-right

`}

) } [V0_FILE]typescriptreact:file="components/sankey/sankey-diagram.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card } from "@/components/ui/card" import type React from "react" import { cn } from "@/lib/utils" import { useRef, useImperativeHandle, forwardRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react" export interface SankeyNode { id: string label: string color?: string } export interface SankeyLink { source: string target: string value: number color?: string } export interface SankeyData { nodes: SankeyNode[] links: SankeyLink[] } interface SankeyDiagramProps { data: SankeyData width?: number height?: number className?: string nodeWidth?: number nodePadding?: number showValues?: boolean valueFormat?: (value: number) => string colorScheme?: "default" | "pastel" | "vibrant" | "monochrome" | "custom" customColors?: string[] enableZoom?: boolean } interface ProcessedNode extends SankeyNode { x: number y: number height: number value: number depth: number } interface ProcessedLink extends SankeyLink { sourceNode: ProcessedNode targetNode: ProcessedNode y0: number y1: number } function getNodeDepth(nodeId: string, links: SankeyLink[], cache = new Map()): number { if (cache.has(nodeId)) return cache.get(nodeId)! const incomingLinks = links.filter((link) => link.target === nodeId) if (incomingLinks.length === 0) { cache.set(nodeId, 0) return 0 } const depth = 1 + Math.max(...incomingLinks.map((link) => getNodeDepth(link.source, links, cache))) cache.set(nodeId, depth) return depth } function optimizeNodePositions(data: SankeyData, nodeDepths: Map): Map { const optimizedDepths = new Map(nodeDepths) // Ensure no link flows backwards data.links.forEach((link) => { const sourceDepth = optimizedDepths.get(link.source)! const targetDepth = optimizedDepths.get(link.target)! if (targetDepth <= sourceDepth) { // Push target node to the right optimizedDepths.set(link.target, sourceDepth + 1) } }) return optimizedDepths } function processData( data: SankeyData, width: number, height: number, nodeWidth: number, nodePadding: number, ): { nodes: ProcessedNode[]; links: ProcessedLink[] } { // Calculate node depths const nodeDepths = new Map() data.nodes.forEach((node) => { nodeDepths.set(node.id, getNodeDepth(node.id, data.links)) }) const optimizedDepths = optimizeNodePositions(data, nodeDepths) const maxDepth = Math.max(...Array.from(optimizedDepths.values())) const depthWidth = (width - nodeWidth * 2) / Math.max(1, maxDepth) const nodeValues = new Map() data.nodes.forEach((node) => { const inValue = data.links.filter((link) => link.target === node.id).reduce((sum, link) => sum + link.value, 0) const outValue = data.links.filter((link) => link.source === node.id).reduce((sum, link) => sum + link.value, 0) // Use the maximum of in/out values for proper sizing nodeValues.set(node.id, Math.max(inValue, outValue, 0.1)) // Ensure minimum value }) // Group nodes by depth const nodesByDepth = new Map() data.nodes.forEach((node) => { const depth = optimizedDepths.get(node.id)! if (!nodesByDepth.has(depth)) { nodesByDepth.set(depth, []) } nodesByDepth.get(depth)!.push(node) }) // Calculate total value per depth for scaling const totalValueByDepth = new Map() nodesByDepth.forEach((nodes, depth) => { const total = nodes.reduce((sum, node) => sum + nodeValues.get(node.id)!, 0) totalValueByDepth.set(depth, total) }) // Position nodes const processedNodes: ProcessedNode[] = [] const nodeMap = new Map() nodesByDepth.forEach((nodes, depth) => { const depthTotal = totalValueByDepth.get(depth)! const scale = (height - nodePadding * (nodes.length + 1)) / depthTotal let currentY = nodePadding nodes.forEach((node) => { const value = nodeValues.get(node.id)! const nodeHeight = Math.max(value * scale, 5) // Minimum height const processedNode: ProcessedNode = { ...node, x: nodeWidth + depth * depthWidth, y: currentY, height: nodeHeight, value, depth, } processedNodes.push(processedNode) nodeMap.set(node.id, processedNode) currentY += nodeHeight + nodePadding }) }) const sourceOffsets = new Map() const targetOffsets = new Map() const processedLinks: ProcessedLink[] = data.links.map((link) => { const sourceNode = nodeMap.get(link.source)! const targetNode = nodeMap.get(link.target)! const sourceOffset = sourceOffsets.get(link.source) || 0 const targetOffset = targetOffsets.get(link.target) || 0 // Calculate link height proportional to value, respecting conservation const sourceScale = link.value / sourceNode.value const targetScale = link.value / targetNode.value const linkHeightAtSource = sourceScale * sourceNode.height const linkHeightAtTarget = targetScale * targetNode.height const processedLink: ProcessedLink = { ...link, sourceNode, targetNode, y0: sourceNode.y + sourceOffset, y1: targetNode.y + targetOffset, } sourceOffsets.set(link.source, sourceOffset + linkHeightAtSource) targetOffsets.set(link.target, targetOffset + linkHeightAtTarget) return processedLink }) return { nodes: processedNodes, links: processedLinks } } function generateLinkPath(link: ProcessedLink, nodeWidth: number): string { const x0 = link.sourceNode.x + nodeWidth const x1 = link.targetNode.x // Calculate the horizontal distance for curve control const curvature = 0.5 const xi = x0 + (x1 - x0) * curvature // Calculate heights at source and target respecting flow conservation const sourceScale = link.value / link.sourceNode.value const targetScale = link.value / link.targetNode.value const linkHeightAtSource = sourceScale * link.sourceNode.height const linkHeightAtTarget = targetScale * link.targetNode.height const y0Top = link.y0 const y0Bottom = y0Top + linkHeightAtSource const y1Top = link.y1 const y1Bottom = y1Top + linkHeightAtTarget // Generate path with proper control points to prevent backflow return ` M ${x0},${y0Top} C ${xi},${y0Top} ${xi},${y1Top} ${x1},${y1Top} L ${x1},${y1Bottom} C ${xi},${y1Bottom} ${xi},${y0Bottom} ${x0},${y0Bottom} Z ` } const COLOR_SCHEMES = { default: [ "hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))", ], pastel: ["#FFB3BA", "#BAFFC9", "#BAE1FF", "#FFFFBA", "#FFDFBA", "#E0BBE4"], vibrant: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A", "#98D8C8", "#F7DC6F"], monochrome: ["#2C3E50", "#34495E", "#5D6D7E", "#7F8C8D", "#95A5A6", "#BDC3C7"], custom: [] as string[], } export interface SankeyDiagramHandle { exportToPNG: (filename?: string) => void exportToSVG: (filename?: string) => void } export const SankeyDiagram = forwardRef(function SankeyDiagram( { data, width = 800, height = 400, className, nodeWidth = 20, nodePadding = 20, showValues = true, valueFormat = (value: number) => value.toLocaleString(), colorScheme = "default", customColors, enableZoom = true, }, ref, ) { const svgRef = useRef(null) const containerRef = useRef(null) const [zoom, setZoom] = useState(1) const [pan, setPan] = useState({ x: 0, y: 0 }) const [isDragging, setIsDragging] = useState(false) const [dragStart, setDragStart] = useState({ x: 0, y: 0 }) const colors = colorScheme === "custom" && customColors ? customColors : COLOR_SCHEMES[colorScheme] const getNodeColor = (node: SankeyNode, index: number): string => { if (node.color) return node.color return colors[index % colors.length] } const handleZoomIn = useCallback(() => { setZoom((prev) => Math.min(prev * 1.2, 5)) }, []) const handleZoomOut = useCallback(() => { setZoom((prev) => Math.max(prev / 1.2, 0.5)) }, []) const handleResetZoom = useCallback(() => { setZoom(1) setPan({ x: 0, y: 0 }) }, []) const handleMouseDown = useCallback( (e: React.MouseEvent) => { if (!enableZoom) return setIsDragging(true) setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y }) }, [pan, enableZoom], ) const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (!isDragging || !enableZoom) return setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y, }) }, [isDragging, dragStart, enableZoom], ) const handleMouseUp = useCallback(() => { setIsDragging(false) }, []) const handleWheel = useCallback( (e: React.WheelEvent) => { if (!enableZoom) return e.preventDefault() const delta = e.deltaY > 0 ? 0.9 : 1.1 setZoom((prev) => Math.max(0.5, Math.min(5, prev * delta))) }, [enableZoom], ) useImperativeHandle(ref, () => ({ exportToPNG, exportToSVG, })) const exportToPNG = (filename = "sankey-diagram.png") => { if (!svgRef.current) return const svgElement = svgRef.current const svgData = new XMLSerializer().serializeToString(svgElement) const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") const img = new Image() canvas.width = width canvas.height = height img.crossOrigin = "anonymous" img.onload = () => { if (ctx) { ctx.fillStyle = "white" ctx.fillRect(0, 0, width, height) ctx.drawImage(img, 0, 0) canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } }) } } img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) } const exportToSVG = (filename = "sankey-diagram.svg") => { if (!svgRef.current) return const svgElement = svgRef.current const svgData = new XMLSerializer().serializeToString(svgElement) const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } const { nodes, links } = processData(data, width, height, nodeWidth, nodePadding) return ( {enableZoom && (

)}

) })84:["$","$L8b",null,{"chatId":"jeiyWpU7luZ","children":["$","$L8c",null,{"data":{"@\"active-block\",\"jeiyWpU7luZ\",":{"id":"b_P0oWgMoHSWi","messageId":"j5gU39XUxRgnyxfQqPzmFM3BsqiTF9uD","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Fixing link path rendering","taskNameComplete":"Fixed link path rendering"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jeiyWpU7luZ\",":false,"":null},"children":"$L8e"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This