Deploy Rolled Back Error Block for React

Nothing was deployed. The three series, the limits, the versions and the three events are typed in the file, and the link points nowhere. To wire it for real, fill METRICS from your monitoring, keep the pins as the events your tool recorded, and point View deploy logs at your logs.

It is a plain SVG path and a few boxes in a left-to-right frame, no chart library, drawn in foreground weights with no color for good or bad. The chart has a text description that gives the metric, the limit, when it crossed it and when it came back, the pins are listed as an ordered list with times and words, and the Before, Peak and After strip repeats the numbers in text.

From the series itself. The crossing is the first reading over the limit, the recovery the first one back under it, Before is the average of what came earlier, Peak the highest reading in between and After the average from the recovery on, so the text and the drawing cannot disagree. The three pins are fixed events and the same for every metric.

It is a single-choice group that can never be empty: pressing the chosen one keeps it. Choosing another redraws the chart in the same box with its own axis, limit and thick stroke, and the status line says when it crossed and recovered. Nothing on the page changes size.

The chart, its axis and its pins stay left to right, because time runs one way, and so does the Before, Peak and After strip. The headline, the sentences and the version cells follow the page direction.

The headline, the button and the two version cells come first, then the metric switch, a shorter chart and the events. The chart's caption and the version cells' dates stay for screen readers and are hidden from sight, so the page fits in about one and a half screens.