Performance Log Changelog Block for React

Edit RELEASES (newest first, each with its day) and METRICS. A metric has one reading per release, in the same order, and lower is better. The change, the order of the rows, the median in the title and the bars are all worked out from those readings, so they cannot disagree. Add a release to the list and a button for it appears in the toggle.

Each pair is drawn to its own larger reading, so the longer bar always fills the row and the shorter one shows the ratio between the two. The bars are decoration; the readings and the change are always in text, and the legend says which bar is which.

It chooses the release the newest one is compared against. The old readings, the bars and the percentages change, the percentages and the median roll to their new digits, and a polite line says what is showing. The rows are sorted by improvement against the chosen release, and the block's height never changes. The choice stays local to the page.

No. The change is an arrow, a true minus or a plus and a number, and a screen reader hears it in words ("38% lower than v6.1"). The old reading is struck through and the new one is heavier, so before and after are told apart without colour.

Below the tablet width each row stacks: the name and the change first, the readings under them, then the bars. Readings, arrows and signed changes keep their left-to-right order in a right-to-left layout, while the names and the text around them mirror.