4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T7dbf,"use client"; import type { Transition } from "motion/react"; import { motion, useTransform } from "motion/react"; import { type CSSProperties, type ReactNode, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; import { useEnterComplete } from "./use-enter-complete"; import { useMountProgress } from "./use-mount-progress"; // ─── Public types ─────────────────────────────────────────────────── export interface FunnelGradientStop { offset: string | number; color: string; } export interface FunnelStage { label: string; value: number; displayValue?: string; /** Override the chart-level color for this segment */ color?: string; /** * Apply a linear gradient to this segment. * Provide an array of color stops, e.g. `[{ offset: "0%", color: "#8B5CF6" }, { offset: "100%", color: "#3B82F6" }]`. * When set, this takes priority over the segment and chart-level `color` for the innermost ring. * Outer halo rings use the first stop color as their solid color. */ gradient?: FunnelGradientStop[]; } export interface FunnelChartProps { data: FunnelStage[]; orientation?: "horizontal" | "vertical"; color?: string; layers?: number; className?: string; style?: CSSProperties; showPercentage?: boolean; showValues?: boolean; showLabels?: boolean; /** Controlled hover state — index of the hovered segment */ hoveredIndex?: number | null; /** Callback when hover state changes */ onHoverChange?: (index: number | null) => void; formatPercentage?: (pct: number) => string; formatValue?: (value: number) => string; /** Stagger delay between segments in seconds. Default 0.12 */ staggerDelay?: number; /** Framer Motion transition for segment enter animation */ enterTransition?: Transition; /** Gap between segments in pixels. Default 4 */ gap?: number; /** * Render a visx pattern definition. Receives a unique `id` string per segment * and the resolved `color`. Return a `` (or any visx pattern) * inside an SVG ``. The component will use `fill="url(#id)"` on the * innermost ring while keeping outer halo rings as solid color. */ renderPattern?: (id: string, color: string) => ReactNode; /** Edge style for the funnel segments. Default "curved" */ edges?: "curved" | "straight"; /** * Controls how segment labels (value, percentage, stage name) are arranged. * - "spread": Value/percentage/label are spread apart (top/center/bottom for horizontal, * left/center/right for vertical). This is the default. * - "grouped": All label items stack together in a tight group. * * When "grouped", use `labelOrientation` and `labelAlign` for full control. */ labelLayout?: "spread" | "grouped"; /** * Stack direction of the label group. Only applies when `labelLayout="grouped"`. * - "vertical": Items stack top-to-bottom. Default for horizontal funnels. * - "horizontal": Items stack left-to-right. Default for vertical funnels. */ labelOrientation?: "vertical" | "horizontal"; /** * Where the label group sits within the segment cell. * - "center" (default), "start", "end" * For horizontal funnel: start=top, end=bottom. * For vertical funnel: start=left, end=right. */ labelAlign?: "center" | "start" | "end"; /** Grid configuration. Pass `true` for default bands + lines, or an object for fine control. */ grid?: | boolean | { /** Show alternating background bands behind each segment. Default true */ bands?: boolean; /** Color of the background bands. Default "var(--color-muted)" */ bandColor?: string; /** Show grid lines at each gap between segments. Default true */ lines?: boolean; /** Color of the grid lines. Default "var(--chart-grid)" */ lineColor?: string; /** Opacity of the grid lines. Default 1 */ lineOpacity?: number; /** Width of the grid lines in pixels. Default 1 */ lineWidth?: number; }; } // ─── Defaults ─────────────────────────────────────────────────────── import { intFmt } from "./chart-formatters"; const fmtPct = (p: number) => `${Math.round(p)}%`; const fmtVal = intFmt; // ─── SVG helpers ──────────────────────────────────────────────────── /** * Builds a single segment path for one stage in the funnel. * Each segment is a smooth trapezoid-like shape transitioning from * the height of the current norm to the next norm. */ function hSegmentPath( normStart: number, normEnd: number, segW: number, H: number, layerScale: number, straight = false ) { const my = H / 2; const h0 = normStart * H * 0.44 * layerScale; const h1 = normEnd * H * 0.44 * layerScale; if (straight) { return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`; } const cx = segW * 0.55; const top = `M 0 ${my - h0} C ${cx} ${my - h0}, ${segW - cx} ${my - h1}, ${segW} ${my - h1}`; const bot = `L ${segW} ${my + h1} C ${segW - cx} ${my + h1}, ${cx} ${my + h0}, 0 ${my + h0}`; return `${top} ${bot} Z`; } function vSegmentPath( normStart: number, normEnd: number, segH: number, W: number, layerScale: number, straight = false ) { const mx = W / 2; const w0 = normStart * W * 0.44 * layerScale; const w1 = normEnd * W * 0.44 * layerScale; if (straight) { return `M ${mx - w0} 0 L ${mx - w1} ${segH} L ${mx + w1} ${segH} L ${mx + w0} 0 Z`; } const cy = segH * 0.55; const left = `M ${mx - w0} 0 C ${mx - w0} ${cy}, ${mx - w1} ${segH - cy}, ${mx - w1} ${segH}`; const right = `L ${mx + w1} ${segH} C ${mx + w1} ${segH - cy}, ${mx + w0} ${cy}, ${mx + w0} 0`; return `${left} ${right} Z`; } // ─── Animated Segment ─────────────────────────────────────────────── function HRing({ d, color, fill, opacity, hovered, ringIndex, totalRings, }: { d: string; color: string; fill?: string; opacity: number; hovered: boolean; ringIndex: number; totalRings: number; }) { const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12; return ( ); } function HSegment({ index, normStart, normEnd, segW, fullH, color, layers, staggerDelay, enterTransition, hovered, dimmed, renderPattern, straight, gradientStops, }: { index: number; normStart: number; normEnd: number; segW: number; fullH: number; color: string; layers: number; staggerDelay: number; enterTransition?: Transition; hovered: boolean; dimmed: boolean; renderPattern?: (id: string, color: string) => ReactNode; straight: boolean; gradientStops?: FunnelGradientStop[]; }) { const patternId = `funnel-h-pattern-${index}`; const gradientId = `funnel-h-grad-${index}`; const mountProgress = useMountProgress( enterTransition, index * staggerDelay, index ); const enterComplete = useEnterComplete(mountProgress); const entranceScaleX = useTransform(mountProgress, [0, 1], [0, 1]); const entranceScaleY = useTransform(mountProgress, [0, 1], [0, 1]); const rings = Array.from({ length: layers }, (_, l) => { const scale = 1 - (l / layers) * 0.35; const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65; return { d: hSegmentPath(normStart, normEnd, segW, fullH, scale, straight), opacity, }; }); return ( {enterComplete ? (

) : ( )} ); } function VRing({ d, color, fill, opacity, hovered, ringIndex, totalRings, }: { d: string; color: string; fill?: string; opacity: number; hovered: boolean; ringIndex: number; totalRings: number; }) { const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12; return ( ); } function VSegment({ index, normStart, normEnd, segH, fullW, color, layers, staggerDelay, enterTransition, hovered, dimmed, renderPattern, straight, gradientStops, }: { index: number; normStart: number; normEnd: number; segH: number; fullW: number; color: string; layers: number; staggerDelay: number; enterTransition?: Transition; hovered: boolean; dimmed: boolean; renderPattern?: (id: string, color: string) => ReactNode; straight: boolean; gradientStops?: FunnelGradientStop[]; }) { const patternId = `funnel-v-pattern-${index}`; const gradientId = `funnel-v-grad-${index}`; const mountProgress = useMountProgress( enterTransition, index * staggerDelay, index ); const enterComplete = useEnterComplete(mountProgress); const entranceScaleY = useTransform(mountProgress, [0, 1], [0, 1]); const entranceScaleX = useTransform(mountProgress, [0, 1], [0, 1]); const rings = Array.from({ length: layers }, (_, l) => { const scale = 1 - (l / layers) * 0.35; const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65; return { d: vSegmentPath(normStart, normEnd, segH, fullW, scale, straight), opacity, }; }); return ( {enterComplete ? (

) : ( )} ); } // ─── Label overlay ────────────────────────────────────────────────── function SegmentLabel({ stage, pct, isHorizontal, showValues, showPercentage, showLabels, formatPercentage, formatValue, index, staggerDelay, layout = "spread", orientation, align = "center", }: { stage: FunnelStage; pct: number; isHorizontal: boolean; showValues: boolean; showPercentage: boolean; showLabels: boolean; formatPercentage: (p: number) => string; formatValue: (v: number) => string; index: number; staggerDelay: number; layout?: "spread" | "grouped"; orientation?: "vertical" | "horizontal"; align?: "center" | "start" | "end"; }) { const display = stage.displayValue ?? formatValue(stage.value); const valueEl = showValues && ( {display} ); const pctEl = showPercentage && ( {formatPercentage(pct)} ); const labelEl = showLabels && ( {stage.label} ); // ── Spread layout (default): items pushed to edges with center element ── if (layout === "spread") { return ( {isHorizontal ? ( <>

{valueEl}

{pctEl}

{labelEl}

) : ( <>

{valueEl}

{pctEl}

{labelEl}

)} ); } // ── Grouped layout: items stacked tightly together ── const resolvedOrientation = orientation ?? (isHorizontal ? "vertical" : "horizontal"); const isVerticalStack = resolvedOrientation === "vertical"; // Map align to flexbox alignment on the cross axes const justifyMap = { start: "justify-start", center: "justify-center", end: "justify-end", } as const; const itemsMap = { start: "items-start", center: "items-center", end: "items-end", } as const; // The outer container uses the chart orientation to position the group, // and the inner group uses the label orientation for stacking. return (

{valueEl} {pctEl} {labelEl}

); } // ─── Main Component ───────────────────────────────────────────────── export function FunnelChart({ data, orientation = "horizontal", color = "var(--chart-1)", layers = 3, className, style, showPercentage = true, showValues = true, showLabels = true, hoveredIndex: hoveredIndexProp, onHoverChange, formatPercentage = fmtPct, formatValue = fmtVal, staggerDelay = 0.12, enterTransition, gap = 4, renderPattern, edges = "curved", labelLayout = "spread", labelOrientation, labelAlign = "center", grid: gridProp = false, }: FunnelChartProps) { const ref = useRef(null); const [sz, setSz] = useState({ w: 0, h: 0 }); const [internalHoveredIndex, setInternalHoveredIndex] = useState< number | null >(null); const isControlled = hoveredIndexProp !== undefined; const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex; const setHoveredIndex = useCallback( (index: number | null) => { if (isControlled) { onHoverChange?.(index); } else { setInternalHoveredIndex(index); } }, [isControlled, onHoverChange] ); const measure = useCallback(() => { if (!ref.current) { return; } const { width: w, height: h } = ref.current.getBoundingClientRect(); if (w > 0 && h > 0) { setSz({ w, h }); } }, []); useEffect(() => { measure(); const ro = new ResizeObserver(measure); if (ref.current) { ro.observe(ref.current); } return () => ro.disconnect(); }, [measure]); if (!data.length) { return null; } const first = data[0]; if (!first) { return null; } const max = first.value; const n = data.length; const norms = data.map((d) => d.value / max); const horiz = orientation === "horizontal"; const { w: W, h: H } = sz; const totalGap = gap * (n - 1); const segW = (W - (horiz ? totalGap : 0)) / n; const segH = (H - (horiz ? 0 : totalGap)) / n; // Resolve grid config const gridEnabled = gridProp !== false; const gridCfg = typeof gridProp === "object" ? gridProp : {}; const showBands = gridEnabled && (gridCfg.bands ?? true); const bandColor = gridCfg.bandColor ?? "var(--color-muted)"; const showGridLines = gridEnabled && (gridCfg.lines ?? true); const gridLineColor = gridCfg.lineColor ?? "var(--chart-grid)"; const gridLineOpacity = gridCfg.lineOpacity ?? 1; const gridLineWidth = gridCfg.lineWidth ?? 1; return (

{W > 0 && H > 0 && ( <> {/* Grid layer: background bands + grid lines */} {gridEnabled && ( )} {/* Segments container — overflow-visible so hover scale is not clipped */}

{data.map((stage, i) => { const normStart = norms[i] ?? 0; const normEnd = norms[Math.min(i + 1, n - 1)] ?? 0; const firstStop = stage.gradient?.[0]; const segColor = firstStop ? firstStop.color : (stage.color ?? color); return horiz ? ( ) : ( ); })}

{/* Grid lines — rendered above segments so they're visible */} {gridEnabled && showGridLines && ( )} {/* Label overlays — one per segment, positioned over each segment cell. These are the hover triggers for each segment. */} {data.map((stage, i) => { const pct = (stage.value / max) * 100; const posStyle: CSSProperties = horiz ? { left: (segW + gap) * i, width: segW, top: 0, height: H, } : { top: (segH + gap) * i, height: segH, left: 0, width: W, }; const isDimmed = hoveredIndex !== null && hoveredIndex !== i; return ( setHoveredIndex(i)} onMouseLeave={() => setHoveredIndex(null)} style={{ ...posStyle, zIndex: 20 }} transition={{ type: "spring", stiffness: 300, damping: 24 }} > ); })} )}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@bklit","registryDependencies":["@bklit/chart-animation","@bklit/utils","@bklit/chart-utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/charts/funnel-chart.tsx","content":"$50","type":"registry:component","target":"components/charts/funnel-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]