Community Aggregate Reviews Block for React

Edit CHANNELS at the top of the file: for each channel an id, a name, a note, a tone, a weight out of 100 and its review counts by star, five stars first. Each channel's average (in tenths, by whole-number maths), the pooled average, the weighted rows and their shares are worked out when the module loads. A pooled review counts as its channel's weight over 100: a shop review as 1, a partner-shop review as 0.6 and a forum post as 0.3. The weights here are example figures.

They take a channel in or out of the pool. The pooled score, the rows and the "reviews count after the weights" line follow at once. The last ticked channel is disabled, so the pool is never empty. The whole cell is the checkbox's label, so a click anywhere in it toggles it, and the box is named by the channel and "Include in the average". The Checkbox takes checked and onCheckedChange(checked); the label points at it with htmlFor.

Each row is one star rating. Its length, against the longest row with every channel in, is the weighted count of that rating; inside it, each channel's part is as long as its weighted reviews, in the tone shown in the channel's cell. The number at the end is the row's share of the pool. The bars are drawn only; the shares and the pooled average are in text and in a polite status line.

The three tones are your theme's text colour at three strengths, so the chart works in every preset and keeps the page's primary colour for its call to action. Each channel's cell carries the same tone as a small square key, and a channel taken out loses its part and is tinted, with its state in the checkbox.

Yes. Bars fill from the start, the checkbox sits at the start of its cell, the sideways row scrolls from the start, and figures are isolated so digits and percent signs keep their order. Half stars mirror too.

The three channel cells form one row that scrolls sideways with snapping, each cell about 85% of the width, so the next one peeks in. The pooled score and the rows follow underneath. Nothing else scrolls at 320 pixels.