Analytics Widget Dashboard Features Block for React

Edit RANGES at the top of the file. Each range has its points (jobs per minute, as many as you like), the uptime in hundredths of a percent (9998 is 99.98%), the firstTry and retried shares in percent, and the labels it shows. The average, the change, the peak, the chart's scale and the share of failed jobs are all derived from those numbers. The seven bars come from WEEK and the degraded days in the uptime strip from DEGRADED.

They are an SVG polyline, a few CSS bars and three circle arcs, with every colour a foreground tone, so they follow any theme and light or dark mode, weigh next to nothing and render on the server. Each chart is an image with a text alternative built from its data, so a screen reader hears the range, the first and last values and the peak.

It is a segmented control named "Range". The arrow keys move between the three ranges and the choice applies at once; the chart and the figures change, and nothing around them moves, because the charts have fixed heights and the figures keep their width.

The window mirrors like any interface, but the charts keep their direction: time runs left to right in the line, the bars and the uptime strip, as it does in most right-to-left products, so each is set to dir="ltr". Figures with a sign or a unit sit in bdi elements so they keep their order.

The widgets stack in one column and the charts get shorter (h-40). The title bar keeps the product name and the range control on one line. On a tablet the line chart takes a row of its own, the uptime and the week sit side by side and the donut takes the last row.

The header fades up once on load and the digits of the average and the uptime roll when the range changes, both with CSS transitions. With reduced motion the digits change in place and nothing animates.