Funnel chart

"use client";

import { FunnelChart } from "@/components/beautiful-charts/themes/instrument/recharts/funnel-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { step: "Visited", people: 12400 },
  { step: "Signed up", people: 3100 },
  { step: "Activated", people: 1850 },
  { step: "Trial", people: null }, // not tracked this month: named under the chart, never counted as zero
  { step: "Paid", people: 410 },
];

const config = { people: { label: "People", color: "var(--chart-1)" } } satisfies ChartConfig;

// The rate beside each step is from the previous step; conversion="first" shows the share of visitors instead.
export function SignupFunnel() {
  return <FunnelChart data={data} nameKey="step" valueKey="people" config={config} title="From visit to paid" onSelectedChange={(selection) => console.log(selection?.datum.step)} />;
}

export type Selection<TDatum> = {
  /** Index into the data you passed in, even when a brush shows a subset. */
  dataIndex: number;
  datum: TDatum;
  seriesKey: string | null;
  source: "pointer" | "keyboard" | "table";
  /** For a grouped segment (a donut's "Other"): the indexes of every row it stands for. `dataIndex` is the largest. */
  members?: number[] | undefined;
};

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 }[];
};