Analytics Summary Reviews Block for React

Replace PRODUCTS at the top of the file. A product has an id, a name, a kind and its reviews, each { answered, date, rating } with an ISO date. The averages (in tenths, by whole-number maths), the counts, the bar shares (by the largest remainder method, so each bar adds up to 100), the answered percentage and the change are all derived. Set AS_OF to the day you measure to.

The average of the reviews posted in the 30 days up to AS_OF minus the average of those posted in the 30 days before that, both rounded to a tenth first, so the sign always agrees with the averages you could work out yourself. A product that has no reviews in one of the two windows would show a flat zero, so give each product at least one in each, as the typed data does.

Press Product, Reviews, Average, Change or Answered. Products start A to Z; the numbers start with the highest. Press the same heading again to reverse. The th carries aria-sort and a polite note reads out the new order. Equal values fall back to A to Z, so the order never jumps about.

It shows the share of the product's ratings at each star, with five stars darkest on the start side and one star faintest at the end. A key above the table names the five tones, and a screen reader hears the same split in words ("5 stars 59%, 4 stars 24%, ...") on every row. Only weight tells the segments apart, never a hue.

The Reviews and Answered columns and the stars go, the review count moves under the product name and the bar sits under it too. Product, Average and Change stay, with the change keeping its arrow, sign and word. Nothing scrolls sideways at 320 pixels.

Yes. The columns follow the page's direction, the bar mirrors so five stars stay at its start, the diagonal arrows are mirrored and the signed numbers are isolated with a true minus.