shadcn.io is not affiliated with official shadcn/ui
Dashboard Stats File Upload Block for Radix UI
Upload analytics with a 7, 30 or 90 day switch that re-derives four totals, a daily bar chart with a table for screen readers, uploads by file type and the five top uploaders from 180 days of sample data.
Installation
Overview
Turn a stream of uploads into four numbers and a picture, with this upload analytics panel for React with Radix UI. It is the dashboard of Pulsedock, file delivery for a SaaS team. A Toggle Group in the header picks the last 7, 30 or 90 days, and everything below is worked out again from 180 days of typed daily numbers: four cells on shared hairlines for uploads, storage added, bandwidth served and failure rate, each compared with the period before it; a bar chart of uploads per day, weekends drawn lighter, with the busiest and quietest days named in words; uploads by file type with shares that add up to 100; and the five top uploaders with initials in an Avatar. The chart has no library behind it, only bars drawn in a viewBox, and a table of every day for screen readers sits inside the same figure. The panel is ruled by Guides. For admin consoles, usage pages and any team that wants to see where its files go.
FAQ
What is typed and what is worked out?
Nothing about a day is typed by hand. A seeded function at module scope makes each of the 180 days from the as-of date: uploads with a weekday rhythm and slow growth, how they split by type and by person, how many failed, how many bytes they weigh and how much was served. The period switch only slices that series. Totals, shares, deltas, the busiest day and the bars are all derived from the slice, and the previous period is the slice just before it.
How is the comparison made?
Each cell compares its total with the same number of days immediately before the chosen period, so 30 days is set against the 30 before it. Uploads, storage and bandwidth show a percentage change; the failure rate shows the change in percentage points. The numbers are signed with a real minus sign and read left to right in any language.
Is the chart accessible?
The bars are decorative and hidden from assistive technology. The same facts are in text: the range and the busiest day above and below the plot, and a table with a caption lists every day's uploads and failures. The period switch is a labelled group with the chosen period pressed, and the status line says what the new period holds.