Error Budget Burn-Down Changelog Block for React

Edit USED at the top of the file: the percent of the budget spent on each of the thirty days, in order. Everything else is worked out from it: the line, the remaining budget, each release's consumed share and burn rate, the worst day and the title. RELEASES lists the releases newest first, each with the day it shipped (counted from day 1) and a short form for phones; a release's days run until the next one ships. The start date is the one constant in isoOf, so the dates are fixed and never come from today.

1.0x spends the budget exactly as fast as the thirty days allow, so 1.2x would run out early and 0.4x leaves room. It is the consumed share divided by the days the release was live, over an even share of one day. The table says in words whether a release burned faster or slower than even, so the meaning never rests on a number alone.

Each flag is a button with a pressed state. Picking one shades the days that release was live, draws that part of the line heavier and marks its row in the table with aria-current. Nothing moves, and the choice stays local to the block. The flags come after each other in the reading order newest first, as in the table, even though they sit along the time axis.

The drawing is hidden from assistive technology and a caption gives the same facts in words: the budget falls from 100% to 38%, the incident day and how much it spent, and which release is selected. The table and the list of figures are real markup with headers.

Below the desktop width the flags shorten to their versions (v4.2 for v4.2.0), the chart keeps its shape in a narrower box, and the table and figures stack. The chart box is always left to right, since time runs one way on its axis. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.