{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sparkline-stats","type":"registry:component","title":"Sparkline Stats","description":"KPI cards with rolling numbers, an up/down delta badge and a sparkline that draws in, with a crosshair on hover or arrow keys.","author":"GetUrUI ","dependencies":["motion","lucide-react"],"registryDependencies":["@geturui/number-ticker"],"files":[{"path":"registry/geturui/charts/sparkline-stats.tsx","type":"registry:component","target":"components/charts/sparkline-stats.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useInView } from \"motion/react\";\nimport { TrendingDown, TrendingUp } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { NumberTicker } from \"@/components/ui/number-ticker\";\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (cb: () => void) => {\n const m = window.matchMedia(REDUCE);\n m.addEventListener(\"change\", cb);\n return () => m.removeEventListener(\"change\", cb);\n};\n/** Reduced-motion preference that is false on the server and during hydration, so the first render matches. */\nfunction useReducedMotionSafe() {\n return React.useSyncExternalStore(subscribeReduce, () => window.matchMedia(REDUCE).matches, () => false);\n}\n\nexport interface SparklineProps {\n data: number[];\n /** Labels for each point, shown under the crosshair. */\n labels?: string[];\n width?: number;\n height?: number;\n /** Stroke colour; any CSS colour. */\n color?: string;\n formatValue?: (n: number) => string;\n /** Accessible name for the sparkline. */\n label?: string;\n className?: string;\n}\n\n/** Sparkline that draws in, fills a soft gradient and shows a crosshair on hover or arrow keys. */\nexport function Sparkline({\n data,\n labels,\n width = 240,\n height = 56,\n color = \"var(--volt-ink)\",\n formatValue = (n) => n.toLocaleString(\"en-US\"),\n label = \"Trend\",\n className,\n}: SparklineProps) {\n const reduce = useReducedMotionSafe();\n const ref = React.useRef(null);\n const inView = useInView(ref, { once: true, margin: \"-20px\" });\n const [hover, setHover] = React.useState(null);\n const gid = React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n\n const pad = 4;\n const min = Math.min(...data);\n const max = Math.max(...data);\n const span = max - min || 1;\n const pts = data.map((v, i) => [\n pad + (i * (width - pad * 2)) / Math.max(1, data.length - 1),\n pad + (1 - (v - min) / span) * (height - pad * 2),\n ]);\n const line = pts.map(([x, y], i) => `${i ? \"L\" : \"M\"}${x.toFixed(2)},${y.toFixed(2)}`).join(\"\");\n const area = `${line}L${pts[pts.length - 1]?.[0] ?? 0},${height}L${pts[0]?.[0] ?? 0},${height}Z`;\n\n function onMove(e: React.PointerEvent) {\n const r = e.currentTarget.getBoundingClientRect();\n const x = ((e.clientX - r.left) / r.width) * width;\n const i = Math.round(((x - pad) / (width - pad * 2)) * (data.length - 1));\n setHover(Math.max(0, Math.min(data.length - 1, i)));\n }\n\n function onKey(e: React.KeyboardEvent) {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n setHover((h) => {\n const cur = h ?? data.length - 1;\n return Math.max(0, Math.min(data.length - 1, cur + (e.key === \"ArrowRight\" ? 1 : -1)));\n });\n } else if (e.key === \"Home\" || e.key === \"End\") {\n e.preventDefault();\n setHover(e.key === \"Home\" ? 0 : data.length - 1);\n } else if (e.key === \"Escape\") setHover(null);\n }\n\n const hp = hover !== null ? pts[hover] : null;\n\n return (\n
\n setHover(null)}\n onBlur={() => setHover(null)}\n onKeyDown={onKey}\n >\n \n \n \n \n \n \n \n \n {hp && (\n \n \n \n )}\n \n {hp && hover !== null && (\n <>\n \n 0.7 ? \"-translate-x-full\" : hp[0] / width < 0.3 ? \"\" : \"-translate-x-1/2\",\n )}\n style={{ left: `${(hp[0] / width) * 100}%` }}\n >\n {labels?.[hover] ? `${labels[hover]} ยท ` : \"\"}\n {formatValue(data[hover])}\n \n \n )}\n
\n );\n}\n\nexport interface StatItem {\n label: string;\n value: number;\n prefix?: string;\n suffix?: string;\n decimals?: number;\n /** Change vs. the previous period, in percent (12.4 = +12.4%). */\n delta: number;\n /** Lower is better (e.g. churn, latency): flips the delta colour. */\n invert?: boolean;\n data: number[];\n labels?: string[];\n /** Small caption under the value, e.g. \"vs. last 30 days\". */\n caption?: string;\n}\n\nexport interface StatCardProps extends StatItem {\n className?: string;\n}\n\n/** KPI card: rolling value, delta badge with icon and word, and a sparkline with a hover crosshair. */\nexport function StatCard({ label, value, prefix, suffix, decimals = 0, delta, invert, data, labels, caption, className }: StatCardProps) {\n const up = delta >= 0;\n const good = invert ? !up : up;\n const fmt = (n: number) =>\n `${prefix ?? \"\"}${n.toLocaleString(\"en-US\", { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}${suffix ?? \"\"}`;\n return (\n \n
\n

{label}

\n \n {up ? : }\n {up ? \"Up\" : \"Down\"} {Math.abs(delta).toFixed(1)}%\n \n
\n \n {caption &&

{caption}

}\n \n \n );\n}\n\nexport interface SparklineStatsProps {\n stats: StatItem[];\n className?: string;\n}\n\n/** Responsive grid of KPI cards with rolling numbers, delta badges and sparklines that draw in. */\nexport function SparklineStats({ stats, className }: SparklineStatsProps) {\n return (\n
\n {stats.map((s) => (\n \n ))}\n
\n );\n}\n"},{"path":"LICENSE-geturui.md","type":"registry:file","target":"LICENSE-geturui.md","content":"MIT License\n\nCopyright (c) 2026 geturui.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"}],"categories":["charts","chart","kpi","stats","sparkline","dashboard","metrics"],"meta":{"tier":"free","license":"MIT","docs":"https://geturui.com/docs/sparkline-stats"}}