Data visualization
Use these shared tokens and data rules for charts and operational views.
Three color roles
| Role | Tokens | Meaning |
|---|---|---|
| Series identity | --oprt-cat-1 through --oprt-cat-8 | Distinguishes datasets; never implies severity |
| Ordered magnitude | --oprt-data-seq-1 through --oprt-data-seq-5 | Increasing lightness for increasing values |
| Reference threshold | --oprt-chart-threshold | A labeled, application-supplied reference |
Keep series identity stable when reordered or hidden. Pair color with labels, patterns, markers, and exact values. Heatmaps need a scale and accessible data view; shades alone cannot convey exact values. Use operational affiliation tokens for affiliation.
Axis labels use --oprt-chart-axis, which is --oprt-text-dim; decorative grids use
--oprt-chart-grid, which is --oprt-border-strong. --oprt-chart-stroke-width sets 1.5px
chart/sparkline strokes; --oprt-chart-guide-width sets 1px grids and references. Area fills use
--oprt-chart-area-opacity (0.08) and bar fills --oprt-chart-bar-opacity (0.16);
contrast-qualified outlines carry the measurement. Keep segments
straight, corners crisp, and markers sparse. Never smooth peaks or bridge missing samples.
Typography and density
Use OPERATOR Sans for titles, controls, and labels; OPERATOR Mono for aligned values, units, timestamps, and IDs. Uppercase component titles and actions; preserve authored case in source names and prose.
Density changes spacing while preserving data meaning, keyboard access, and legible labels. Pair compact sparklines with a named measurement and inspection path.
Data integrity
- Zero is a measurement. Missing is an absence of measurement.
- Null or invalid samples break a line; they do not become zero or join neighboring samples.
- Units and timezone are visible. Do not put unrelated units on an unlabeled shared axis.
- A threshold is supplied by the application, with its meaning stated in its label.
- A fixed snapshot is described as a snapshot. A running animation does not establish a live source.
- Freshness and source quality come from the data contract, not from chart color.
Inspection and observation windows
Line, area, and bar charts share a fixed readout and crosshair. Inspection selects an authored x coordinate and reports each series at that coordinate; it never fills a reporting gap with a nearby measurement. Hover is temporary; click, tap, or keyboard navigation retains the selection. Escape clears it.
The optional overview keeps the complete history visible while start/end handles select an inclusive window. Share the numeric range with time controls and linked views. Exact-value tables retain the complete supplied dataset. Legend emphasis uses the state duration and respects reduced motion; dragging and inspection are immediate. Patterned fills are optional, with colored outlines carrying identity.
The shared inspection, patterned fills, and overview draw inspiration from Evil Charts, adapted to OPERATOR's typography, geometry, accessibility, and data-integrity contracts.
Reuse across layers
Chart and Sparkline render OPERATOR SVG. The facility monitoring console adds time controls, selection, and inspection. Patterns accept application data and callbacks; applications own transport, authorization, retention, and authoritative outcomes.