61:I[707087,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:Tddd,/** * Conversion funnel: SmoothFunnel chart with count strip above and * stage-name + retention-from-previous strip below. * * Works for any drop-off flow with 3-6 stages: hiring (applied -> * hired), e-commerce (sessions -> purchases), onboarding (signed up * -> activated), etc. Reads as a single horizontal "flow": * * 72K 38.2K 16.8K 5.6K * ╔══════╗╔════════╗╔══════════╗╔══════════╗ * ║ 100% ║║ 53% ║║ 23% ║║ 8% ║ * ╚══════╝╚════════╝╚══════════╝╚══════════╝ * Views Cart Checkout Purchase * -> 53% -> 44% -> 33% * * The middle pill (inside each band) shows the share OF THE TOP * stage (100%, 53%, 23%, ...). The bottom retention number shows the * stage-to-stage conversion -- usually the more actionable signal. */ import * as React from 'react' import { cn } from '@/lib/utils' import { SmoothFunnel } from '@/components/ui/charts/smooth-funnel' interface Stage { name: string value: number } export interface ConversionFunnelProps { data: Stage[] /** SmoothFunnel container height. Defaults to 180. */ height?: number | string /** Override colour palette. Defaults to the registry's chart-1..N * OKLCH tokens via CSS variables (so light/dark + theme-customizer * flips ripple through without any JS). Pass a literal hex array to * override. */ colors?: string[] /** Compact number formatter for the count strip (default toLocaleString). */ format?: (n: number) => string /** Hide the retention-from-previous footer on each non-first stage. */ hideRetention?: boolean className?: string } const DEFAULT_PALETTE = [ 'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', 'var(--chart-1)', ] export function ConversionFunnel({ data, height = 180, colors, format, hideRetention = false, className, }: ConversionFunnelProps) { const palette = colors ?? DEFAULT_PALETTE const fmt = (v: number) => (format ? format(v) : v.toLocaleString()) const retention = (i: number) => { if (i === 0) return null const prev = data[i - 1]?.value ?? 1 return Math.round((data[i]!.value / prev) * 100) } return (

{/* Top: per-stage count */}

{data.map((stage) => (

{fmt(stage.value)}

))}

{/* Funnel SVG */} {/* Bottom: stage name + retention from previous */}

{data.map((stage, i) => (

{stage.name}

{!hideRetention && retention(i) !== null && (

→ {retention(i)}% retained

)}

))}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/smooth-funnel.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/conversion-funnel/ConversionFunnel.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/ConversionFunnel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]