Sankey flowPro

• Showing how a volume splits and merges across stages: traffic to signups, budget to teams, energy to uses.
• Finding the biggest leaks between one step and the next.

• A single linear path with drop-off: use the funnel chart.
• Cycles (A → B → A): a Sankey needs flows that move forward.

Import it from @/components/ui/sankey-flow after installing.

import { SankeyFlow } from "@/components/ui/sankey-flow";

const nodes = [
  { id: "search", label: "Search" },
  { id: "direct", label: "Direct" },
  { id: "trial", label: "Trial" },
  { id: "paid", label: "Paid" },
];
const links = [
  { source: "search", target: "trial", value: 4200 },
  { source: "direct", target: "trial", value: 1800 },
  { source: "trial", target: "paid", value: 1900 },
];

export function Flow() {
  return <SankeyFlow nodes={nodes} links={links} columns={["Source", "Trial", "Outcome"]} />;
}

• Each stage is focusable with its value and share of the total.
• The chart has a text summary of the total and the number of stages.

• Particles move along each ribbon in proportion to its volume.
• Particles are off for reduced motion and pause when the chart is off screen.

• Width follows the container with a ResizeObserver; ribbons and labels re-lay out.

• Particles are written to the DOM each frame without React re-renders; about 70 dots in total.

• Give every link a positive value; nodes are sized by the larger of what flows in and out.
• Use muted colours (var(--muted-foreground)) for drop-off nodes so the main path stands out.