Build Time Dot Strip Stats Integration Block for React

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.

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.

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.

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.

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.

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.