Bead Stat

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/bead-stat.tsx.

Install the pastetaste component "Bead Stat" (bead-stat) into this Next.js project and use it.

What it is: Analytics card with a figure strung from beads over a capsule of dots, one column per day. Drag or arrow along the strip to rewind the figure; beads slide along their strokes into each new number.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/bead-stat.json
   (it writes components/pastetaste/bead-stat.tsx; install any npm packages it reports).
2. Import it: import { BeadStat } from "@/components/pastetaste/bead-stat" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- title / subtitle: string = 'Sale of' / 'Currency' — Two-line heading: the first line in ink, the second in the muted tone.
- series: (number | null)[] = 42-day sample — One amount per period, oldest first. Each entry is one column of the strip; null marks periods still to come (grey).
- labels: string[] = 'Period n' — One label per period, used in the caption and the slider's spoken value while scrubbing, e.g. 'Oct 14'.
- value: number = sum of series — Figure at rest. When set, running totals while scrubbing are scaled to it.
- format: (n: number) => string = en-US integer — Writes the figure. Digits and , . : % + − $ € £ k M B and spaces are strung as beads; other characters become a space.
- caption: string = 'All Sales' — Caption left of the figure at rest.
- scrub: 'running' | 'period' | false = 'running' — While scrubbing show the running total up to the period, that period alone, or turn scrubbing off.
- scrubCaption: (label: string, index: number) => string = 'Through {label}' — Caption while scrubbing ('{label}' in period mode).
- palette: string[] = amber, gold, rose, lilac, blue — Spectrum for elapsed periods, oldest to newest; hex stops blend smoothly. Future periods use --pt-bs-track.
- rows: number = 10 — Rows of dots in the strip (3 to 16); the ends round off like a capsule.
- sizeByValue: boolean = true — Scale each column's dots by its amount (68% to 112%), so busy periods read as heavier columns.
- figure: string = '17cqw' — Cap height of the beaded figure, any CSS length; cqw scales with the card width.
- beadSpacing: number = 7.8 — Distance between beads in glyph units (cap height 100). Lower strings more, smaller-looking beads.
- pinnable / pinned / defaultPinned / onPinnedChange: boolean / boolean / boolean / (p: boolean) => void = true / – / false / – — Dotted pin button in the corner; controlled or uncontrolled. Pinning draws the ring closed and fills the bookmark.
- pinLabel: string = 'Pin to dashboard' — Accessible name of the pin button.
- stack: number = 0 — Sheets peeking out behind the top of the card (0 to 3), for a card that stands for a set.
- onScrub: (index: number | null) => void — Period index while scrubbing, null when the figure returns to rest; use it to sync other views.

Live preview: https://pastetaste.com/c/bead-stat
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 17