Trend

<talos-trend> is a moving window over a value stream. The polyline is the recent history, so its slope is the rate of change — motion is the data advancing, not a transition. The line colour bands on the current value (nominal / warning / critical), reusing the same warn/crit threshold logic as gauge and meter: colour is the state. Push a sample with el.push(v) or set value and the window scrolls.

Default

<!-- data= seeds the window so a static trend draws a curve -->
<talos-trend data="30 34 28 40 38 46 42 50 44 52"></talos-trend>

With no warn/crit the line sits in the nominal band (green). data= is a declarative series (comma/space separated) that fills the window; the window holds points samples (default 48); the newest sits at the right edge with a dot, and the inline readout shows its rounded value. For live streams, call el.push(v) instead of seeding data.

Banded — warn & crit thresholds

<talos-trend data="20 28 24 …40"  warn="70" crit="90" unit="%"></talos-trend>
<talos-trend data="40 48 52 …78"  warn="70" crit="90" unit="%"></talos-trend>
<talos-trend data="60 66 72 …95"  warn="70" crit="90" unit="%"></talos-trend>

value >= warn trips warning (amber), value >= crit trips critical (red). The band is read off the current value, so the whole line and readout snap colour the instant the latest sample crosses — state never lags the data.

Inverted — low is bad

<talos-trend data="58 54 50 …18" warn="40" crit="20" invert></talos-trend>

invert flips the comparison: warning/critical trip as the value falls to/below the threshold. For signals where danger is a low reading — frame rate, battery, coolant reserve — so a dangerously low curve reads red.

Fill

<talos-trend data="40 46 52 …64" warn="70" crit="90" fill></talos-trend>

fill shades the area under the curve in the band colour at low opacity.

Labelled & sized

<talos-trend data="28 34 30 …74" warn="70" crit="90"
             label="Throughput" unit="%" width="380" height="80" fill></talos-trend>

label adds an uppercase HUD caption above the line; unit is appended to the readout. width/height size the SVG; points sets how many samples the window keeps (the data series above is well under it).

Live updates

Set value reactively (a MutationObserver appends each new value as a sample), or for streams call the imperative push() per frame:

const el = document.querySelector("talos-trend");
setInterval(() => el.push(60 + Math.random() * 30), 250);

Read the curve twice while a system runs and the shape differs — there is no entrance animation; the line simply reflects the buffer.

Attributes

Imperative API: el.push(value) appends a sample and scrolls the window — preferred for streams over the value attribute path.