Funnel Chart

import { FunnelChart } from "@/components/ui/funnel-chart";

export default function Example() {
  return <FunnelChart />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const COLORS = ["#6366f1", "#ec4899", "#f59e0b", "#10b981", "#3b82f6", "#8b5cf6"];

const FunnelChart = forwardRef(({ className, data = [], width = 400, height = 300, ...props }, ref) => {
  const maxVal = Math.max(...data.map((d) => d.value), 1);
  const stepH = height / data.length;

  return (
    <div ref={ref} className={cn("inline-block", className)} {...props}>
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
        {data.map((d, i) => {
          const ratio = d.value / maxVal;
          const w = ratio * (width - 80);
          const x = (width - w) / 2;
          const y = i * stepH + 2;
          return (
            <g key={i}>
              <rect x={x} y={y} width={w} height={stepH - 4} fill={d.color || COLORS[i % COLORS.length]} opacity="0.8" rx="4" />
              <text x={width / 2} y={y + stepH / 2} textAnchor="middle" dominantBaseline="middle" className="fill-white text-xs font-medium">
                {d.label} ({d.value})
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
});
FunnelChart.displayName = "FunnelChart";

export { FunnelChart };