Distribution
Distribution
What a total is made of, in one line. Where a progress bar says how far one value has got, this says how a whole divides: the parts hold the order they are given, so a pipeline reads from left to right like the pipeline it is. The states are named with the vocabulary the capsule and the circle already speak, so one state never takes two colours.
A whole, in parts
The parts grow in proportion to what they are worth, and the legend says them in words underneath — the same capsule a table draws a state with, so the eye moves between the two without learning anything new.
Pages of the catalogue1109
Done267
Running41
To do607
Failed12
Not started182
Parts that lead somewhere
A part with a target is a link: the bar becomes the way into the list it summarises. Under the pointer it takes a film of light rather than another colour, which would say a different state.
Without the legend
Where the parts are named just beside, or where the bar only has to say the shape of the thing, the legend is dropped and each part says what it is under the pointer.
A total larger than its parts
What the total counts and no part accounts for holds its share of the row and draws nothing: the track shows through for exactly that much, instead of the parts stretching to fill a bar they do not fill.
Files read400
Done120
Failed30
Nothing counted yet
No total and no part — work not started, a tally still out. The bar keeps its place, as a bare track — the same ground a total larger than its parts shows through — so a row of them keeps its shape; its figure is a dash, since nothing counted is not zero.
Files read—
Compact
A thinner bar for a row or a card footer, with the density passed on to the capsules of its legend.
symfony-design-system51
symfony-loader42
symfony-search10
Vue, driven
The same bar, its parts given as data. A part that leads nowhere answers a click with `select`, which is what to listen to for a table that filters itself beside it.