{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ex-labeled-nodes-echarts-sankey-chart",
  "registryDependencies": [
    "@evilcharts/echarts-sankey-chart"
  ],
  "files": [
    {
      "path": "src/registry/examples/echarts/ex-labeled-nodes-echarts-sankey-chart.tsx",
      "content": "\"use client\";\n\nimport {\n  EChartsSankeyChart,\n  type SankeyData,\n  type ChartConfig,\n} from \"@/registry/charts/echarts-sankey-chart\";\n\n// Sales report data - similar to the design with CRT, PPT, DMG categories\nconst data: SankeyData = {\n  nodes: [\n    { name: \"CRT_L\" }, // Left CRT\n    { name: \"PPT_L\" }, // Left PPT\n    { name: \"DMG_L\" }, // Left DMG\n    { name: \"PPT_M\" }, // Middle PPT\n    { name: \"DMG_M\" }, // Middle DMG\n    { name: \"CRT_R\" }, // Right CRT\n    { name: \"PPT_R\" }, // Right PPT\n    { name: \"DMG_R\" }, // Right DMG\n  ],\n  links: [\n    // From left CRT to middle nodes\n    { source: 0, target: 3, value: 750 },\n    { source: 0, target: 4, value: 502 },\n\n    // From left PPT to middle nodes\n    { source: 1, target: 3, value: 1500 },\n    { source: 1, target: 4, value: 1498 },\n\n    // From left DMG to middle nodes\n    { source: 2, target: 3, value: 3931 },\n    { source: 2, target: 4, value: 1612 },\n\n    // From middle PPT to right nodes\n    { source: 3, target: 5, value: 2000 },\n    { source: 3, target: 6, value: 2091 },\n    { source: 3, target: 7, value: 1840 },\n\n    // From middle DMG to right nodes\n    { source: 4, target: 5, value: 1991 },\n    { source: 4, target: 7, value: 1158 },\n  ],\n};\n\nconst chartConfig = {\n  CRT_L: {\n    label: \"CRT\",\n    colors: {\n      light: [\"#10b981\"],\n      dark: [\"#34d399\"],\n    },\n  },\n  PPT_L: {\n    label: \"PPT\",\n    colors: {\n      light: [\"#8b5cf6\"],\n      dark: [\"#a78bfa\"],\n    },\n  },\n  DMG_L: {\n    label: \"DMG\",\n    colors: {\n      light: [\"#06b6d4\", \"#8b5cf6\"],\n      dark: [\"#22d3ee\", \"#a78bfa\"],\n    },\n  },\n  PPT_M: {\n    label: \"PPT\",\n    colors: {\n      light: [\"#8b5cf6\"],\n      dark: [\"#a78bfa\"],\n    },\n  },\n  DMG_M: {\n    label: \"DMG\",\n    colors: {\n      light: [\"#06b6d4\", \"#8b5cf6\"],\n      dark: [\"#22d3ee\", \"#a78bfa\"],\n    },\n  },\n  CRT_R: {\n    label: \"CRT\",\n    colors: {\n      light: [\"#10b981\"],\n      dark: [\"#34d399\"],\n    },\n  },\n  PPT_R: {\n    label: \"PPT\",\n    colors: {\n      light: [\"#8b5cf6\", \"#10b981\"],\n      dark: [\"#a78bfa\", \"#34d399\"],\n    },\n  },\n  DMG_R: {\n    label: \"DMG\",\n    colors: {\n      light: [\"#06b6d4\", \"#10b981\"],\n      dark: [\"#22d3ee\", \"#34d399\"],\n    },\n  },\n} satisfies ChartConfig;\n\nexport function EChartsExampleSankeyChart() {\n  return (\n    <EChartsSankeyChart\n      className=\"h-full w-full p-4\"\n      data={data}\n      config={chartConfig}\n      nodeWidth={80}\n      nodePadding={24}\n    >\n      <EChartsSankeyChart.Node isClickable radius={4}>\n        <EChartsSankeyChart.NodeLabel\n          position=\"inside\" // [!code highlight]\n          showValues // [!code highlight]\n          valueFormatter={(value) => value.toLocaleString()}\n        />\n      </EChartsSankeyChart.Node>\n      <EChartsSankeyChart.Link variant=\"gradient\" verticalPadding={8} />\n      <EChartsSankeyChart.Tooltip />\n    </EChartsSankeyChart>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}