Top Performer Awards Block for React

Edit PERFORMERS at the top of the file. Each person has a name, a role, an award and two metrics, each with a label, the person's value, the team median and a unit ("%" or nothing). The percentage above the median, the bar's length and the tick's place are all worked out from those numbers, so nothing else needs a change.

It is the person's value minus the median, divided by the median, rounded to a whole percent: 41 deals against a median of 30 is 37% above. It is relative to the median, not a number of points, and the block says so in its words. If lower is better for a measure of yours, change aboveOf and its sentence.

A bar runs from zero to the person's value on a track that reaches a tenth past the larger of the value and the median. The tick marks the median. The bars are drawings hidden from assistive technology: the value, the difference and the median are all in text beside them.

Yes. The cells and text follow the page direction. The bars and ticks stay in a left-to-right box, so a longer bar always means a bigger value, and every figure sits in a bidirectional-isolation element so it keeps its order.

The three cells stack in one column, each full width, with the same content. Nothing scrolls sideways at 320 pixels.

No. Vickery, the Orchidmere Index and all three people are invented, and the figures are example data. Replace them with your own results.