Funnel

Funnel.tsxTakes counts and computes both percentages, colours the biggest drop, and prints the window the counts were taken over.Copy

import { cn } from "@/lib/utils";

/** A step is a name and how many of the cohort reached it. Both percentages
 *  are computed here, so the chart can never show one without the other. */
export type Step = { name: string; count: number };

type Props = {
  /** In sequence. The first step is the population everything is measured against. */
  steps: Step[];
  /** The conversion window, printed under the chart. Somebody who started
   *  Tuesday and paid Friday either counts or does not, and the chart has to
   *  say which. */
  window: string;
  barWidth?: number;
};

const pct = (n: number) => `${Math.round(n * 100)}%`;
const fmt = new Intl.NumberFormat("en-GB");

export function Funnel({ steps, window, barWidth = 160 }: Props) {
  const base = steps[0]?.count ?? 0;
  const rows = steps.map((s, i) => ({
    ...s,
    ofAll: s.count / base,
    fromLast: i === 0 ? null : s.count / steps[i - 1].count,
  }));
  // The finding is the biggest single drop, and it gets the only colour.
  const worst = rows.reduce((w, r, i) => (r.fromLast !== null && (w < 0 || r.fromLast < rows[w].fromLast!) ? i : w), -1);

  return (
    <div className="w-full max-w-[480px] rounded-lg border bg-card p-4">
      <div className="flex items-baseline border-b pb-2 text-[11px] uppercase tracking-wide text-muted-foreground">
        <span className="flex-1">Step</span>
        <span className="w-20 text-right">From last</span>
        <span className="w-14 text-right">Of all</span>
      </div>
      <ol className="mt-1 text-xs">
        {rows.map((r, i) => (
          <li key={r.name} className="flex items-center py-2">
            <span className="w-28 text-card-foreground" title={`${fmt.format(r.count)} people`}>{r.name}</span>
            {/* Length, never area. A taper reads worse for no gain but the metaphor. */}
            <span
              className={cn("h-3.5 rounded-[1px]", i === worst ? "bg-status-warn" : "bg-chart-1")}
              style={{ width: Math.max(1, Math.round(r.ofAll * barWidth)) }}
            />
            <span className={cn("ml-auto w-20 text-right tabular-nums", i === worst ? "text-status-warn" : "text-muted-foreground")}>
              {r.fromLast === null ? "—" : pct(r.fromLast)}
            </span>
            <span className="w-14 text-right tabular-nums text-card-foreground">{pct(r.ofAll)}</span>
          </li>
        ))}
      </ol>
      <p className="mt-2 border-t pt-2 text-[11px] text-muted-foreground">
        {fmt.format(base)} people, {window}
      </p>
    </div>
  );
}

demo.tsxHow it is called: five checkout steps as counts, so the percentages are derived rather than typed.Copy

import { Funnel } from "./Funnel";

/**
 * Five steps from a checkout. Ten thousand viewed, 1,083 paid. The counts are
 * chosen so the two percentages land on the drawing's: 41, 53, 55 and 91 from
 * the step before, 11% of everyone at the end.
 */
export default function Demo() {
  return (
    <Funnel
      steps={[
        { name: "Viewed product", count: 10000 },
        { name: "Added to cart", count: 4100 },
        { name: "Began checkout", count: 2170 },
        { name: "Entered payment", count: 1190 },
        { name: "Paid", count: 1083 },
      ]}
      window="same users, 7-day window from first view"
    />
  );
}