Heatmap Pivot Table Block for React

It changes which numbers a cell is measured against, never the numbers. With Whole table the lowest of the twenty cells is the lightest and the highest the darkest. With Each row every region gets its own scale, so a small region's best quarter is as dark as a big region's. With Each column every quarter compares its five regions. A cell's step comes from where its figure falls between the lowest and highest of its scope, split into five equal bands by stepOf.

Edit REGIONS (a name and one revenue figure per quarter) and QUARTERS. Totals, shading and the outlined cell are all worked out from those numbers, so nothing else needs changing. The five steps are literal class names in STEPS, which keeps them visible to Tailwind; the last one carries text-background so its figure stays readable. For another kind of figure, change money and the caption.

The steps are mixes of the text colour, so they follow the theme and keep their contrast in light and dark without a second palette. Colour alone also fails for people who cannot tell the steps apart, so the figures are always printed and the highest cell of the scope has an outline, which does not depend on colour at all.

The data is a constant and the scope lives in one useState; nothing is requested or saved. To feed it real figures, build REGIONS from your API in the page and pass it in, or fetch it where you render the block. Totals and shading are derived on every render, so nothing needs to be kept in step.

Yes. It is a native table with a caption, th scope="col" heads and a row header for each region, so a screen reader reads each figure with its region and quarter. The shading is decoration, the legend and outline are for sighted users, and the toggle is a labelled group of buttons that follows the arrow keys. A polite line says which scope is active whenever you change it. The table region is focusable so it can be scrolled by keyboard on a very narrow screen.

All six columns stay, with tighter padding and smaller figures, and nothing scrolls sideways at 320 pixels; region names wrap. The scope control sits full width under the sentence. The block keeps its size in every scope, so switching never moves the table.