shadcn.io is not affiliated with official shadcn/ui
Stacked Bins Histogram Stats Block for Svelte
A file-size histogram of seven bins stacked by kind (documents, images, video) in three foreground weights, with a Count and Share switch that turns absolute heights into 100% columns.
Installation
Overview
A stacked histogram for Svelte with Ark UI. A start-aligned header says how many files are under 10 MB ("83% of files are under 10 MB") and, at its end, a Count / Share switch. One framed chart shows seven size bins (under 1 MB, 1 to 10, 10 to 50, 50 to 100, 100 to 250, 250 to 500 and 500 MB and over), each column stacked by kind in three foreground weights: documents solid at the base, images at 55% and video at 25%, with a thin gap between segments. In Count the heights are file counts on one scale, so the large bins are only a sliver; in Share every column is normalised to 100%, so what the large files are made of can be read, and the segments and the axis animate between the two. A polite line under the chart says what the current view shows. The bins, totals and shares are derived at module scope from one typed list of readings, with shares rounded by the largest-remainder method so each bin adds to 100. It's built from SegmentGroup and Guides, in your theme's foreground colour.
FAQ
How do I change the files and bins?
Edit READINGS at the top of the file: each reading is a kind (documents, images or video), a file size in MB and how many files have it. EDGES holds the bins' upper edges in MB; the last bin is open-ended, so change grid-cols-7 to match the number of bins. The counts, totals, shares, axis and the line under the chart are computed. KINDS lists the kinds from the base of the stack up, each with its weight.
What does the switch do?
Count draws each segment as a share of a common ceiling, a step of a half power of ten above the biggest bin. Share draws it as its share of its own bin, so every column is 100% tall. The two views use the same markup, so the heights and the axis labels transition between them (and jump under reduced motion), and the line under the chart is announced politely.
How are the kinds told apart?
By weight and by order, not by hue: documents are solid at the base, images are 55% and video is 25%, with a thin gap in the page colour between segments. The legend lists them in the same order, from the base up, with each kind's file count.
Is the chart accessible?
Yes. The columns are drawn for the eye and hidden from assistive technology; the chart has an accessible name that gives every bin's total, and a visually hidden table inside the figure lists each kind's count and share per bin. The switch is a named segmented control with arrow keys and visible focus. The chart box is dir="ltr" because sizes run from small to large in every language.