Month Contribution Heatmap Features Block for React

Replace the three entries of SPECS: each one names a series (label, noun) and shapes its days (seed, busiest, idle, weekend, lull). The days are drawn by a small number generator from the seed, so the calendar is the same on the server and in the browser. To use real data, return your own array of 179 daily counts from daysOf (26 weeks, the last one ending on a Thursday, or change LAST_DAY); every other figure is counted from it.

A streak is a run of days with any work. A quiet Saturday or Sunday doesn't break it, a quiet weekday does. The current streak is the run that ends on the last day of the calendar, and the longest is the best run in the 26 weeks. They are counted by streaksOf, so they always agree with the squares.

A day's step is its share of the busiest day in that series: none is its own step, then four equal quarters. The steps are the foreground colour at rising opacity, so the calendar reads in any theme, light or dark, and the legend uses the same classes.

The squares are decoration, so the calendar is one image whose label is a summary: the total, the active days, both streaks and the busiest week. A table of the months' totals is there for screen readers, and a polite status line repeats the summary when you press a toggle button. The three highlights are real headings and sentences.

The 26 columns share the width, so the squares shrink to about 10 pixels, the weekday labels are dropped and the month names show every third month. The three figures sit side by side under the calendar and the highlights stack, one per row. Nothing scrolls sideways at 320 pixels.

The calendar stays left to right in every language, because time does: the earliest week is at the start in an English page and so it is in an Arabic one. The header, the toggle, the figures and the highlights follow the page's direction, and the numbers are wrapped so they don't reorder.