Funnel Chart

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3import { FunnelChart as RechartsFC, Funnel, LabelList, Tooltip, ResponsiveContainer } from 'recharts'
4import { ChartEmpty } from './chart'
5 
6export interface FunnelChartData {
7  name: string
8  value: number
9  fill?: string
10}
11 
12export interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {
13  data: FunnelChartData[]
14  showLabels?: boolean
15  showTooltip?: boolean
16  animated?: boolean
17  height?: number
18  /** Accessible label for screen readers (default: "Funnel chart") */
19  ariaLabel?: string
20  emptyState?: React.ReactNode
21}
22 
23const NEUBRUTALISM_COLORS = [
24  'hsl(var(--primary))',
25  'hsl(var(--secondary))',
26  'hsl(var(--accent))',
27  'hsl(var(--success))',
28  'hsl(var(--info))',
29  'hsl(var(--warning))',
30]
31 
32const FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(
33  (
34    {
35      data,
36      showLabels = true,
37      showTooltip = true,
38      animated = true,
39      height = 300,
40      ariaLabel = 'Funnel chart',
41      emptyState,
42      className,
43      ...props
44    },
45    ref
46  ) => {
47    if (!data || data.length === 0) {
48      return <ChartEmpty ref={ref} message={emptyState} className={className} {...props} />
49    }
50 
51    const coloredData = data.map((d, i) => ({
52      ...d,
53      fill: d.fill || NEUBRUTALISM_COLORS[i % NEUBRUTALISM_COLORS.length],
54    }))
55 
56    return (
57      <div
58        ref={ref}
59        role="img"
60        aria-label={ariaLabel}
61        className={cn('w-full', className)}
62        style={{ height }}
63        {...props}
64      >
65        <ResponsiveContainer width="100%" height="100%">
66          <RechartsFC>
67            <Funnel
68              dataKey="value"
69              data={coloredData}
70              isAnimationActive={animated}
71              animationDuration={400}
72              stroke="hsl(var(--foreground))"
73              strokeWidth={3}
74            >
75              {showLabels && (
76                <LabelList
77                  position="right"
78                  fill="hsl(var(--foreground))"
79                  stroke="none"
80                  dataKey="name"
81                  style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 700 }}
82                />
83              )}
84            </Funnel>
85            {showTooltip && (
86              <Tooltip
87                contentStyle={{
88                  border: '3px solid hsl(var(--foreground))',
89                  borderRadius: 0,
90                  boxShadow: '4px 4px 0px hsl(var(--foreground))',
91// … truncated