Satisfaction Meter Reviews Block for React

Edit SCORES at the top of the file: for each score from 1 to 5 a label and the count of answers. The shares, the satisfied count under each definition, the percentage, the bracket and the sentence are all worked out from those counts. Add or rename a definition in DEFINITIONS: it takes the lowest score that counts (from), a label for the control and the rule in words for the sentence. The parts of the bar are one per score, so a scale with a different number of steps is a matter of editing SCORES.

Yes. Each cell's share uses the largest remainder method, so the five shares always add up to exactly 100, and the bar's parts use the same numbers. The headline percentage is the true share of satisfied answers, rounded once, and with the sample counts it equals the sum of the satisfied cells' shares under every definition; with other counts the two can differ by a point, because a total of rounded numbers is not a rounded total.

It is a single-choice Toggle Group: pick a definition and the rest follows. It always keeps one on, so pressing the chosen one again does nothing, and the arrow keys move between the three. The group takes value={[id]} and reads onValueChange with an array.

The bar and its bracket are a drawing: they show the proportions at a glance and are hidden from assistive technology. The same facts are in text: the sentence under the percentage (announced politely when it changes), and the five cells, each a term and its description, with the share, the count and whether the score counts. A bar on a fixed scale does not mirror in right-to-left layouts, so the low scores stay at the start of the reading order of a number line.

Parts that count are your theme's text colour at full strength and the others a faint solid tint of it, so the meter reads the same in every preset, light and dark, and the page's primary colour stays free for its calls to action. The state is also in words ("Counted", "Left out"), never in a hue alone.

The header and the control stack, the bar still runs rail to rail, and the five cells fold into two columns with the fifth across the full width, so no cell sits next to an empty slot. Nothing scrolls sideways at 320 pixels.