OKR Target Cards Stats Block for React

Edit OBJECTIVES at the top of the file: an objective is a title, an owner and its keyResults. A key result has a label, a current figure, a target, a from (where it stood when the quarter began) and a write function that formats a reading ("$41.6K", "620 ms"). The percents, the mean per objective, the quarter's headline and each card's closing line are computed from the list.

Its from is above its target. Progress is (current - from) / (target - from), clamped to 0 to 100, so median launch time from 900 ms to a target of 450 ms, now at 620 ms, is 62%. A number that climbs from nothing has a from of 0. The label should say which way the number has to go, as "Support tickets per 100 new teams" does with its figures (14 now, 8 to reach).

It is the mean of the three key results' whole percents, rounded, so what you read on the card adds up. The headline's percent is the mean of the objectives' percents in the same way.

Yes. Each objective is a list item with a heading, and its key results are a nested list. Every bar is named with its label, its figures and its percent ("Teams enrolled in the beta: 1,420 of 1,500, 95%"), and the figures are also text next to it. Values sit in bdi elements so a right-to-left page doesn't reorder "$41.6K / $60.0K". Contrast passes in light and dark. The bar takes an aria-label.

The three cards stack, one per row, each with the same layout as on a desktop. Nothing scrolls sideways at 320 pixels.

The header and the cards fade up once on load, and each objective's percent rolls up the first time it scrolls into view. The bars show their final width from the start. With reduced motion everything simply appears.