import * as React from 'react' import { cn } from '@/lib/utils' import { FunnelChart as RechartsFC, Funnel, LabelList, Tooltip, ResponsiveContainer } from 'recharts' import { ChartEmpty } from './chart' export interface FunnelChartData { name: string value: number fill?: string } export interface FunnelChartProps extends React.HTMLAttributes { data: FunnelChartData[] showLabels?: boolean showTooltip?: boolean animated?: boolean height?: number /** Accessible label for screen readers (default: "Funnel chart") */ ariaLabel?: string emptyState?: React.ReactNode } const NEUBRUTALISM_COLORS = [ 'hsl(var(--primary))', 'hsl(var(--secondary))', 'hsl(var(--accent))', 'hsl(var(--success))', 'hsl(var(--info))', 'hsl(var(--warning))', ] const FunnelChart = React.forwardRef( ( { data, showLabels = true, showTooltip = true, animated = true, height = 300, ariaLabel = 'Funnel chart', emptyState, className, ...props }, ref ) => { if (!data || data.length === 0) { return } const coloredData = data.map((d, i) => ({ ...d, fill: d.fill || NEUBRUTALISM_COLORS[i % NEUBRUTALISM_COLORS.length], })) return (

{showLabels && ( )} {showTooltip && ( [`${Number(value ?? 0).toLocaleString()}`, String(name ?? '')]} /> )}

) } ) FunnelChart.displayName = 'FunnelChart' export { FunnelChart }