shadcn.io is not affiliated with official shadcn/ui
Build Time Dot Strip Stats Integration Block for Vue
An integration stats section for a preview-review tool reading from Vercel: a rail-to-rail dot strip of build times for twenty deploys with a median line, a 95th percentile line and cached builds drawn hollow, over three figures.
Installation
Overview
An integration stats section for Vue with Ark UI, written for Stagehouse, a fictional tool for reviewing preview deployments, and its Vercel connection. A compact header opens with the median build time, worked out from the data, and says how much faster the builds that reused the build cache were, with the mark pair at its end. Under a band rule, a chart runs rail to rail: one dot per deploy in order, its height the build time, a solid hairline at the median and a dotted one at the 95th percentile. Builds that reused the build cache are hollow dots, fresh builds filled, so no colour carries anything. A key sits above the chart and the oldest and latest deploys are named under it. A closing band of three figures gives the median, the 95th percentile and the share of cache hits; they are counted from the same typed list as the dots, and a visually hidden table repeats each deploy. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides with hand-built CSS for the chart and your theme's tokens for every colour. Vercel is named in text only: no Vercel logo, colour or wordmark ships with the block. Every figure is example data; nothing is read from Vercel.
FAQ
Where do the figures come from, and how do I change them?
They are typed example data in DEPLOYS: each deploy's build time in seconds and whether it reused the build cache. The median, the 95th percentile (by nearest rank), the cache-hit share, the two medians in the header, the chart's ceiling, every dot's height and the hidden table are counted from that one list. Wire DEPLOYS to your own build data and nothing else needs editing.
What does reusing the build cache mean?
Vercel can restore files from an earlier build, such as installed dependencies, so a build with a warm cache usually finishes sooner. The block only draws that: the hollow dots are example builds that reused it, and the figures are not Vercel's. How much time it saves in your project is for your own data to say.
Why a median and a 95th percentile?
The median is the build in the middle, so half of the builds are faster. The 95th percentile is the time that 19 builds in 20 finish within, so it shows the slow ones the median hides. They are drawn as a solid line and a dotted line and named in the key, so they read the same in greyscale.
How do screen readers get the chart?
The drawing is hidden from assistive technology and the same facts are in a visually hidden table inside the figure: deploy number, build time and whether the build cache was reused. The figure's caption names the chart, the header sentence states the median and the three figures are a description list.
How does it fit a phone?
All twenty dots stay on a phone, so the median and the percentile always match what is drawn; they just sit closer together. The key wraps, the three figures stack with a rule between them, and the axis names the oldest and the latest deploy at its ends.
How does it behave in right-to-left layouts and with reduced motion?
The chart always runs oldest to latest in the same direction, because a time axis is not mirrored; the header, the key and the figures follow the page direction and every number sits in its own isolate. The only motion is the header's fade-up on load, and reduced motion turns it off. The block has no state, so every framework and every library gets the same markup.