shadcn.io is not affiliated with official shadcn/ui
Analytics Widget Dashboard Features Block for Vue
A job-queue dashboard drawn as a window in a hairline frame: a range control in its title bar re-draws the throughput line and re-reads the uptime and outcome figures, beside a seven-bar week.
Installation
Overview
A dashboard feature section for Vue with Ark UI, written for Queuebank, a fictional job-queue monitor. A window in a hairline frame, with + marks on its corners, holds four widgets that share their lines: a wide line chart of jobs per minute with its average and its change, an uptime figure over a strip of thirty days, a seven-bar week and a donut that splits the jobs into first-try successes, retries and failures. The window's title bar has a segmented range control, 24h, 7d and 30d: choosing a range re-draws the line from that range's data, rolls the average and the uptime to their new values and re-cuts the donut, while every widget keeps its height. Everything is drawn in foreground tones from your theme's tokens (the charts are plain SVG and CSS, the numbers roll with Sliding Number), so no widget uses your primary colour. For monitoring, analytics and operations products whose pitch is that the answer is already on screen.
FAQ
How do I put my own data in?
Edit RANGES at the top of the file. Each range has its points (jobs per minute, as many as you like), the uptime in hundredths of a percent (9998 is 99.98%), the firstTry and retried shares in percent, and the labels it shows. The average, the change, the peak, the chart's scale and the share of failed jobs are all derived from those numbers. The seven bars come from WEEK and the degraded days in the uptime strip from DEGRADED.
Why are the charts hand-drawn instead of using a chart library?
They are an SVG polyline, a few CSS bars and three circle arcs, with every colour a foreground tone, so they follow any theme and light or dark mode, weigh next to nothing and render on the server. Each chart is an image with a text alternative built from its data, so a screen reader hears the range, the first and last values and the peak.
How does the range control work?
It is a segmented control named "Range". The arrow keys move between the three ranges and the choice applies at once; the chart and the figures change, and nothing around them moves, because the charts have fixed heights and the figures keep their width.
What happens in a right-to-left page?
The window mirrors like any interface, but the charts keep their direction: time runs left to right in the line, the bars and the uptime strip, as it does in most right-to-left products, so each is set to dir="ltr". Figures with a sign or a unit sit in bdi elements so they keep their order.