shadcn.io is not affiliated with official shadcn/ui
BigQuery Slot Usage Monitoring Block for React Aria
Eight hours of slot demand as a stacked area of three workloads against a 500 slot reservation, hatched where jobs queued, a cursor that reads each step and a table of the five costliest jobs of the cursor's hour.
Installation
Overview
See when a warehouse ran out of slots and which jobs used them, with this capacity panel for React with React Aria. It is Slotlark, a capacity monitor (made up) for a BigQuery-style warehouse, watching eight hours at ten-minute steps. A hairline frame with a plus mark on each corner holds a stacked area of three workloads, Scheduled, Dashboards and Ad hoc, told apart by fill weight, with a solid line at the 500 slot reservation. Where demand went over the line the plot is hatched, and the header counts it (how long jobs queued and how many waited at once). A hidden range over the plot is the cursor: it reads each workload and the total at that step, and the table under the plot follows the cursor's hour with the five costliest jobs (job id in mono, user initials, bytes processed and a slot-seconds bar). Guides draw the frame and its bands; the entrance is CSS only. For data platform teams, reservation planning and cost reviews.
FAQ
How do I use my own usage data?
Edit the three series at the top of the file: SCHEDULED, DASHBOARDS and AD_HOC are 48 ten-minute samples of slots in use, and CAPACITY is the reservation. The total, the hatched spans, the queued minutes and the jobs queued are derived. The job table is generated from the hour's average demand in the demo; replace jobOf with rows from your job history, keyed by hour.
How are queued jobs worked out?
Wherever the total passes the reservation, the demo counts the excess divided by about 18 slots a job, rounded up, as jobs waiting. That is an assumption of the demo, not a measurement; with real data use the queue depth your warehouse reports. The header adds up the minutes over the line and shows the largest queue.
How does the cursor work?
It is a native range laid over the plot, named Time, whose value text is the time and the total. Arrow keys move one step, Home and End jump, and dragging scrubs. It starts on the peak. The line under the plot updates at once; a polite status line speaks it about 600 ms after the last change. The table changes when the cursor crosses into another hour.
What is real here and what is typed?
Everything is typed or generated from fixed numbers: the series, the jobs, the bytes and the user initials, and the product is made up. Nothing calls a warehouse or a billing service, and the demo asserts nothing about any real service's slots or prices.