DataDotStrip
components/data/DotStrip.vue
Rows of readings as marks on one shared numeric axis: two or more readings per row stay visible, so nothing is averaged away. Shapes carry identity (dot, ring, diamond, square, keyed by the legend); an optional reference band, an outlined whole (track) and a dashed target; a tooltip per mark on hover and focus. From design c138's footprint page (layer v0.9.39).
The four states
two readings per state, both drawn
1. Lean
the default build
61.6 · 63.0
2. Full, not allowed
developer mode not allowed
77.4* · 61.0
3. Full, on
nothing opened
63.0*† · 61.5
4. Full, Components shown
a Dev page on screen
65.3 · 65.0
020406080
MB, physical footprint, from zero
a quiet reading * the window drew frames the quiet readings' spread target: under 80 MB
Scenarios
empty — no data rows: an em-dash
—minimal — one row, one reading
lean build
61.6
020406080
MB, from zero
typical — a whole (track), shapes keyed by the legend
window, at rest
two builds
0.005 · 0.005
the window drew frames
0.033
someone using the window
7
under a stream
1,000 a second
33.9
the stream core alone
another method
7.05
0255075100
% of one core, from zero to the whole core
one core at rest the window drew frames not at rest another method
overflow — long labels, many readings in a row, a reading past the domain
A group header whose note runs long enough to wrap onto a second line on a narrow screentwo days
Readings from many launches of one build, each its own mark, none averaged away.
a configuration with a very long name that cannot fit its column
and a sub line that is longer still, truncated with its full text in the title
52 · 55 · 58 · 61 · 61.5 · 62 · 63 · 64 · 70 · 80
past the domain
129
0255075100
MB, from zero; the axis ends at 100
components/data/DotStrip.vue
Usage
<DataDotStrip
:rows = "required"
:domain = "required"
:ticks = "[]"
unit = "—"
axisLabel = "—"
:band = "band"
:track = "false"
:target = "target"
:legend = "[]"
labelCol = "11rem"
valueCol = "9rem"
:tickFormat = "tickFormat"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | Array | required | Data rows { id?, label, sub?, strong?, values?, points } with points { v, text, shape?, note?, tip? }; or group header rows { header, when?, note? }. v places the mark; text is the value as recorded (61.0 stays 61.0); values is the row's own line for the values column; tip is the tooltip's last line and part of the accessible name. |
| domain | Array | required | [min, max] of the axis. Start at zero for magnitudes, so a small spread reads as small. A value outside pins to the end. |
| ticks | Array | [] | Values for the hairline gridlines and their labels. |
| unit | String | '' | After the value in the tooltip and the accessible name. |
| axisLabel | String | '' | A line under the tick labels: what the axis measures, and from where. |
| band | Object | null | { lo, hi }: a reference band (a spread, a range), primary at 15 % (30 % in dark). |
| track | Boolean | false | Draw the domain as an outlined track: the whole the readings sit in (one core). |
| target | Object | null | { v }: a target, drawn as a dashed line (a threshold; gridlines stay solid). |
| legend | Array | [] | [{ shape, label }] with shape dot · ring · diamond · square · band · track · target. Identity by shape, never colour alone. |
| labelCol | String | '11rem' | The label column on wide screens (any CSS length). Under 640 px the label and the values share a line above a full-width plot. |
| valueCol | String | '9rem' | The values column on wide screens (any CSS length). |
| tickFormat | Function | null | Formats a tick label; the default is String(t). |