Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard Stats File Upload Block for Solid

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn a stream of uploads into four numbers and a picture, with this upload analytics panel for Solid with Ark 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.

Do the type shares always add up to 100?

Yes. They are split by largest remainder, so rounding never leaves 99 or 101, and each bar is drawn against the largest type rather than against the whole so small types stay visible.

What stays local, and how do I wire it?

All of it: the numbers are sample data and nothing is measured. To wire it, replace SERIES with your analytics API's daily rows (uploads by type and person, failures, bytes, bytes served) and keep the slicing; add a longer span if you offer a longer period.