Aggregate Score Reviews Block for React

Edit TALLY at the top of the file: for each star rating, how many ratings came from verified buyers and how many from everyone else. The modes are two small objects (SIMPLE and WEIGHTED) that give each kind of rating a weight in halves, so every sum stays a whole number until it is written. The score, the stars drawn, the exact figure to two decimals and every line of the arithmetic are worked out from them when the module loads.

It counts a verified buyer's rating once and any other rating at half, then divides the weighted points by the weighted number of ratings. With the sample data the simple average is 161 points over 38 ratings, 4.24, shown as 4.2; weighted it is 147 points over 34.5 ratings, 4.26, shown as 4.3. The line under the switch says which rule is in force and is read out when you change it.

The score is shown to one decimal, as most shops do, and the last line of the list says how the figure was rounded. Showing the exact quotient next to the rounded score keeps the block honest: the arithmetic is the same arithmetic that made the number above it.

They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the score, and the figure beside them says it. Rating draws in your warning colour by default; here it takes text-foreground, and half stars fill from the start in right-to-left layouts too.

Yes. The columns of the list follow the page's direction, and each expression is wrapped in a bdi element so the digits, the multiplication signs and the brackets keep their order. The rolling figure always runs its digits left to right.

The parts fade up once when the page loads, and the figure's digits roll when the switch changes the score. With reduced motion the entrance is off and the digits change in place.