Bar chart
Weekly agent runs, split by outcome, with a range switch.
A bar chart plots a value per bar, with a readout on hover that breaks each one down by series and
a switch between ranges. The bars grow in one after another a moment after the chart appears, then
redraw left to right on every switch while the total rolls to its new figure. Off by default each
bar is one block in the accent; set stacked to split every bar into its parts in the chart palette,
with a legend.
Usage
<!-- include core.css + bar-chart.css -->
<div class="dm-bcx dm-panel">
<div class="dm-bcx-h">
<div><span class="dm-muted">Agent runs</span><b class="dm-num dm-bcx-v">0</b></div>
<div class="dm-seg2 dm-bcx-rg" role="group" aria-label="Range">
<button aria-pressed="true">Week</button>
<button aria-pressed="false">Month</button>
</div>
</div>
<div class="dm-bcx-ch">
<div class="dm-bcx-b">
<div class="dm-bcx-tt"><b class="dm-num">53 runs</b><span>42 shipped, 9 reviewed, 2 failed</span></div>
<div class="dm-bcx-st"><i></i></div>
<div class="dm-bcx-l">Mon</div>
</div>
<!-- one .dm-bcx-b per bar -->
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
label | string | The name over the big number, like "Agent runs". |
series | BarChartSeries[] | What each part of a bar means, in order. The readout breaks each bar down by these. Each has a label, an optional tipLabel and, when stacked, an optional color. |
stacked | boolean | Draws each bar as a stack of its parts in the palette's colours, with a legend. Off by default: one bar in the accent, with the breakdown in the readout. |
ranges | BarChartRange[] | One set of bars per range. Each has a key, a label and bars: { label, values }[]. With more than one, a switch picks between them. |
range | string | Key of the range shown. Leave it out to let the switch change it. |
defaultRange | string | The range shown first when uncontrolled. Defaults to the first range. |
onRangeChange | (key: string) => void | Called with the new key when the switch changes. |
unit | string | What the values count, like "runs" in "66 runs". |
format | (n: number) => string | Writes a value. Defaults to whole numbers like 1,240. |
Each BarChartBar carries values: number[] — one per series, stacked from the bottom — so the
series order sets the order of the parts, the legend and the breakdown in the readout.
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The bars
use the chart palette (--dm-c1..c6: the accent, then violet, orange, green…) unless a series sets
its own color; the readout tooltip sits on the ink tone and the big number and labels read from the
foreground and muted tokens. In Soft the bars and tooltip are rounder.