Skip to main content

visualizations

TuxSparkline

Inline mini trend line. No axes, no legend, no tooltip — the point is "what's the shape of this metric over the last N periods?" alongside a TuxBigStat or TuxFactoid. Native SVG; no chart library.

For first-class native charts with axes / multiple series / confidence bands, see TuxChartLine in design/roadmap.md Priority B.

Interactive Telemetry Lab

Sparkline KPI & Trend Workbench

Presets:

Awarded · FY26

$84.2MTrend: 10 points, low 61 $M awarded, high 84 $M awarded, last 84 $M awarded (+35% from first).
Properties Inspector7 configurable knobs
Telemetry Seriesdataset
Semantic Tonetone
Show Delta BadgeshowDelta
true
Show Soft Area FillshowArea
true
Show Terminal DotshowLastPoint
true
Width (px)width
Height (px)height
Dynamic Component Syntax
<tux-sparkline
  :data="grants"
  :width="140"
  :height="36"
  show-area
  show-delta
  units="$M awarded"
/>

basic

Inline trend with delta

Awarded funding has trended up over ten quarters Trend: 10 points, low 61 $M awarded, high 84 $M awarded, last 84 $M awarded (+35% from first). driven by the IH-35 corridor renewal and the FHWA work-zone classifier grant. 

<tux-sparkline
  :data="grants"
  :width="120"
  :height="32"
  show-delta
  units="$M awarded"
/>

paired with a stat

KPI card composition

awarded · fy26

$84.2MTrend: 10 points, low 61, high 84, last 84 (+35% from first).

10-quarter trend

crash rate · ih-35

112Trend: 10 points, low 112, high 142, last 112 (-21% from first).

per 100M VMT · 10-q trend

ingest · telemetry

4.0Trend: 12 points, low 3.8, high 4.4, last 4 (-0.1 from first).

k events/sec · 12-h window

<div class="card-static p-4">
  <p class="eyebrow">awarded · fy26</p>
  <div class="flex items-end gap-3">
    <span class="text-3xl font-bold">$84.2M</span>
    <tux-sparkline
      :data="grants"
      :width="96"
      :height="28"
      tone="brand"
      show-area
      show-delta
    />
  </div>
</div>

tones

Five tones, all theme-aware

brand

Trend: 10 points, low 61, high 84, last 84 (+35% from first).

success

Trend: 10 points, low 61, high 84, last 84 (+35% from first).

error

Trend: 10 points, low 9, high 26, last 26 (+160% from first).

warning

Trend: 10 points, low 9, high 26, last 26 (+160% from first).

neutral

Trend: 12 points, low 3.8, high 4.4, last 4 (-2.4% from first).

accessibility

SR-only summary, auto-derived

The SVG carries a computed aria-label and matching <title> derived from the data: "Trend: 10 points, low 61, high 84, last 84 (+35.5% from first)". Pass units="$M awarded" to append a units suffix; pass aria-summary to override entirely.