Sparkline Scrub Cell
An inline micro-chart you sweep to read exact values, with monotone interpolation that never invents a peak.
DOM + CSS0 deps1 file · 6 KB TSX
Props
"use client";
import { useCallback, useMemo, useRef, useState } from "react";
const W = 220;
const H = 56;
/**
* xmur3-style integer hash into an xorshift walk: deterministic, so the server
* and the client render byte-identical markup. Math.random here is a hydration
* mismatch, not a cosmetic one.
*/
function series(seed: string, n: number): number[] {
let h = 2166136261 >>> 0;
for (let i = 0; i < seed.length; i++) {
h ^= seed.codePointAt(i)!;
h = Math.imul(h, 16777619) >>> 0;
}
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
Most sparklines are drawn either as raw polylines, which look harsh at small sizes, or with a generic smoothing spline, which looks better and is quietly wrong. Catmull-Rom and its relatives overshoot between samples, so a smoothed chart regularly renders a dip or a peak that does not exist in the underlying series — on a revenue figure or a latency graph that is a correctness bug wearing a nicer curve. This uses Fritsch–Carlson monotone cubic interpolation instead: tangents are forced to zero wherever the slope changes sign and clamped to three times the smaller adjacent slope elsewhere, which guarantees the curve stays inside the interval its own samples define. Two smaller details matter nearly as much. The stroke carries a non-scaling vector effect, without which a stretched viewBox turns an even line into a ribbon that is thick on the shallow segments and thin on the steep ones — the most common sparkline defect there is. And the scrub snaps to the nearest sample rather than to the path, because reading a value off the interpolation shows the user a number that was never measured.
Curator’s note
The monotone clamp is a correctness fix, not a styling one — smoothed sparklines routinely draw peaks that are not in the data.
