Hourly Event Strip Stats Integration Block for React

HOURS holds the 24 counts and UNMAPPED the events no checklist step is mapped to. The total, the busiest hour and its count, the headline and the unmapped share (one decimal) are all computed from those two, so changing a count changes every figure that depends on it. Nothing is read from PostHog.

The 24 hours are real buttons in a list, and the strip is one tab stop: the chosen hour. The arrow keys move one hour at a time and Home and End jump to the first and last. Each button is named with its hour and count ("14:00, 4,820 events") and is pressed when chosen, so a screen reader hears the same text the readout shows. Hovering, tapping or focusing an hour chooses it.

Each cell takes one of five solid mixes of the foreground colour with the page, by its share of the busiest hour (under 10%, 30%, 60%, 85%, and above), and the chosen hour is ringed with a gap in the page colour, so no meaning rests on colour alone. There are no hues, so it reads the same in any theme, and the legend repeats the five steps.

The block names PostHog in text and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.

Below lg the strip becomes two rows of twelve, the top row 00:00 to 11:00 and the bottom row 12:00 to 23:00, and a line under it says so; the axis labels show from lg. A time series reads left to right in any language, so the strip and its labels keep that direction in a right-to-left layout. The header and the strip fade up once on load with CSS transitions, and the ring's change is off with reduced motion.