Radial Dial Stats Integration Block for React

From two typed constants at the top of the file: POSTS, the 24 hourly counts, and QUIET, the range of hours posts are held. The dial's bars, the busiest hour, the total a day and the count of quiet hours are all worked out from them, so changing a value moves every figure with it. The figures are example data; nothing is read from Discord.

A quiet hour posts nothing by design: Hearthbell holds the announcement and sends it when the window ends. A zero-length bar would vanish, so the hour is drawn as a short hatched tick, which also tells it apart from a busy hour that happened to post nothing. The legend and the hidden table both say "Quiet hour, held" for those hours.

The drawing is hidden from assistive technology, and a visually hidden table inside the figure lists every hour with its count, under a caption that names the chart. The three figures are a description list with the same numbers as text, and the busiest hour is also in the centre of the dial.

The block names Discord in text and ships no logo, colour or wordmark. Discord's tile is a neutral lettermark, Di 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. The pair is hidden from assistive technology because the heading already names both products.

The dial keeps its own left-to-right orientation in any layout, because time runs clockwise from midnight whatever the page's direction; the labels and figures around it follow the page. The dial scales down to a square that fits 320 pixels and sits above the figures below lg. The header and the figures fade up once on load with CSS transitions; with reduced motion they simply appear. The block has no state.