Architect Performance Targets Profile Block for React

Edit METRICS (each target's name, what it counts, the scale's end and whether a bigger figure is the better one) and PROJECTS (name, brief, floor area, status, year, whether the figures are measured or modelled, and a target and an actual for every metric). Whether a target is met, by how much, the bars, the count of targets met and the rating level are all worked out from those numbers, so nothing is typed twice.

The tick is the target. For a figure that should stay low, such as energy use, the bar is solid up to the target and hatched beyond it when the figure is higher. For a figure that should stay high, such as daylight, the bar is solid up to the figure and hatched up to the target when the figure falls short. The words under the bar say the same thing, and the bar itself is hidden from assistive technology.

An invented scheme for the example: all three targets met is Gold, two is Silver, one is Bronze. It is worked out from the data and the cell under the list says the rule. Replace it with your own certification, or remove it, and keep the count of targets met, which is the part the data proves.

Everything. There is no building, no measurement and no certifying body behind the figures, which are typed examples, and the tabs only change what is shown. In your app load the targets and the results for each project from your own records, and show the basis, measured or modelled, as the example does so a modelled figure is never read as a measured one.

The tabs are named by the project and keep the usual arrow-key behaviour. Each target is a list item whose text carries the whole result: its name, the unit in words, the figure, the target and the verdict. A check or an arrow sits beside the verdict, never alone. The status line is a polite live region present from the start.

The tabs scroll sideways, the three target cells stack one over the other, and the list and the rating follow. Each cell keeps its figure, bar and verdict together, so nothing is cut.