fn-design-system/components/funnel_chart.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	source_repo	source_license	source_file
funnel_chart	component	ts	ui	1.0.0	impure	FunnelChart(props: FunnelChartProps): JSX.Element	Visualiza un funnel de conversión con barras degradadas, valores formateados y tasa de conversión entre etapas como Badge semántico. Genérico — acepta cualquier array {stage,value}.	funnel conversion dashboard component ui chart acquisition analytics				false		@mantine/core react	Componente FunnelChart que renderiza un funnel vertical de conversión con porcentajes entre etapas.	false			frontend/functions/ui/funnel_chart.tsx	name type required description data FunnelStage[] true Etapas del funnel. Cada etapa con { stage: string, value: number }. name type required description valueFormatter (value: number) => string false Formateador del valor absoluto. Default: compact (K/M/B). name type required description showConversion boolean false Mostrar tasa de conversión entre etapas como Badge. Default true. name type required description barHeight number false Alto de cada barra en px. Default 28. name type required description goodThreshold number false Tasa de conversión (%) por encima de la cual el Badge es 'success'. Default 30. name type required description warnThreshold number false Tasa de conversión (%) por encima de la cual el Badge es 'info' (por debajo → 'warning'). Default 5. name type required description barLabel (stage: FunnelStage, pctOfMax: number) => string false Texto opcional dentro de cada barra. name type required description barColor string false Color o gradient CSS a aplicar a las barras. Default: gradient indigo→cyan.		false	react	default	claude.ai/design		sources/frontend_designs/Ads Analytics Dashboard _standalone_.html

Ejemplo

import { FunnelChart } from '@fn_library'

const funnel = [
  { stage: 'Impressions', value: 12_400_000 },
  { stage: 'Clicks',      value: 214_807 },
  { stage: 'Sessions',    value: 186_904 },
  { stage: 'Add to cart', value: 24_113 },
  { stage: 'Checkout',    value: 9_642 },
  { stage: 'Conversions', value: 4_812 },
]

// Básico — conversión automática entre etapas
<FunnelChart data={funnel} />

// Moneda + altura mayor
<FunnelChart
  data={funnel}
  valueFormatter={(n) => '$' + n.toLocaleString()}
  barHeight={36}
/>

// Umbrales custom de conversión (ej. funnel de lead gen donde >10% ya es bueno)
<FunnelChart
  data={leadFunnel}
  goodThreshold={10}
  warnThreshold={2}
/>

Notas

• La barra se dimensiona como porcentaje del valor máximo (primera etapa por defecto).
• La tasa de conversión se calcula contra la etapa anterior, no contra el máximo.
• Extraído de un export de Claude Design (Ads Analytics Dashboard). El AdsFunnel original estaba hardcodeado con gradient indigo→cyan; aquí se generaliza con barColor y barLabel.
• Los tres colores semánticos del Badge (success/info/warning) son configurables vía goodThreshold y warnThreshold.