Funnel Chart

1"use client";
2 
3import type { Transition } from "motion/react";
4import { motion, useTransform } from "motion/react";
5import {
6  type CSSProperties,
7  type ReactNode,
8  useCallback,
9  useEffect,
10  useRef,
11  useState,
12} from "react";
13import { cn } from "@/lib/utils";
14import { useEnterComplete } from "./use-enter-complete";
15import { useMountProgress } from "./use-mount-progress";
16 
17// ─── Public types ───────────────────────────────────────────────────
18 
19export interface FunnelGradientStop {
20  offset: string | number;
21  color: string;
22}
23 
24export interface FunnelStage {
25  label: string;
26  value: number;
27  displayValue?: string;
28  /** Override the chart-level color for this segment */
29  color?: string;
30  /**
31   * Apply a linear gradient to this segment.
32   * Provide an array of color stops, e.g. `[{ offset: "0%", color: "#8B5CF6" }, { offset: "100%", color: "#3B82F6" }]`.
33   * When set, this takes priority over the segment and chart-level `color` for the innermost ring.
34   * Outer halo rings use the first stop color as their solid color.
35   */
36  gradient?: FunnelGradientStop[];
37}
38 
39export interface FunnelChartProps {
40  data: FunnelStage[];
41  orientation?: "horizontal" | "vertical";
42  color?: string;
43  layers?: number;
44  className?: string;
45  style?: CSSProperties;
46  showPercentage?: boolean;
47  showValues?: boolean;
48  showLabels?: boolean;
49  /** Controlled hover state — index of the hovered segment */
50  hoveredIndex?: number | null;
51  /** Callback when hover state changes */
52  onHoverChange?: (index: number | null) => void;
53  formatPercentage?: (pct: number) => string;
54  formatValue?: (value: number) => string;
55  /** Stagger delay between segments in seconds. Default 0.12 */
56  staggerDelay?: number;
57  /** Framer Motion transition for segment enter animation */
58  enterTransition?: Transition;
59  /** Gap between segments in pixels. Default 4 */
60  gap?: number;
61  /**
62   * Render a visx pattern definition. Receives a unique `id` string per segment
63   * and the resolved `color`. Return a `<PatternLines>` (or any visx pattern)
64   * inside an SVG `<defs>`. The component will use `fill="url(#id)"` on the
65   * innermost ring while keeping outer halo rings as solid color.
66   */
67  renderPattern?: (id: string, color: string) => ReactNode;
68  /** Edge style for the funnel segments. Default "curved" */
69  edges?: "curved" | "straight";
70  /**
71// … truncated