Distribution Bars Reviews Block for React

Edit TALLY at the top of the file: how many ratings gave each star, five stars first. The total, the mean to one decimal (by whole-number maths, so 1,428 stars over 366 ratings is exactly 3.9), the median, the mode, the share rated four or more and each row's percentage are worked out when the module loads. The percentages use the largest remainder method, so the five rows always add up to 100. The median is the first star, counting up from one, where the running count reaches half the ratings.

It reads the row. The row's bar stays solid and the other four step back to a lighter tone, the row takes a light tint, and the line under the rows says, for example, "4 stars: 121 ratings, 33% of 366." Hover works with a mouse only; a tap or the keyboard (Tab, then Enter or Space) reads the row through its press, and focus reads it too. Nothing is filtered: the readout cells always describe every rating. Each row is named in full for a screen reader ("4 stars: 121 ratings, 33%"), and the bar and figures are hidden from it so nothing is said twice.

A table is the better view for exact figures, for a screen reader's table commands and for a reader who wants the running share from five stars down. Both views live in one grid cell with an unseen copy of each, so the taller one sets the height and the switch never shifts the page. The table has a caption, column headers and row headers, a native table on every target. The switch is the catalog Tabs: arrow keys move between triggers.

Colour would tell the reader how to feel before the numbers do. The bars use your theme's text colour at full strength and one lighter step, so the shape is the message, and the primary colour stays free for the page's calls to action. Stars are drawn as icons next to the figure, not as colours.

Yes. Each row runs star, bar, count, share from the start, the bar fills from the start, and every figure sits in its own isolating element so digits and the percent sign stay in order. The readout cells and the table follow the page's direction.

The rows keep one line each at 320 pixels, the readout cells fold into two across and two down, and in the table the last column is shortened to "Running". Nothing scrolls sideways.