Bullet Chart Stats Block for React

Edit KPIS at the top of the file. Each has a name and team, the result (actual), the target, two thresholds in bounds between the poor, fair and good ranges, the min and max of the scale, the ticks to label, whether lower is better, and a write function that formats a number. The ranges, the bar, the tick, the verdict, the gap in the text and the headline are computed from those.

Set lower: true. The result then meets its target at or under it, the poor range is the one at the end of the scale, and the ranges' tints flip so the darkest tint is still the worst. The verdict and the gap ("7 days over") are computed from the result and the target, so the words are always true whichever way a KPI runs.

Only when a result lands in its poor range, the one real alert in the set. The warning dot sits beside a triangle and the words "In the poor range", so it never relies on colour. Every other verdict is a check or a dash in the text colour with its words, which keeps the block readable in any theme and in print.

The bullets are hidden from assistive technology because every row says the same in text: the KPI, its team, the value, the verdict, the target and the gap. The rows are a list with a heading each, values sit in bdi elements, and the scale is forced left to right so it grows from the start in every language.

Each row stacks: the name, team, value and verdict first, then the bullet at full width with its scale. The scale labels drop to every other tick. The bar grows from the start once on load; with reduced motion it simply appears.