4d: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/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"],"RegistryDependencies"] 4e: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"] 4f:T2032,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { formatChartValue, type FormatPreset } from "@/lib/format-utils" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" // ── Types ────────────────────────────────────────────────────────────────── export interface FunnelStage { name: string value: number /** Override bar color — accepts CSS custom property or hex. Defaults to --chart-N */ color?: string } export interface FunnelChartProps extends React.HTMLAttributes { data: FunnelStage[] title?: string subtitle?: string footer?: React.ReactNode /** Chart canvas height in px */ height?: number /** Show value labels inside/beside each bar */ showLabels?: boolean /** Show conversion rate between consecutive stages */ showPercentage?: boolean /** Custom value formatter — overrides format/decimals/locale/currency */ valueFormatter?: (value: number) => string format?: FormatPreset decimals?: number currency?: string abbreviate?: boolean loading?: boolean locale?: UILocale } // ── Variants ─────────────────────────────────────────────────────────────── export const funnelChartContainerVariants = cva( "relative w-full overflow-hidden", { variants: {}, } ) // ── Constants ────────────────────────────────────────────────────────────── /** CSS chart tokens, cycled when more than 5 stages */ const CHART_COLORS = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] const SKELETON_WIDTHS = ["85%", "70%", "55%", "40%", "28%"] // ── FunnelChart ──────────────────────────────────────────────────────────── export function FunnelChart({ data, title, subtitle, footer, height = 300, showLabels = true, showPercentage = true, valueFormatter, format, decimals = 0, currency = "USD", abbreviate = false, loading = false, locale = "en-US", className, ...props }: FunnelChartProps) { const formatValue = React.useCallback( (v: number) => { if (valueFormatter) return valueFormatter(v) return formatChartValue(v, { format, decimals, locale, currency, abbreviate, }) }, [valueFormatter, format, decimals, locale, currency, abbreviate] ) const maxValue = data.length > 0 ? Math.max(...data.map((s) => s.value)) : 1 // ── Loading ─────────────────────────────────────────────────────────────── if (loading) { return ( {(title || subtitle) && ( {title && } {subtitle && } )} {footer && {footer}} ) } // ── Empty ───────────────────────────────────────────────────────────────── if (data.length === 0) { const t = UI_I18N[locale] return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )}

{t.emptyState.noData}

{footer && {footer}} ) } // ── Computed values ─────────────────────────────────────────────────────── const barHeightPerStage = Math.floor( (height - (data.length - 1) * 8) / data.length ) return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )}

{data.map((stage, i) => { const widthPct = maxValue > 0 ? Math.max(10, (stage.value / maxValue) * 100) : 10 const color = stage.color ?? CHART_COLORS[i % CHART_COLORS.length] const conversionRate = i > 0 && data[i - 1]!.value > 0 ? (stage.value / data[i - 1]!.value) * 100 : null return ( {/* Conversion rate between stages */} {showPercentage && conversionRate !== null && (

↓{" "} {new Intl.NumberFormat(locale, { style: "percent", minimumFractionDigits: 1, maximumFractionDigits: 1, }).format(conversionRate / 100)}

)} {/* Stage bar */}

{showLabels && ( {stage.name}: {formatValue(stage.value)} )}

) })}

{footer && {footer}} ) } 4c:["$","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,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["chart","skeleton","card","ui-i18n","format-utils"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/funnel-chart.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-funnel-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]