shadcn.io is not affiliated with official shadcn/ui
Log Scale Histogram Stats Block for React
A payload-size histogram on a log axis with gridlines at 1, 10, 100, 1K and 10K, ten buckets that double in size, a note that each line is ten times the one below, and p50, p90 and p99 badges tagged on their columns.
Installation
Overview
A log-axis histogram for React with Base UI. A split: at the start, the header ("Half of responses are under 1.7 KB"), a short note on how to read the axis ("Each line is ten times the one below it") and the percentiles as outlined badges, p50, p90 and p99, each with its size and what it means. At the end a framed chart of ten buckets that double in size, from under 1 KB to 256 KB and over, on a vertical axis with solid gridlines at 1, 10, 100, 1K and 10K responses. Column heights come from the logarithm of the count, so the three responses in the last bucket still show, and the gridlines come from the same function. Counts sit above the columns from sm; the columns that hold a percentile are drawn heavier and tagged under their label. The buckets and percentiles are derived at module scope from one typed list of readings, and a visually hidden table holds the counts. On a phone the chart comes straight after the header, with every other label. It's built from Badge and Guides, in your theme's foreground colour.
FAQ
How do I change the readings?
Edit READINGS at the top of the file: each reading is a payload size in KB and how many responses had it. The buckets double from under 1 KB (BUCKET_COUNT of them, the last open-ended), and the counts, the percentiles, the chips under the labels and the note are computed. Keep the tallest bucket under the top gridline (TICK_VALUES).
How does the log axis work?
A column's height is ln(count) / ln(10000) of the plot, and the gridlines at 1, 10, 100, 1K and 10K use the same function, so a column reaching a line holds exactly that many responses. A column of 3 is about an eighth of the height. A count of zero cannot be drawn on a log axis and the axis starts at 1; no bucket in the data is empty.
How are the percentiles found?
From the sorted readings: the first reading where the running count reaches half, nine tenths or 99% of all responses. The column that holds it is drawn heavier and tagged "p50", "p90" or "p99" under its label; two percentiles in one bucket share the tag.
Is the chart accessible?
Yes. The drawing is hidden from assistive technology; the chart has an accessible name that lists every bucket and its count and gives the three percentiles, and a visually hidden table inside the figure holds the counts. The percentile badges are text. The chart box is dir="ltr" because sizes run from small to large in every language.
How does it fit on a phone?
The chart follows the header directly, with the note and the badges under it. Labels switch to each bucket's lower edge and every other one is shown; the counts above the columns are dropped (they stay in the table and the accessible name). Nothing scrolls sideways at 320 pixels.
Related
- Pro
Count Buckets Histogram Stats
DistributionsAn order-value histogram of eight $25 buckets with the count above each column, the most common bucket drawn solid, the median bucket underlined and three figures above the chart: orders, the median bucket and the busiest bucket's share.
- Pro
Distribution Card Histogram Stats
DistributionsA response-time histogram of ten 50 ms buckets with a smoothed density curve over them, a solid median line and a dashed mean line, and a band of three figures under it: mean, median and 90th percentile.
- Pro
Stacked Bins Histogram Stats
DistributionsA 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.
- Pro
Percentile Markers Histogram Stats
DistributionsSixteen latency bins in a neutral fill with vertical markers at the median, the 95th and the 99th percentile, labelled at alternating heights, and a list of the three values in the header.
- Pro
Pareto Chart Stats
Bar and columnA defect Pareto: seven bars sorted largest first, a cumulative line on a second axis, an 80% line and a bracket over the vital few, with a list of every cause's count, share and running share.
- Pro
A log-analytics table of five severity levels with the count, the lines a minute, and a bar whose length is the logarithm of the count, plus a filter that dims the quieter levels.