Skip to content

feat: add a sankey chart - #232

Merged
starc007 merged 2 commits into
mainfrom
feat/sankey-chart
Oct 22, 2026
Merged

starc007 merged 2 commits into
mainfrom
feat/sankey-chart

Conversation

@starc007

Copy link
Copy Markdown
Owner

Summary

Adds Sankey Chart (@beui/sankey-chart) to the charts category: weighted flows between stages, laid out in columns from sources to outcomes.

Component (components/charts/sankey-chart.tsx + sankey-chart/)

  • Composable SankeyChart with SankeyChartPlot, SankeyChartTooltip and useSankeyChart; omit children for the complete chart.
  • Layout written in house, with no new dependency. Nodes go in columns by longest path from a source, with outcomes on the right. Nodes are sized to their value and relaxed to shorten bands, and each column keeps the given node order so the chart morphs in place between datasets.
  • Gradient bands draw in column by column when scrolled into view and spring to new geometry when the data changes. A resize re-lays the chart instantly.
  • Hovering or focusing a node lights it, its flows and the nodes they reach; hovering a flow lights that flow and its ends. Tooltips use NumberTicker, and a node's tooltip lists its largest flows.
  • Controlled or uncontrolled activeId (node id or link id, source:target by default), formatValue, colors, nodeWidth, nodePadding, label.

Edge cases

  • Repeated node ids keep the first; unnamed duplicate links are summed into one band.
  • Unknown-node, self, non-positive or non-finite and loop-closing links are dropped, with a development warning. Loop detection is iterative.
  • Distinct empty states: "No sankey data" and "No flows to show".
  • Labels are fitted to the column gap; values are hidden when they don't fit.
  • Thin flows get an 8px hover target, and every node a target at least 24px tall.
  • Touch taps keep the tooltip open until a tap outside. Blur clears the highlight, and focus moves to the tab stop if the focused node is removed.
  • Under 32rem the chart scrolls sideways inside its own box; the page does not.

Accessibility

  • Native node buttons with one roving tab stop. Arrow Up/Down move within a column, Arrow Left/Right jump to the nearest node in the next column, and Home, End and Escape work.
  • The focused node is described by the tooltip, and a visually hidden table lists every flow with its value and share of its source.
  • Reduced motion drops the draw-in and springs.

Also

  • Expanded previews (site chrome) now leave Escape to a demo that used it, so closing a chart tooltip does not close the expanded preview.
  • Registry entry, preview (made-up income statement with a Q2/Q3 switch) and usage file, plus SEO, About, dates, a changelog line, an AGENTS.md row and tests/sankey-chart.a11y.test.tsx.

Testing

  • bun run check and bun test (176 accessibility tests) pass.
  • Checked in the browser: layout, draw-in, the Q2/Q3 morph, node and flow hover (including the thinnest flow), node tooltip flow lists, keyboard navigation with a moving tab stop and a linked tooltip, tab-out clearing, light and dark themes, and a 375px phone width with no page scroll.
  • Not checked: real touch input, reduced motion, and the feel of instant resize. The browser pane ran animations slowly in the background, so some states were read from the page rather than watched.

Composable SankeyChart with Plot, Tooltip and useSankeyChart: weighted flows laid out in columns, gradient bands that draw in and morph on new data, node and flow highlighting, keyboard navigation and an exact-flow table.
Clean data once per change: keep the first of repeated nodes, sum unnamed duplicate links, drop invalid and loop-closing links with a development warning. Keep column order stable, fit labels to the column gap, re-lay instantly on resize, widen hover targets for thin flows and small nodes, keep tapped tooltips open until an outside tap, clear highlight on blur, hand focus on when a focused node is removed, and list a node's flows in its tooltip. Expanded previews leave Escape to a demo that used it.
@starc007
starc007 merged commit a890664 into main Oct 22, 2026
1 check passed
@starc007
starc007 deleted the feat/sankey-chart branch October 22, 2026 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant