Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Log Volume Dashboard Block for React Aria

Six log sources as small multiples with hourly charts on their own scales, a daily ingest budget with a projected end of day, a sort menu, and an enlarged chart with the busiest hour and level split.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See which source is filling the budget, with this log volume panel for React with React Aria. A hairline frame with a plus mark on each corner opens with a daily ingest budget: a bar of the volume so far against 5 TB with a tick where the day is projected to end, and a sentence that says how far over or under that is. Six Logpile sources follow as cards in a grid, each with a 24-slot hourly chart on its own scale, the day's total, its share of error lines and its peak hour. A Select in the header sorts the cards by volume, errors or name. The cards are one radio group; choosing one draws its chart larger in a band below, names its busiest hour and splits the day into info, warning and error lines. Hours still to come stay empty. It's built from Select and Guides, with the charts drawn in CSS. For logging pipelines, observability tools and cost reviews.

FAQ

How is the end of day projected?

The volume so far divided by the hours that have passed (18 of 24, from the typed time) and multiplied by 24. It assumes the rest of the day looks like the average so far, so it is a rough guide, and the sentence says "at this rate".

Why does each card have its own scale?

So a small source still shows the shape of its day. The tallest bar in each chart is that source's busiest hour, drawn solid, and the figure beside the large chart gives its size. Compare totals with the numbers, not the bar heights.

How do I fill it with my own sources?

Each source in SOURCES has an id, a list of hourly volumes in gigabytes and a split of its lines into info, warning and error as parts per thousand. Totals, shares, peaks and the budget bar are all worked out from those.

What stays local, and how do I wire it for real?

Everything: the hourly volumes are generated from a few typed numbers per source and nothing is read from a pipeline. Replace hoursOf with your hourly counts and set HOURS_DONE to the hours that have finished.

Can I use it without a pointer?

Yes. The cards are native radio buttons in a fieldset, so arrow keys move between them, and each card carries its total, error share and peak in text. The charts are hidden from screen readers and a polite line reports the chosen source.

How does it look on a phone?

The cards stack in one column, two across from the small breakpoint and three from medium, and the large chart sits under the grid.

All 200 dashboard blocks