Home: one sparkline style with a left fade, SI values, a full-width activity table, roomier panels
The trend curve was two components: a rich one in the node panel and on edges,
and a bare line in the flow table. It is one `Sparkline` now, taking the colour
token, the height and whether the live dot and the readout show. The flow table
draws its rollup in the chart ramp with no dot — the rollups are polled, so the
right edge is the last completed slice rather than this instant — and keeps its
"nothing yet" state, as the panel keeps its three distinct silences.
All of them fade out to the left, through an SVG mask over the curve and its
area. The dot sits outside the mask: the newest reading is the one thing that
must stay solid.
`si` replaces `compact` and the ad-hoc "k" the uPlot axis carried. It prefixes
k/M/G and m/µ, but only outside 0.01–1000, where the plain number is already
the shortest thing to read and a written unit ("0.4 ms") stays honest. The
sparkline readout asks for four digits, so two neighbouring readings never
collapse into one string. Exact counts and anything the user acts on — a
payload, a form field, the edge inspector's value — are left unrounded.
`src/lib/utils.check.ts` asserts the rounding cases.
The activity table now spans its card: the flow name anchors the left, the four
numbers read down their own centre, and the trend takes the slack on the right.
Panel rhythm steps up one notch, gap-5 to gap-6 outside and gap-2 to gap-3
within a section.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XC2jX6Hdj7pxGGKzBTrbqB
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* The cases `si` gets wrong when its rounding is written the obvious way.
|
||||
*
|
||||
* Run: `bun src/lib/utils.check.ts` (there is no unit runner; the suite in
|
||||
* `tests/` drives a running stack).
|
||||
*/
|
||||
import assert from "node:assert/strict"
|
||||
|
||||
import { si } from "./utils"
|
||||
|
||||
// Nothing is prefixed in the plain window: these are written with a unit after
|
||||
// them, and "400m ms" is not an improvement on "0.4 ms".
|
||||
assert.equal(si(0), "0")
|
||||
assert.equal(si(0.4), "0.4")
|
||||
assert.equal(si(203.63), "204")
|
||||
|
||||
// Rounding must not leave a value in the step it just rounded out of.
|
||||
assert.equal(si(999.7), "1k")
|
||||
assert.equal(si(15000), "15k")
|
||||
assert.equal(si(-2.5e6), "-2.5M")
|
||||
|
||||
// A small reading has to survive as itself; a series of these is not zeroes.
|
||||
assert.equal(si(0.0031, 4), "3.1m")
|
||||
assert.equal(si(0.000031), "31µ")
|
||||
assert.equal(si(1e-9), "1.0e-9")
|
||||
|
||||
// Two neighbouring readings stay apart at the sparkline readout's four digits.
|
||||
assert.notEqual(si(1234, 4), si(1235, 4))
|
||||
|
||||
assert.equal(si(Number.NaN), "--")
|
||||
|
||||
console.log("si: ok")
|
||||
Reference in New Issue
Block a user