Heatmap Density Grid Features Block for React

Replace BY_HOUR (a weekday's requests per hour, in thousands), DAY_SHIFT, SPIKE and DIP with a table of your own: GRID holds one value per hour and day, and everything else is derived from it, including the five steps, the busiest cell and the text of the callouts. To point a callout at a different cell, change the day and hour it reads.

Each cell's step comes from its share of the busiest hour: under 10%, 30%, 55% and 80%, then above. They are the foreground colour at rising opacity, so the grid is readable in any theme, light or dark, and the legend uses the same classes.

The 288 cells are decoration, so the grid is a single image with a summary that gives its shape and what stands out. The three callouts are real headings and sentences outside the image, and they are the content a screen reader walks through. The numbered markers in the grid are decoration; each callout carries its own number.

No. The Heatmap shader is a WebGPU effect; this is a static grid of CSS cells, with no canvas and no motion.

The grid keeps all 12 columns, with shorter cells and hour labels every six rows instead of every three; weekday letters stay above. The callouts stack under the figure, each in its own cell. Nothing scrolls sideways at 320 pixels.

The grid stays left to right in every language, because time does: the day columns and hour labels keep their order. The header, the legend and the callouts follow the page's direction, and the numbers and times inside them are wrapped so they don't reorder.