Spark

<talos-spark> is a compact inline sparkline — the small sibling of <talos-trend>. Position and slope carry the shape; the stroke takes the band colour of the current (last) value, so a glance reads the state without a legend. Set the series with the points attribute, or stream samples with el.push(value).

Default

<talos-spark points="20 28 24 40 38 52 60 66 72 80"></talos-spark>

points is a comma/space-separated list, scaled to the [min,max] domain (default 0–100). A frozen frame still shows the shape — there is no animation to lose. The host is inline-block; size it with --talos-spark-w / --talos-spark-h (default 100% × 16px).

Bands — warn & crit on the current value

<!-- last value 72 ≥ warn 60 → warning -->
<talos-spark points="10 18 22 30 44 58 72" warn="60" crit="80"></talos-spark>
<!-- last value 92 ≥ crit 80 → critical -->
<talos-spark points="10 18 30 50 72 86 92" warn="60" crit="80"></talos-spark>

The band is computed from the last sample only. It crosses to warning at warn and critical at crit — --talos-success / --talos-warning / --talos-danger respectively. Absent thresholds never trip.

Invert — low = bad

<!-- last value 18 ≤ crit 20 → critical -->
<talos-spark points="90 84 70 55 40 28 18" warn="40" crit="20" invert></talos-spark>

With invert, the comparison flips: warning/critical trip when the current value falls to/below the threshold. Use it for frame rate, battery, signal — signals where danger is a value falling.

Fill

<talos-spark points="20 28 24 40 38 52 60 66 72 80" fill></talos-spark>

fill paints the area under the line in the stroke colour at 0.1 opacity — denser presence in a stat cell without changing the read.

Live stream

const el = document.querySelector("talos-spark");
el.push(74); // append a sample; the oldest is dropped once past `cap` (default 32)

push(value) is the streaming entry point: it appends a sample, trims the buffer to cap, and re-renders on the next frame. The band recomputes from the new last value each push.

Attributes

Imperative API: el.push(value) — preferred for live streams over re-setting points. Needs at least two samples to draw.