shadcn.io is not affiliated with official shadcn/ui
Box Plot Stats Block for Solid
Five box plots of delivery times on one shared axis in a band that runs from rail to rail, each with a whisker, a box for the middle half, a median line, hollow outlier dots and the median at the row's end.
Installation
Overview
Box plots for Solid with Ark UI. A start-aligned header says how much slower the slowest route is than the fastest, "Hilltop takes 2.6× as long as Airport ring", with a one-line key at its end. Under it, five routes are rows of a band that runs from rail to rail and ends the block. An axis of minutes runs along the top of the band and its ticks continue as hairlines behind every row. Each row is one route's box plot on that shared axis: a whisker, a box for the middle half of deliveries, a median line and hollow dots for outliers, with the route's name and the middle half's range at the start and the median at the end. Rows are sorted from the quickest median to the slowest. The quartiles, the whiskers and the outliers are computed at module scope from each route's delivery times, never typed, and the same numbers are an unseen table for screen readers. On a phone the plot moves under the route's name. For logistics, support response times, build durations and any comparison of spreads.
FAQ
How do I use my own samples?
Edit ROUTES at the top of the file: a name and a list of times for each. Everything else is computed. The quartiles use linear interpolation between neighbouring readings, a whisker reaches the furthest reading within 1.5 box lengths of the box, and anything beyond is an outlier drawn as a hollow dot. Set AXIS and TICKS to the range your data needs; the rows are sorted by median.
How do I read one row?
The box spans the first to the third quartile, so half of the deliveries fall inside it, and the thick line inside is the median. The thin line (the whisker) runs to the quickest and the slowest delivery that isn't an outlier, and a hollow circle is a delivery far outside the rest. The median is written at the row's end and the box's range under the route's name, so no number depends on reading the drawing.
Is it accessible?
The plots are hidden from assistive technology. Each row is a list item with a heading for the route, its middle half and its median in text, and an unseen table repeats every route with its whiskers and outliers in one sentence. The minus and range text sit in bdi elements and the plot boxes are forced left to right, so the axis grows from the start in every language.
Why is there no line under the last row?
The band ends the block. On a page the next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component with a + on each rail. If nothing follows the block, add a bottom border to the figure.
What happens on a phone?
Each row becomes two lines: the route and its median, then its plot at full width. The axis keeps one label every 40 minutes and the hairlines behind the rows stay, so the plots still share a scale. The box grows from the start once on load; with reduced motion it simply appears.