Sankey chart

"use client";

import { SankeyChart } from "@/components/beautiful-charts/themes/instrument/recharts/sankey-chart";

const data = {
  nodes: [
    { id: "visits", label: "Visits" }, { id: "signup", label: "Sign-ups" }, { id: "left", label: "Left" },
    { id: "trial", label: "Trials" }, { id: "paid", label: "Paid" }, { id: "churn", label: "Churned" },
  ],
  links: [
    { source: "visits", target: "signup", value: 4200 }, { source: "visits", target: "left", value: 9800 },
    { source: "signup", target: "trial", value: 2600 }, { source: "trial", target: "paid", value: 880 },
    { source: "trial", target: "churn", value: 1720 },
  ],
};

// Selecting a node traces its path; `members` lists the links on it as indexes into `links`.
export function SignupFlow() {
  return <SankeyChart data={data} title="From visit to paid" onSelectedChange={(selection) => console.log(selection?.datum.label, selection?.members)} />;
}

/** What a Sankey reports when a node is selected: the node, and every link on its traced path (as indexes into `links`). */
export type SankeySelection = Omit<Selection<SankeyNode>, "members"> & { members: number[] };

export type TooltipContext<TDatum> = {
  datum: TDatum;
  /** Index into the data you passed in. */
  dataIndex: number;
  /** Visible series at this index. `value` is your raw value; `share` is its part of the row in 100% mode. */
  series: { key: string; label: ReactNode; value: number | null; share?: number | null | undefined; color: string; selected: boolean }[];
};