shadcn.io is not affiliated with official shadcn/ui
Paired Bars Queue Metrics Block for Vue
Five message queues as rows of paired bars, the release before as an outline and the current release solid, with a three-way switch between throughput, lag and dead letters, and a header that counts the lagging queues.
Installation
Overview
A queue metrics block for Vue with Ark UI. A start-aligned header counts the queues that are lagging from the data ("1 of 5 queues lagging after v3.14") and carries a three-way switch at its end: Throughput, Lag and Dead letters. Under it, one band ruled from rail to rail ends the block: a legend (the release before is an outline, the current release is solid) and a row per queue with its name, what it carries, a pair of bars on a shared scale for the chosen measure, the current value rolling in place and a signed change on the release before. Switching redraws every bar with a CSS transition and announces the measure; the values are always in text, so the bars add shape and nothing else. The one lagging queue takes a warning dot and says "lagging" in words. It's built from Segment Group, Sliding Number, Status and Guides, with your theme's tokens for every colour.
FAQ
How do I change the queues, the measures or the limit?
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.
Why does a queue with no dead letters show no bar?
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.
How does it read without the bars?
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.
What changes on a phone?
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.