Diverging Bar Survey Results Reviews Block for React

Each statement in QUESTIONS has its answers counted by step for two groups, subscribers of three months or more and newer ones; Everyone adds the two. The five shares are whole percentages that add up to exactly 100 by the largest remainder method, "agree" is the last two steps, and the number of answers is the sum of the counts. Change a count and the bar, the figure and the text follow.

The centre line sits at the middle of neutral. The two disagree steps run towards the start from it and the two agree steps towards the end, so bars with more agreement reach further along one side. All eight bars (four statements, two segments) share one scale, the widest reach rounded up to ten points, so you can compare cells by eye. The five steps differ by weight, not colour, and are named in the key.

It is a single-choice group of buttons: Tab reaches it, the arrow keys move between the two choices and Space or Enter picks one. One is always chosen. The bars slide to their new places and the percentages roll, unless reduced motion is on. The group takes a value list and a change handler that receives the new list.

No. They are three typed examples per statement, each labelled with how long the writer has subscribed, and they stay the same when the toggle changes. Opening one never moves the cells beside it.

The cells stack one across, the toggle's two choices share the width and wrap, and the key wraps. The bar keeps its full width, and nothing scrolls sideways at 320 pixels.