feat: add Sankey and SunburstChart components

.gitignore

@@ -15,7 +15,7 @@ dist
 .claude/*
 .agents/*
 tasks/
-
+.omx/*
 # Docs site generated files
 docs/.nuxt
 docs/.data

docs/app/charts/sankey-charts/custom-node-sankey-chart.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { Sankey, Tooltip } from 'vccs'
+
+const data = {
+  nodes: [
+    { name: 'Coal' },
+    { name: 'Gas' },
+    { name: 'Solar' },
+    { name: 'Electricity' },
+    { name: 'Heat' },
+    { name: 'Industry' },
+    { name: 'Homes' },
+  ],
+  links: [
+    { source: 0, target: 3, value: 30 },
+    { source: 1, target: 3, value: 20 },
+    { source: 2, target: 3, value: 15 },
+    { source: 0, target: 4, value: 10 },
+    { source: 1, target: 4, value: 8 },
+    { source: 3, target: 5, value: 35 },
+    { source: 3, target: 6, value: 30 },
+    { source: 4, target: 6, value: 18 },
+  ],
+}
+</script>
+
+<template>
+  <Sankey
+    :data="data"
+    :width="730"
+    :height="360"
+    link-fill="#06b6d4"
+  >
+    <template #node="{ x, y, width, height, payload }">
+      <g>
+        <rect
+          :x="x"
+          :y="y"
+          :width="width"
+          :height="height"
+          fill="#f59e0b"
+        />
+        <text
+          :x="x + width + 6"
+          :y="y + height / 2"
+          font-size="12"
+          dominant-baseline="middle"
+          fill="currentColor"
+        >
+          {{ payload.name }}
+        </text>
+      </g>
+    </template>
+    <Tooltip :cursor="false" />
+  </Sankey>
+</template>

docs/app/charts/sankey-charts/simple-sankey-chart.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Sankey, Tooltip } from 'vccs'
+
+const data = {
+  nodes: [
+    { name: 'Visit' },
+    { name: 'Sign up' },
+    { name: 'Onboarding' },
+    { name: 'Active' },
+    { name: 'Drop off' },
+    { name: 'Churned' },
+  ],
+  links: [
+    { source: 0, target: 1, value: 800 },
+    { source: 0, target: 4, value: 200 },
+    { source: 1, target: 2, value: 600 },
+    { source: 1, target: 4, value: 200 },
+    { source: 2, target: 3, value: 450 },
+    { source: 2, target: 5, value: 150 },
+  ],
+}
+</script>
+
+<template>
+  <Sankey
+    :data="data"
+    :width="730"
+    :height="360"
+    node-fill="#f97316"
+    link-fill="#14b8a6"
+  >
+    <Tooltip :cursor="false" />
+  </Sankey>
+</template>

docs/content/3.charts/11.sankey.md

@@ -0,0 +1,66 @@
+---
+title: Sankey
+description: Flow diagrams showing the magnitude of flow between nodes
+navigation:
+  icon: i-lucide-git-fork
+---
+
+Sankey diagrams visualize flow quantities between a set of nodes, where the width of each link is proportional to its value. They are ideal for showing energy flows, user journeys, budget allocations, and similar many-to-many relationships.
+
+## Simple Sankey
+
+A basic Sankey diagram with nodes and weighted links. The layout is computed by `d3-sankey`.
+
+::chart-demo{name="Simple Sankey" description="A Sankey diagram of a user funnel flow." src="sankey-charts/simple-sankey-chart"}
+::
+
+## Custom Node
+
+Use the `#node` slot to fully customize how each node is rendered. The slot receives coordinates, dimensions, and the node payload.
+
+::chart-demo{name="Custom Node Sankey" description="A Sankey diagram with custom node rendering showing labels." src="sankey-charts/custom-node-sankey-chart"}
+::
+
+## Sankey props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `{ nodes, links }` | **required** | Graph data with `nodes` and `links` arrays. Links use numeric `source`/`target` indices and a `value`. |
+| `width` | `number` | **required** | Chart width in pixels |
+| `height` | `number` | **required** | Chart height in pixels |
+| `nodeWidth` | `number` | `10` | Width of each node rectangle |
+| `nodePadding` | `number` | `10` | Vertical padding between nodes in the same column |
+| `iterations` | `number` | `32` | Number of d3-sankey layout iterations for relaxation |
+| `margin` | `{ top, right, bottom, left }` | `{ top: 5, right: 5, bottom: 5, left: 5 }` | Chart margins |
+| `nodeFill` | `string` | `'#0088fe'` | Default fill color for node rectangles |
+| `nodeStroke` | `string` | `'#fff'` | Stroke color for node rectangles |
+| `linkFill` | `string` | `'#0088fe'` | Default fill color for link paths |
+| `linkStroke` | `string` | `'none'` | Stroke color for link paths |
+| `isAnimationActive` | `boolean` | `true` | Enable entrance animation |
+| `transition` | `AnimationOptions` | `{ duration: 0.8, ease: 'easeOut' }` | Animation timing (motion-v) |
+
+## Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `#node` | `{ x, y, width, height, index, payload }` | Custom node rendering |
+| `#link` | `{ d, sourceX, targetX, sourceY, targetY, linkWidth, index, payload }` | Custom link path rendering |
+| `default` | — | Place `<Tooltip>` or other child components here. |
+
+## Data structure
+
+```ts
+const data = {
+  nodes: [
+    { name: 'A' },
+    { name: 'B' },
+    { name: 'C' },
+  ],
+  links: [
+    { source: 0, target: 1, value: 10 },
+    { source: 1, target: 2, value: 6 },
+  ],
+}
+```
+
+`source` and `target` are numeric indices into the `nodes` array. `value` determines the link width. Both nodes and links support `<Tooltip>` hover interaction.

packages/vue/package.json

@@ -57,6 +57,7 @@
     "@reduxjs/vue-redux": "^1.0.1",
     "@vueuse/core": "^13.1.0",
     "d3-hierarchy": "^3.1.2",
+    "d3-sankey": "^0.12.3",
     "decimal.js-light": "^2.5.1",
     "es-toolkit": "^1.39.3",
     "eventemitter3": "^5.0.1",
@@ -65,6 +66,7 @@
     "victory-vendor": "^37.3.6"
   },
   "devDependencies": {
+    "@types/d3-sankey": "^0.12.5",
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue-jsx": "^5.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",