API Response Time Changelog Block for React

Edit ENDPOINTS at the top of the file. An endpoint is an id, a path, the fix that made it faster and its timings: for each percentile the was and now milliseconds. The bar widths, the percentages and the summary line are all computed from those numbers. CEILING sets the axis's end (400 ms here), so keep every value below it.

Both bars of every endpoint, and every endpoint, are drawn to the same 0 to 400 ms scale, so a longer bar always means a slower answer and endpoints can be compared by eye. The figures are written out beside the bars too, so the picture never carries a number alone.

The drawn rows are hidden from assistive technology on purpose. In their place the figure holds a table with a caption: one row per endpoint and the previous and current milliseconds for p50, p95 and p99, whatever the toggle shows. The summary line is a polite live region, so each choice announces how many endpoints got faster.

It is a single-choice group with one button always pressed; the arrow keys move between p50, p95 and p99. A choice changes the bars' widths with a CSS transition and rolls each percentage's digits to the new value. With reduced motion the bars and digits change at once.

Below lg each row stacks: the path, then the bars full width, then the percent beside the two figures and the optimisation. The axis and every bar keep their left-to-right direction in a right-to-left layout, since a time scale doesn't mirror, and the figures and percentages stay left to right.