NPS Score Bar Testimonials Block for React

Edit the count of each group in GROUPS and the quote in PROMOTER. The total, the percentages, the bar and the score are all computed from those three counts. Keep the order: promoters first and detractors last, since the score is the first group's share minus the last group's.

Each share is the group's count over the total, rounded down to a whole percent; the points that rounding leaves over are given to the groups with the largest remainders, so the three always add up to exactly 100. The score is the promoters' percentage minus the detractors' percentage, so it matches the legend beside it; the percentages shown are what it is calculated from.

The bar is decoration. The same information is a description list under it: each group's name, the scores it covers, its percentage and its number of responses, so nothing is only in a tone. The score is real text, and the quote is a figure with a blockquote and a figcaption, under an h2.

Each group has a tone class used by both its segment and its swatch: bg-foreground, bg-foreground/40 and bg-foreground/15. Change them there and the legend follows. They are fills with no text on them, so any theme colour works, though a colour per group would add accents next to the one primary button.

Each segment grows from the bar's start once, when the page loads, using a CSS transition. With reduced motion it's simply drawn. The bar grows from the right edge in right-to-left languages.

Yes. The bar grows from the inline start, the dividers sit on the inline start side, and the figures and the quote are in a bdi so "72%" and the quotation marks keep their order.