"use client"; import type * as React from "react"; import { ChartEmpty } from "@/registry/default/charts/chart-empty"; import { formatCompact, formatPercent, } from "@/registry/default/lib/chart-utils"; import { cn } from "@/registry/default/lib/utils"; export type FunnelChartProps> = { data: T[]; /** Key of the step name, e.g. "step". */ index: keyof T & string; /** Key of the number reaching each step, e.g. "users". */ category: keyof T & string; valueFormatter?: (value: number) => string; /** CSS colour of the bars. */ color?: string; /** Show the % lost between steps. */ showDropOff?: boolean; /** Centre the bars (funnel shape) or align them left. */ align?: "center" | "start"; emptyState?: React.ReactNode; className?: string; "aria-label"?: string; }; export function FunnelChart>({ data, index, category, valueFormatter = formatCompact, color = "var(--chart-1)", showDropOff = true, align = "center", emptyState, className, "aria-label": ariaLabel, }: FunnelChartProps) { if (data.length === 0) { return emptyState ?? ; } const values = data.map((row) => Math.max(Number(row[category]) || 0, 0)); const first = values[0] || 1; return (

{String(row[index])} {showDropOff && dropOff !== null ? ( ↓ {formatPercent(dropOff, { digits: 1 })} drop-off ) : null} {valueFormatter(value)} {" "} · {formatPercent(value / first, { digits: 1 })}

); }