{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pipeline-echarts-sankey-chart",
  "description": "Revenue sources converging through a hub and fanning back out, with a centered total",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-sankey-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-pipeline-echarts-sankey-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsSankeyChart, type ChartConfig } from \"@/registry/charts/echarts-sankey-chart\";\n\nconst chartData = {\n  nodes: [\n    { name: \"Retail\" },\n    { name: \"Wholesale\" },\n    { name: \"Licensing\" },\n    { name: \"Services\" },\n    { name: \"Pipeline\" },\n    { name: \"Expansion\" },\n    { name: \"Tooling\" },\n    { name: \"Support\" },\n    { name: \"Reserve\" },\n  ],\n  links: [\n    { source: 0, target: 4, value: 31480 },\n    { source: 1, target: 4, value: 46220 },\n    { source: 2, target: 4, value: 14960 },\n    { source: 3, target: 4, value: 28340 },\n    { source: 4, target: 5, value: 52640 },\n    { source: 4, target: 6, value: 9180 },\n    { source: 4, target: 7, value: 12470 },\n    { source: 4, target: 8, value: 46710 },\n  ],\n};\n\nconst chartConfig = {\n  Retail: { label: \"Retail\", colors: { light: [\"#1d4ed8\"], dark: [\"#3b82f6\"] } },\n  Wholesale: { label: \"Wholesale\", colors: { light: [\"#2563eb\"], dark: [\"#60a5fa\"] } },\n  Licensing: { label: \"Licensing\", colors: { light: [\"#4338ca\"], dark: [\"#6366f1\"] } },\n  Services: { label: \"Services\", colors: { light: [\"#4f46e5\"], dark: [\"#818cf8\"] } },\n  // The hub is a waist, not a category: no label, and a mid tone so the bands\n  // read blue -> violet -> red straight across instead of fading out at centre.\n  Pipeline: { label: \"\", colors: { light: [\"#6d28d9\"], dark: [\"#8b5cf6\"] } },\n  Expansion: { label: \"Expansion\", colors: { light: [\"#be123c\"], dark: [\"#f43f5e\"] } },\n  Tooling: { label: \"Tooling\", colors: { light: [\"#c2410c\"], dark: [\"#fb923c\"] } },\n  Support: { label: \"Support\", colors: { light: [\"#9f1239\"], dark: [\"#fb7185\"] } },\n  Reserve: { label: \"Reserve\", colors: { light: [\"#b91c1c\"], dark: [\"#ef4444\"] } },\n} satisfies ChartConfig;\n\nconst TOTAL = chartData.links\n  .filter((link) => link.target === 4)\n  .reduce((sum, link) => sum + link.value, 0);\n\nexport function EChartsPipelineSankeyChart() {\n  return (\n    <div className=\"relative h-full w-full p-4\">\n      <EChartsSankeyChart\n        data={chartData}\n        config={chartConfig}\n        className=\"h-full w-full\"\n        nodeWidth={10}\n        nodePadding={18}\n        linkCurvature={0.55}\n      >\n        <EChartsSankeyChart.Tooltip variant=\"frosted-glass\" />\n        <EChartsSankeyChart.Link variant=\"gradient\" />\n        <EChartsSankeyChart.Node radius={5}>\n          <EChartsSankeyChart.NodeLabel\n            position=\"outside\"\n            showValues\n            valueFormatter={(value) => `$${value.toLocaleString(\"en-US\")}`}\n          />\n        </EChartsSankeyChart.Node>\n      </EChartsSankeyChart>\n\n      <div className=\"pointer-events-none absolute inset-0 flex items-stretch justify-center\">\n        <div className=\"flex h-full flex-col items-center justify-center bg-[linear-gradient(to_right,transparent_0%,var(--background)_32%,var(--background)_68%,transparent_100%)] px-14\">\n          <span className=\"text-muted-foreground text-[11px] sm:text-xs\">Total booked</span>\n          <span className=\"text-primary text-2xl leading-none font-semibold tracking-tight sm:text-4xl\">\n            ${TOTAL.toLocaleString(\"en-US\")}\n          </span>\n          <span className=\"text-muted-foreground mt-1 text-[11px] sm:text-xs\">\n            4 sources &middot; 4 routes\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/pipeline-echarts-sankey-chart.tsx"
    }
  ],
  "type": "registry:block"
}