Star Threshold Histogram Reviews Block for React

Replace REVIEWS at the top of the file, newest first. Each review has an id, name, rating from 1 to 5, an ISO date, a title and a body. The counts per star, each row's percentage (by the largest remainder method, so the rows add up to 100), the share that clears each bar and the newest review that clears it are all worked out from that list when the module loads. If you have thousands of reviews, type the counts instead and keep a short sample for the newest-review panel, as the Rating Breakdown block does.

The lowest star rating that counts, from 1 to 5. The label under the rows says it in words ("Ratings of 4 stars and up"), the bracket resizes to span the rows that are kept, the rows below it step back to a lighter tone, the rolling figure shows the share, and the reading panel shows the newest review that clears the bar. At 1 star everything counts: 100%. The slider is a native range on every target, so arrow keys, Home, End and Page Up and Down all work. The Slider takes value={[n]} and reads onValueChange with a number or an array; the label is tied to it by aria-labelledby.

The reading panel holds the newest review for every bar, unseen, in the same grid cell as the live one, so the tallest review sets the height. The sentence above it has a reserved height on phones too. Nothing below the block moves.

A colour would say how to feel about a number. Rows inside the bracket use your theme's text colour at full strength and the rest a faint step of the same colour, so the shape is the message and the primary colour stays free for your page's calls to action. Stars in the review are the catalog Rating, read-only, in the same text colour, with the rating in words beside them.

Yes. Rows read star, bar, count, share from the start, bars fill from the start, the bracket sits at the end of the rows, and the Slider runs from the start too. Figures and dates are isolated so digits and the percent sign keep their order.

The two cells stack, the rows and the Slider first and the reading panel under a rule. The rows keep one line each at 320 pixels, the rolling figure and its sentence stay together, and nothing scrolls sideways.