NPS Display Reviews Block for React

Edit COUNTS at the top of the file: eleven numbers, the answers given for each score from 0 to 10. The three bracket shares, the Net Promoter Score and every column are worked out from them when the module loads. The comments are COMMENTS: a score, a name and the text; keep at least one for every score, and the band says how many are shown. The score is the promoters' share minus the detractors' share, each a whole percentage by the largest remainder method, so 63% minus 12% is exactly +51.

They are one single-choice Toggle Group: a press, or the arrow keys, moves the choice, and it always keeps one on. Each column is named for assistive technology in full ("Score 9, a promoter: 96 answers, 24%"), and the drawing inside it is hidden so nothing is read twice. The comments for the chosen score and an unseen copy of every score's comments share one cell, so the band keeps the height of the tallest and choosing a score moves nothing. The group takes value={[score]} and reads onValueChange with an array.

A Net Promoter Score counts answers of 9 and 10 as promoters, 7 and 8 as passives and 0 to 6 as detractors, and subtracts the detractors' percentage from the promoters'. Passives are counted in the total but not in the score. Here 252 of 400 are promoters (63%) and 48 are detractors (12%), so the score is +51. The sign is part of the figure: it would read −20 if detractors outnumbered promoters.

Colour would carry a judgement the brackets already state in words. The three brackets are three tones of your theme's text colour (full, medium, light) and each is labelled with its name and share, so the chart reads in any theme and in greyscale, and the page's primary colour stays free for its call to action. The chosen column takes a tint and a line under it.

The eleven columns are a scale from 0 to 10, so the row keeps its direction (left to right) and only the text around it follows the page. Figures sit in their own isolating elements, and the comment cards follow the page's direction.

All eleven columns stay on one row, each about 30 pixels wide at 375, with the count above and the score below; the brackets above scale with them. The comments stack in one column underneath.