52: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"] 53:T361a,"use client" import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react" import { cn } from "@/lib/utils" /* ═══════════════════════════════════════════════════════════════════════ * AnalyticsLineChart * Vercel-style gradient line chart with floating tooltip cards. * * Props: * data — { date: string, label: string, value: number }[] * gradientStops — { offset: string, color: string }[] * dotColors — string[] (per-index overrides) * gridLines — number (default 5) * height — number (viewBox height, default 280) * pinnedIndices — number[] (always-visible tooltip indices) * valueLabel — string (unit shown in tooltip, default "clicks") * ═══════════════════════════════════════════════════════════════════════ */ export interface AnalyticsDataPoint { date: string label: string value: number } export interface AnalyticsGradientStop { offset: string color: string } export const DEFAULT_DATA: AnalyticsDataPoint[] = [ { date: "2023-09-10", label: "buy-it-now", value: 8420 }, { date: "2023-10-15", label: "buy-it-now", value: 12_891 }, { date: "2023-12-10", label: "buy-it-now", value: 21_291 }, { date: "2024-01-20", label: "buy-it-now", value: 28_530 }, { date: "2024-02-15", label: "buy-it-now", value: 30_102 }, { date: "2024-03-10", label: "buy-it-now", value: 33_847 }, { date: "2024-04-10", label: "buy-it-now", value: 40_171 }, ] export const DEFAULT_GRADIENT: AnalyticsGradientStop[] = [ { offset: "0%", color: "#FF975C" }, { offset: "33%", color: "#E9EB4E" }, { offset: "66%", color: "#9AE13E" }, { offset: "100%", color: "#35C442" }, ] export const PALETTE = [ "#FF975C", "#EDBE4D", "#CBE749", "#A8E040", "#7DD83C", "#5CCC41", "#35C442", ] export function dotColor(i: number, n: number, overrides?: string[]) { if (overrides?.[i]) { return overrides[i] } const t = n <= 1 ? 1 : i / (n - 1) return PALETTE[ Math.min(Math.round(t * (PALETTE.length - 1)), PALETTE.length - 1) ] } export function fmtDate(s: string) { return new Date(`${s}T00:00:00`).toLocaleDateString("en-US", { weekday: "short", day: "numeric", month: "short", year: "numeric", }) } export function fmtNum(n: number) { return n.toLocaleString("en-US") } /* ── Easing ── */ export const EASE_OUT = "cubic-bezier(0.23,1,0.32,1)" /* ── Tooltip ────────────────────────────────────────────────────────── */ export interface AnalyticsTooltipPoint extends AnalyticsDataPoint { x: number y: number formattedDate: string color: string } export interface AnalyticsTooltipProps { point: AnalyticsTooltipPoint color: string px: number py: number side: "top" | "bottom" valueLabel: string show: boolean /** When true, stacks above pinned/static tooltip cards */ isHovered?: boolean } export function AnalyticsTooltip({ point, color, px, py, side, valueLabel, show, isHovered = false, }: AnalyticsTooltipProps) { const isTop = side === "top" // card sits ABOVE the point const circR = 11 // connector circle outer radius const gap = 4 // space between circle edge and card // Anchor wrapper is centered exactly on the data point. // Everything else is positioned relative to this anchor. return (

{/* Connector circle — sits right on the data point (center of wrapper) */} {/* Card — positioned absolutely above or below the circle */}

{point.formattedDate}

{point.label} {fmtNum(point.value)} {valueLabel}

) } /* ── Chart ───────────────────────────────────────────────────────────── */ export interface AnalyticsLineChartProps { data?: AnalyticsDataPoint[] gradientStops?: AnalyticsGradientStop[] dotColors?: string[] gridLines?: number height?: number pinnedIndices?: number[] valueLabel?: string className?: string } export function AnalyticsLineChart({ data = DEFAULT_DATA, gradientStops = DEFAULT_GRADIENT, dotColors, gridLines = 5, height = 280, pinnedIndices, valueLabel = "clicks", className, }: AnalyticsLineChartProps) { const wrapRef = useRef(null) const svgRef = useRef(null) const [hovered, setHovered] = useState(null) const [mounted, setMounted] = useState(false) const [wrapRect, setWrapRect] = useState({ w: 600, h: 280 }) const VB_W = 600 const VB_H = height const pad = useMemo(() => ({ t: 48, r: 48, b: 36, l: 48 }), []) const iW = VB_W - pad.l - pad.r const iH = VB_H - pad.t - pad.b useEffect(() => { const id = requestAnimationFrame(() => setMounted(true)) return () => { cancelAnimationFrame(id) setMounted(false) } }, []) useEffect(() => { const el = wrapRef.current if (!el) { return } const ro = new ResizeObserver((entries) => { const r = entries[0].contentRect setWrapRect({ w: r.width, h: r.height }) }) ro.observe(el) return () => ro.disconnect() }, []) const points = useMemo(() => { const vs = data.map((d) => d.value) const mn = Math.min(...vs), mx = Math.max(...vs), rng = mx - mn || 1 return data.map((d, i) => ({ ...d, x: pad.l + (i / Math.max(data.length - 1, 1)) * iW, y: pad.t + iH - ((d.value - mn) / rng) * iH, formattedDate: fmtDate(d.date), color: dotColor(i, data.length, dotColors), })) }, [data, iW, iH, pad, dotColors]) const pathD = useMemo( () => points .map((p, i) => `${i ? "L" : "M"}${p.x.toFixed(1)},${p.y.toFixed(1)}`) .join(" "), [points] ) const pathLen = useMemo(() => { let l = 0 for (let i = 1; i < points.length; i++) { const dx = points[i].x - points[i - 1].x, dy = points[i].y - points[i - 1].y l += Math.sqrt(dx * dx + dy * dy) } return Math.ceil(l) }, [points]) const pinned = useMemo(() => { if (pinnedIndices) { return pinnedIndices } if (points.length >= 3) { return [2, points.length - 1] } return points.length === 2 ? [0, 1] : [0] }, [pinnedIndices, points.length]) const onMove = useCallback( (e: React.MouseEvent) => { const svg = svgRef.current if (!svg) { return } const r = svg.getBoundingClientRect() const mx = ((e.clientX - r.left) / r.width) * VB_W let ci = 0, md = Number.POSITIVE_INFINITY points.forEach((p, i) => { const d = Math.abs(p.x - mx) if (d < md) { md = d ci = i } }) setHovered(md < 48 ? ci : null) }, [points] ) const active = useMemo(() => { const s = new Set(pinned) if (hovered !== null) { s.add(hovered) } return s }, [pinned, hovered]) const sx = wrapRect.w / VB_W const gradId = `g-${useId().replaceAll(":", "")}` return (

{/* Tooltip layer */} {points.map((p, i) => ( ))}

) } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/ui/analytics-chart.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]