DataSegmentBar
components/data/SegmentBar.vue
Horizontal 100 % bar of named segments — values in (the component normalizes), a 2 px surface gap between fills, per-segment hover title, and a legend of title + value in text tokens.
1.3Kbuiltin
412mcp
96skill
Scenarios
empty — hairline track
minimal — 2 parts, status roles
33monitored
6shadow
typical — 3 identity parts, categorical slots, legend below
1.3Kbuiltin
412mcp
96skill
overflow — 8 parts fold into “Other” past three
800model 1
710model 2
620model 3
1.8KOther
ordinal — heavy · moderate · light · none, one hue stepped
3heavy
5moderate
9light
4none
a zero part — in the legend, not in the bar
0running
48completed
4failed
outline — presence: active · idle · stopped
5active
12idle
19stopped
legend beside
1.3Kbuiltin
412mcp
96skill
legend none — per-row bars with one shared key
Claude Code14
Cursor9
Codex CLI6
Windsurf4
monitoredshadow
in a DataMachine #right slot
Machines
Hosts the sensor has seen
14
9fully monitored
3partial
2unmonitored
9 fully monitored · 3 partial · 2 unmonitored
components/data/SegmentBar.vue
Usage
<DataSegmentBar
:items = "required"
:width = "100%"
:height = "16"
:gap = "2"
:legend = "below"
:ordinal = "false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Array | required | Segments — each { title, value, color?, display? }. value is the raw number (not a percent); color is a token role, a CSS color, or "outline" (bordered empty segment); display overrides the compact-formatted value in the legend. No colors → the three categorical slots (black · slate · grey in light, inverted in dark — design c92 2026-09-24), and a 4th+ uncolored segment folds into "Other" (light grey). |
| width | Number | String | '100%' | Any CSS length, or a number for px. Default fills whatever it is placed in (e.g. DataMachine #right stretches to the card edge) |
| height | Number | 16 | Bar height in px |
| gap | Number | 2 | Surface gap between touching fills in px (the marks spec — no strokes around segments) |
| legend | 'below' | 'beside' | 'none' | 'below' | Legend placement. Two or more series always need one; pass "none" only when the composition owns a shared key (a stack of per-row bars). |
| ordinal | Boolean | false | Ordered scale — one grape hue stepped light → dark by index (validated ramp per mode) instead of the categorical slots |