Paired Bars Queue Metrics Block for React

Edit QUEUES (each has an id, a one-line note and its [before, now] readings for every measure, in the order of METRICS), METRICS (label, unit and the step the scale rounds up to) and LAG_LIMIT in seconds. Each measure's scale is its largest reading rounded up to the step, the bars are shares of it, and the count in the title is the number of queues whose lag now is above the limit, so nothing is kept in step by hand. The numbers are example data.

A bar of zero length would still draw its outline as a sliver, which reads as a small value. A zero is no bar, and the number beside it says 0 and the change says what it was.

Each row is a list item with the queue's name as a heading, its note, the current value and the signed change with a hidden sentence ("on v3.13, from 640 msg/s"). The bars are decoration and hidden from assistive technology. The switch is a radio group; a polite status line says which measure is showing.

The switch moves under the header and each queue's bars go under its name, full width, with the value still at the end of the name line. The legend wraps and the measure's name drops out. Nothing scrolls sideways at 320 pixels.

The band fades up once on load. Switching measure slides the bars to their new widths and rolls the changed digits. With reduced motion the bars and the numbers change in place.

Yes. Bars are a measurement, so they keep a left-to-right direction; queue ids, units and signed changes are isolated so a minus or a plus stays beside its number, and the rows follow the page's direction.