DataRankedBars
components/data/RankedBars.vue
Ranked-share rows — the "Ranked share" DataMachine preset as a component: one compact UxPercentBar per row in one hue, each bar the item's share of the whole (not of the max), so the rows read as the concentration the provenance names.
claude-sonnet-4-5-2025092938 %
1.6K
gpt-5.5-codex15 %
640
gemini-2.5-pro-preview-06-059 %
380
Scenarios
empty — em-dash
—minimal — one row, 100 %
tomas-mba
1.6K
typical — inline, short host names
tomas-mba
1.6K
priya-x1
640
marcus-fw
380
typical — inline, labelWidth 'auto' (qdash bands)
wei
3.3M
elena
3M
omar
2.5M
typical — stacked, model ids
claude-sonnet-4-5-2025092938 %
1.6K
gpt-5.5-codex15 %
640
gemini-2.5-pro-preview-06-059 %
380
overflow — inline truncates a long label
/Users/priya/work/meridian/services/checkout-orchestrator
2.1K
/Users/tomas/src/platform
860
~/qpoint/design
310
overflow — labelWidth 'auto' caps the column at 45 %, then truncates
/Users/priya/work/meridian/services/checkout-orchestrator
2.1K
/Users/tomas/src/platform
860
~/qpoint/design
310
overflow — stacked keeps it whole
/Users/priya/work/meridian/services/checkout-orchestrator44 %
2.1K
/Users/tomas/src/platform18 %
860
~/qpoint/design6 %
310
people — mono off, display overrides the value
Priya Natarajan
$1,287
Tomas Lindqvist
$613
Marcus Feld
$288
marks + legend — coverage per harness (qdash Harnesses · Installs)
Claude Code
14
Codex CLI
10
ollama
3
windsurf
2
all monitoredhas shadow installs
valuePosition left — value column before the bar
tomas-mba
1.6K
priya-x1
640
marcus-fw
380
valuePosition right — value column after the bar
tomas-mba
1.6K
priya-x1
640
marcus-fw
380
thin — half-height bars, value right (qdash Harnesses)
Claude Code
14
Codex CLI
10
ollama
3
windsurf
2
all monitoredhas shadow installs
micro — top row only, label · share over a 3 px meter (DataMachineMicro)
claude-sonnet-4-5-2025092938 %
micro bare — top 3 as hairlines, labels in the tooltips
in a DataMachine #right slot — the Ranked share preset
Spend
Past 7 days, across the models below
$
4.2k
claude-sonnet-4-5-2025092938 %
1.6K
gpt-5.5-codex15 %
640
gemini-2.5-pro-preview-06-059 %
380
top 3 = 62 % of spend
components/data/RankedBars.vue
Usage
<DataRankedBars
:rows = "required"
:width = "100%"
:fill = "false"
:labelWidth = "84"
:mono = "true"
:layout = "inline"
:scale = "whole"
:legend = "[]"
:valuePosition = "inside"
:thin = "false"
:micro = "false"
:bare = "false"
microLabels = "over"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | Array | required | Ranked rows — each { label, value, pct, display?, mark?, title? }. pct is the share of the whole (0–100), computed by the consumer's rollup (qdash lib/actor-bands.shareOf); display overrides the compact-formatted value shown in the bar. mark is a color token (or raw CSS) for a status dot — between label and bar inline, before the label stacked; the dot column only appears when some row has one. title replaces the "label: N% of the whole" tooltip (use it when pct is a count scaled to the max, not a share). Empty → an em-dash. |
| 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) |
| fill | Boolean | false | Legacy — the same as width '100%' (now the default). Kept so older call sites keep working. |
| labelWidth | Number | 'auto' | 84 | Label column width in px; inline layout only. 'auto': one grid shared by every row, the label column as wide as the longest label (capped at 45 %, then truncating) and the bars take the rest — the qdash band default since 2026-10-02. |
| mono | Boolean | true | Labels in the mono face (ids). Pass false for people and team names. |
| layout | 'inline' | 'stacked' | 'inline' | inline: label in a fixed column beside the bar (long labels truncate). stacked: label on its own line above a full-width bar with the share at the right end in text tokens — nothing truncates. |
| scale | 'whole' | 'max' | 'whole' | whole: each bar is its share of the whole, so lengths match the 'top 3 = N %' provenance. max: the top row fills the bar and the rest scale to it — for reading the gaps between ranks. The stacked % label stays the share of the whole. |
| legend | Array | [] | Keys the row marks — [{ title, color }], drawn as a swatch row under the bars (same treatment as DataSegmentBar's legend). A mark color needs one. |
| valuePosition | 'inside' | 'left' | 'right' | 'inside' | Where each row's value sits: inside overlays the start of the bar (inverted over the solid fill); left / right give it its own column before / after the bar. |
| thin | Boolean | false | Half-height bars (6 px, centered on the value) for a lighter list. Needs valuePosition left or right — ignored inside, where the value needs the full bar behind it. |
| micro | Boolean | false | The DataMachineMicro form (c109): each row one line — label · share — over a 3 px meter (share of the whole on a hairline track). Pass the top row only: at micro size the problem is selection, not labelling. With `bare`, the top 3 as hairlines — the form the c109 index uses (Mark 2026-10-02). Overrides layout. |
| bare | Boolean | false | With micro: drop the text line — hairline bars only, label and share in each row's tooltip (pass the top 3 for the shape of the concentration). |
| microLabels | String | 'over' | With micro (not bare): 'over' — label · share on a line above each meter; 'beside' — the top 3 meters each with a 10 px Inter bold name to its left (label column up to 45 %, mono ignored). The c109 index roll downs use 'beside'. |