{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stat-counter","type":"registry:component","title":"Stat counter","description":"Numbers count up to their value; scrub a sparkline and the figure rolls back through its history.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/stat-counter.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { animate, motion, useInView, useMotionValue, useTransform } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Stat = {\n label: string;\n value: number;\n format: Intl.NumberFormat;\n /** Change against the previous period, as a fraction: 0.12 is +12%. */\n trend: number;\n /** Which direction is good news. Latency going up is not. */\n goodWhen?: \"up\" | \"down\";\n series: number[];\n};\n\n// Long enough to read as counting, which is the point of the component;\n// shorter and the number just blinks to its value. No bounce, so a figure\n// never overshoots to a value that isn't true.\nconst COUNT = { type: \"spring\", visualDuration: 0.7, bounce: 0 } as const;\n// Scrubbing the line glides between figures faster, so the number keeps up\n// with the finger, but still counts rather than blinking.\nconst SCRUB = { type: \"spring\", visualDuration: 0.3, bounce: 0 } as const;\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst SPARK_W = 120;\nconst SPARK_H = 32;\n// Cards wipe their sparklines in one after another, 50ms apart.\nconst STAGGER_MS = 50;\n\nconst trendFormat = new Intl.NumberFormat(\"en-US\", {\n style: \"percent\",\n maximumFractionDigits: 1,\n signDisplay: \"exceptZero\",\n});\n\nexport function StatCounter({\n stats,\n className,\n}: {\n stats: Stat[];\n className?: string;\n}) {\n const ref = useRef(null);\n const inView = useInView(ref, { once: true, amount: 0.5 });\n\n return (\n // Four across when there's room, two by two on a phone.\n
\n
\n {stats.map((stat, i) => (\n \n ))}\n
\n
\n );\n}\n\nfunction StatCard({ stat, started, index }: { stat: Stat; started: boolean; index: number }) {\n const reduceMotion = useReducedMotion();\n const value = useMotionValue(0);\n // Written straight to the DOM each frame; the card never re-renders\n // while counting.\n const text = useTransform(value, (v) => stat.format.format(v));\n // The point being inspected, or null for \"now\". Counted in whole points,\n // so moving along the line re-renders at most once per point.\n const [scrub, setScrub] = useState(null);\n const last = stat.series.length - 1;\n const shown = scrub === null ? stat.value : stat.series[scrub];\n\n useEffect(() => {\n if (!started) return;\n // Retargets from wherever the number is, so a refresh or a scrub\n // mid-count carries on smoothly from the old figure.\n const controls = animate(\n value,\n shown,\n reduceMotion ? { duration: 0 } : scrub === null ? COUNT : SCRUB,\n );\n return () => controls.stop();\n }, [started, shown, scrub, reduceMotion, value]);\n\n const up = stat.trend >= 0;\n const good = up === ((stat.goodWhen ?? \"up\") === \"up\");\n const trendText = trendFormat.format(stat.trend);\n const when = scrub === null ? null : ago(last - scrub);\n\n const pick = (e: React.PointerEvent) => {\n const box = e.currentTarget.getBoundingClientRect();\n const t = Math.min(Math.max((e.clientX - box.left) / box.width, 0), 1);\n setScrub(Math.round(t * last));\n };\n\n return (\n
\n
{stat.label}
\n
\n \n {stat.format.format(stat.value)}, {trendText}\n \n \n {text}\n \n {/* Trend and date share one cell and swap through a blur, so the chip\n never jumps in width mid-scrub. */}\n \n \n \n \n \n {/* Remounts when the figure changes, so it fades in from a soft\n blur rather than snapping. */}\n \n {trendText}\n \n \n \n {when ?? ago(0)}\n \n \n {\n if (e.pointerType === \"mouse\" || e.buttons) pick(e);\n }}\n onPointerDown={(e) => {\n // Touch scrubs by dragging along the line.\n e.currentTarget.setPointerCapture(e.pointerId);\n pick(e);\n }}\n onPointerLeave={(e) => {\n if (!e.currentTarget.hasPointerCapture(e.pointerId)) setScrub(null);\n }}\n onPointerUp={(e) => {\n if (e.pointerType !== \"mouse\") setScrub(null);\n }}\n onPointerCancel={() => setScrub(null)}\n onBlur={() => setScrub(null)}\n onKeyDown={(e) => {\n const current = scrub ?? last;\n const next =\n e.key === \"ArrowLeft\"\n ? current - 1\n : e.key === \"ArrowRight\"\n ? current + 1\n : e.key === \"Home\"\n ? 0\n : e.key === \"End\"\n ? last\n : e.key === \"Escape\"\n ? last\n : null;\n if (next === null) return;\n e.preventDefault();\n const clamped = Math.min(Math.max(next, 0), last);\n setScrub(clamped === last ? null : clamped);\n }}\n // A few px of padding widens the target without moving the line.\n className=\"-mx-1 -my-1 cursor-ew-resize touch-pan-y rounded-lg px-1 py-1 outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground\"\n >\n \n
\n \n \n );\n}\n\nfunction ago(days: number) {\n return days === 0 ? \"Today\" : days === 1 ? \"Yesterday\" : `${days} days ago`;\n}\n\nfunction points(series: number[]) {\n const min = Math.min(...series);\n const max = Math.max(...series);\n const span = max - min || 1;\n // 2px inset so the 1.5px line is never clipped at the extremes.\n return series.map((v, i) => ({\n x: (i / (series.length - 1)) * SPARK_W,\n y: 2 + (1 - (v - min) / span) * (SPARK_H - 4),\n }));\n}\n\nfunction pathFor(series: number[]) {\n return points(series)\n .map((p, i) => `${i ? \"L\" : \"M\"}${p.x.toFixed(1)} ${p.y.toFixed(1)}`)\n .join(\" \");\n}\n\nfunction Sparkline({\n series,\n started,\n delay,\n scrub,\n}: {\n series: number[];\n started: boolean;\n delay: number;\n scrub: number | null;\n}) {\n const reduceMotion = useReducedMotion();\n const d = pathFor(series);\n const pts = points(series);\n const at = scrub === null ? null : pts[scrub];\n // Past the inspected point the line is the future, so it fades back.\n const cut = scrub === null ? 0 : (1 - scrub / (series.length - 1)) * 100;\n const line = (\n \n );\n return (\n \n \n {line}\n \n {/* The same line again, clipped at the inspected point, so everything\n up to it stays at full strength. Clip-path rather than a second\n shorter path, so the two can never disagree about the shape. */}\n \n {line}\n \n {/* Left and top in percent, since the line stretches with the card and\n only percentages track it; a 150ms glide between neighbouring\n points on an element this small costs nothing noticeable. */}\n \n \n \n );\n}\n\nconst currency = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n maximumFractionDigits: 0,\n});\nconst count = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 0 });\nconst rate = new Intl.NumberFormat(\"en-US\", {\n style: \"percent\",\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n});\nconst ms = new Intl.NumberFormat(\"en-US\", {\n style: \"unit\",\n unit: \"millisecond\",\n unitDisplay: \"short\",\n maximumFractionDigits: 0,\n});\n\n// Seeded, so the server and the browser agree on the first render.\nfunction mulberry32(seed: number) {\n return () => {\n seed = (seed + 0x6d2b79f5) | 0;\n let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nconst METRICS = [\n { label: \"Revenue\", format: currency, base: 48210, swing: 0.08, goodWhen: \"up\" },\n { label: \"Users\", format: count, base: 12480, swing: 0.06, goodWhen: \"up\" },\n { label: \"Conversion\", format: rate, base: 0.0342, swing: 0.07, goodWhen: \"up\" },\n { label: \"Latency\", format: ms, base: 184, swing: 0.1, goodWhen: \"down\" },\n] as const;\nconst POINTS = 12;\n\n// A random walk per metric. Each refresh drops the oldest point and adds a\n// new one, so the line reads as time moving on rather than a new chart.\nfunction initialSeries() {\n const random = mulberry32(7);\n return METRICS.map((m) => {\n const out: number[] = [m.base];\n for (let i = 1; i < POINTS; i++) out.unshift(out[0] * (1 + (random() - 0.5) * m.swing));\n return out;\n });\n}\n\nfunction toStats(series: number[][]): Stat[] {\n return METRICS.map((m, i) => {\n const s = series[i];\n const value = s[s.length - 1];\n return {\n label: m.label,\n value,\n format: m.format,\n trend: value / s[s.length - 2] - 1,\n goodWhen: m.goodWhen,\n series: s,\n };\n });\n}\n\nexport default function StatCounterDemo() {\n const [series, setSeries] = useState(initialSeries);\n const [turns, setTurns] = useState(0);\n const random = useRef(mulberry32(99));\n\n const refresh = () => {\n setTurns((t) => t + 1);\n setSeries((all) =>\n all.map((s, i) => {\n const last = s[s.length - 1];\n return [...s.slice(1), last * (1 + (random.current() - 0.45) * METRICS[i].swing * 2)];\n }),\n );\n };\n\n return (\n
\n
\n
\n

Overview

\n

Compared with the previous day

\n
\n \n {/* Half a turn per press, so repeated presses keep spinning the\n same way instead of snapping back. */}\n \n \n \n \n Refresh\n \n
\n \n

\n {turns > 0 ? `Updated ${turns} ${turns === 1 ? \"time\" : \"times\"}` : \"\"}\n

\n
\n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["data"],"docs":"From ui lab: https://lab.xevrion.dev/lab/stat-counter"}