4f: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"] 50: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"] 51:Tfbd,"use client"; import { useMemo, useState } from "react"; import { DemoFrame } from "../lib/demo-frame"; import { NumberRoll } from "../number-roll/number-roll"; import { Segmented } from "../segmented/segmented"; import { chartColor } from "../_primitives/chart-core/tokens"; import { Sparkline } from "./sparkline"; type Range = "7d" | "30d" | "90d"; const DAYS: Record = { "7d": 7, "30d": 30, "90d": 90 }; const RANGES = [ { value: "7d", label: "7D" }, { value: "30d", label: "30D" }, { value: "90d", label: "90D" }, ] as const; // A seeded random walk, so the demo is the same on every load. function walk(seed: number, count: number, start: number, drift: number, noise: number) { let s = seed; const rand = () => ((s = (s * 1664525 + 1013904223) % 4294967296) / 4294967296); const out: number[] = []; let v = start; for (let i = 0; i < 90; i++) { v = Math.max(start * 0.3, v * (1 + drift + (rand() - 0.5) * noise)); out.push(v); } return out.slice(90 - count); } const METRICS = [ { name: "Signups", seed: 7, start: 410, drift: 0.006, noise: 0.16, fmt: { maximumFractionDigits: 0 } }, { name: "Activation", seed: 21, start: 38, drift: 0.001, noise: 0.05, fmt: { maximumFractionDigits: 1 }, unit: "%" }, { name: "Churned", seed: 5, start: 31, drift: -0.003, noise: 0.22, fmt: { maximumFractionDigits: 0 } }, { name: "p95 latency", seed: 13, start: 182, drift: 0.002, noise: 0.08, fmt: { maximumFractionDigits: 0 }, unit: " ms" }, ] as const; const day = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }); const TODAY = new Date(2026, 9, 17); const dateOf = (i: number, n: number) => day.format(new Date(TODAY.getTime() - (n - 1 - i) * 86_400_000)); export function SparklineDemo() { const [range, setRange] = useState("30d"); const n = DAYS[range]; const visitors = useMemo(() => walk(3, n, 2_400, 0.004, 0.12), [n]); const rows = useMemo(() => METRICS.map((m) => ({ ...m, values: walk(m.seed, n, m.start, m.drift, m.noise) })), [n]); const int = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }); return ( }>

Daily active users

int.format(v)} formatIndex={(i) => dateOf(i, n)} />

{m.name} {"unit" in m ? m.unit : ""}

); } 4e:["$","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":[null,["$","$L4f",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/sparkline.json","https://eased.dev/r/eased-demo-frame.json","https://eased.dev/r/segmented.json","https://eased.dev/r/number-roll.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/eased/sparkline/sparkline-demo.tsx","content":"$51","type":"registry:example","target":"@components/eased/sparkline/sparkline-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]