4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2db4,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { formatNumber } from "@/registry/dashboardcn/lib/format" export interface FunnelStep { name: string value: number /** Any CSS color for this step in the flow variant. Defaults to chart-1 through chart-5 in order. */ color?: string } export interface FunnelChartProps extends React.ComponentProps<"div"> { steps: FunnelStep[] valueFormatter?: (value: number) => string /** * Any CSS color. "bars" fades it step by step. "flow" paints every stage in * it, in place of the per-stage palette. */ color?: string /** Show the drop-off between consecutive steps. Bars only. */ showDropoff?: boolean /** "bars" stacks one bar per step; "flow" runs the steps left to right, each tapering into the next. */ variant?: "bars" | "flow" /** Flow only. "eased" curves each neck; "sharp" draws straight trapezoids. */ shape?: "eased" | "sharp" /** Flow only. Height of the stages in pixels. */ height?: number /** Flow only. Width of the neck between stages in pixels. */ neckWidth?: number /** Flow only. Show the share of the first step as a pill on each stage. */ showPercentages?: boolean /** Flow only. Show a tile with the name and value under each stage. */ showLabels?: boolean /** Flow only. Stage drawn at full strength while the rest dim. */ activeIndex?: number | null onActiveIndexChange?: (index: number | null) => void } const defaultColors = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] // Round so server and client render identical path strings. const round = (n: number) => Math.round(n * 1000) / 1000 /** Path for the neck between two stages, in a 1x1 box stretched to fit. */ function neckPath(from: number, to: number, shape: "eased" | "sharp") { const t0 = round((1 - from) / 2) const b0 = round(1 - t0) const t1 = round((1 - to) / 2) const b1 = round(1 - t1) if (shape === "sharp") return `M0,${t0} L1,${t1} L1,${b1} L0,${b0} Z` return `M0,${t0} C0.5,${t0} 0.5,${t1} 1,${t1} L1,${b1} C0.5,${b1} 0.5,${b0} 0,${b0} Z` } function FunnelBars({ steps, valueFormatter, color, showDropoff, }: { steps: FunnelStep[] valueFormatter: (value: number) => string color: string showDropoff: boolean }) { const first = steps[0]?.value ?? 0 const last = steps[steps.length - 1]?.value ?? 0 const overall = first > 0 ? last / first : 0 return ( <> {steps.map((step, index) => { const previous = index > 0 ? steps[index - 1]!.value : step.value const ofFirst = first > 0 ? step.value / first : 0 const ofPrevious = previous > 0 ? step.value / previous : 0 const dropoff = 1 - ofPrevious return ( {showDropoff && index > 0 ? (

) : null}

{index + 1} {step.name} {valueFormatter(step.value)} {formatNumber(ofFirst, { format: "percent" })}

) })} {steps.length > 1 ? (

Overall conversion {formatNumber(overall, { format: "percent" })}

) : null} ) } function FunnelFlow({ steps, valueFormatter, color, shape, height, neckWidth, showPercentages, showLabels, activeIndex, onActiveIndexChange, }: { steps: FunnelStep[] valueFormatter: (value: number) => string color?: string shape: "eased" | "sharp" height: number neckWidth: number showPercentages: boolean showLabels: boolean activeIndex?: number | null onActiveIndexChange?: (index: number | null) => void }) { const id = React.useId() const [activeState, setActiveState] = React.useState(null) const active = activeIndex === undefined ? activeState : activeIndex const setActive = (index: number | null) => { setActiveState(index) onActiveIndexChange?.(index) } const first = steps[0]?.value ?? 0 const stages = steps.map((step, index) => ({ ...step, share: first > 0 ? Math.min(1, Math.max(0, step.value / first)) : 0, fill: step.color ?? color ?? defaultColors[index % defaultColors.length], // A single color fades toward the end of the funnel so stages stay distinct. opacity: color && !step.color ? 1 - index * (0.6 / Math.max(steps.length - 1, 1)) : 1, })) return ( <>

setActive(null)} > {stages.map((stage, index) => { const next = stages[index + 1] const dimmed = active !== null && active !== index const neckDimmed = active !== null && active !== index && active !== index + 1 const gradient = `${id}-${index}` return (

setActive(index)} className="relative flex min-w-0 flex-1 items-center transition-opacity duration-200" style={{ opacity: dimmed ? 0.35 : 1 }} >

{showPercentages ? ( {formatNumber(stage.share, { format: "percent", maximumFractionDigits: 0 })} ) : null}

{next ? ( ) : null} ) })}

{showLabels ? (

{stages.map((stage, index) => (

setActive(index)} onMouseLeave={() => setActive(null)} className={cn( "flex min-w-0 flex-col gap-0.5 rounded-lg border px-2.5 py-2 transition-[opacity,border-color] duration-200", active !== null && active !== index && "opacity-50", active === index && "border-foreground/20" )} > {valueFormatter(stage.value)}

))}

) : null} ) } /** Step-by-step conversion, as stacked bars with drop-off or as a flow of tapering stages. */ function FunnelChart({ steps, valueFormatter = (value) => formatNumber(value), color, showDropoff = true, variant = "bars", shape = "eased", height = 160, neckWidth = 24, showPercentages = true, showLabels = true, activeIndex, onActiveIndexChange, className, ...props }: FunnelChartProps) { return (

{variant === "flow" ? ( ) : ( )}

) } export { FunnelChart } 4f:Tc05,export type NumberFormat = "number" | "compact" | "currency" | "percent" export interface FormatNumberOptions { format?: NumberFormat /** ISO 4217 code, used when format is "currency". Defaults to USD. */ currency?: string locale?: string maximumFractionDigits?: number /** Abbreviate large values, e.g. "$158K" instead of "$158,143". */ compact?: boolean } const formatterCache = new Map() function getFormatter(locale: string, options: Intl.NumberFormatOptions) { const key = locale + JSON.stringify(options) let formatter = formatterCache.get(key) if (!formatter) { formatter = new Intl.NumberFormat(locale, options) formatterCache.set(key, formatter) } return formatter } /** * Format a metric value for display. * * formatNumber(1234567) -> "1,234,567" * formatNumber(1234567, { format: "compact" }) -> "1.2M" * formatNumber(48.2, { format: "currency" }) -> "$48.20" * formatNumber(158143, { format: "currency", compact: true }) -> "$158K" * formatNumber(0.124, { format: "percent" }) -> "12.4%" */ export function formatNumber( value: number, { format = "number", currency = "USD", locale = "en-US", maximumFractionDigits, compact = false, }: FormatNumberOptions = {} ): string { if (!Number.isFinite(value)) return "—" // Compact values keep three significant digits: $158K, $1.23M, 41.2K. const compactOptions: Intl.NumberFormatOptions = compact ? maximumFractionDigits === undefined ? { notation: "compact", maximumSignificantDigits: 3 } : { notation: "compact", maximumFractionDigits } : {} switch (format) { case "compact": return getFormatter(locale, { notation: "compact", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) case "currency": return getFormatter(locale, { style: "currency", currency, maximumFractionDigits: maximumFractionDigits ?? 2, ...compactOptions, }).format(value) case "percent": return getFormatter(locale, { style: "percent", maximumFractionDigits: maximumFractionDigits ?? 1, }).format(value) default: return getFormatter(locale, { maximumFractionDigits: maximumFractionDigits ?? 0, ...compactOptions, }).format(value) } } /** * Format a fractional change as a signed percentage. * * formatDelta(0.124) -> "+12.4%" * formatDelta(-0.03) -> "-3.0%" * formatDelta(0) -> "0.0%" */ export function formatDelta(delta: number, locale = "en-US"): string { if (!Number.isFinite(delta)) return "—" return getFormatter(locale, { style: "percent", signDisplay: "exceptZero", maximumFractionDigits: 1, minimumFractionDigits: 1, }).format(delta) } /** * Fractional change between two values. Returns 0 when there is no baseline. */ export function computeDelta(current: number, previous: number): number { if (!previous) return 0 return (current - previous) / Math.abs(previous) } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4d",null,{"files":[{"path":"registry/dashboardcn/ui/funnel-chart.tsx","content":"$4e","type":"registry:ui"},{"path":"registry/dashboardcn/lib/format.ts","content":"$4f","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]