Activity Streak Stats Block for React

Replace LESSONS near the top of the file with one number per day, oldest first, starting on a Monday: 182 numbers for 26 weeks (a day with no activity is 0). The streaks, the active days, the squares and the table for screen readers are all computed from it. FIRST_MONDAY sets the date of the first square, only to name the months above the grid; change WEEK_COUNT and PHONE_WEEKS to show a different span.

A streak is a run of days that each have at least one lesson. The longest streak is the longest run in the 26 weeks, and the current streak is the run that ends on the last day (zero if the last day has no lesson). The counter's second line names the week and weekday the current streak began, and the active days count every day with a lesson, out of all 182.

The steps are solid mixes of the foreground colour into the card, from almost nothing to the full foreground colour: no lessons, 1, 2, 3 to 4, and 5 or more. They are mixes, not transparency, so no line shows through, and they come from your theme, so they follow light and dark. The key under the grid shows the five in order and the caption says what each step counts.

The drawing is one image with a text summary (active days, the longest streak and the current one), and an unseen table lists the lessons of every day, a row per week, so no number depends on shade. The counters are a description list, the numbers sit in bdi elements and the grid is forced left to right, so months and weeks run from the start of the line in every language, including right-to-left pages.

The grid keeps the newest 12 weeks, so the squares stay big enough to tell apart at 320 pixels, and the month labels are recomputed for those weeks so the first one always carries a name. The key stays under the grid, and the three counters become rows with the label at the start and the number at the end. Nothing scrolls sideways.

The header and the grid fade up once on load, and each counter rolls up to its value once when it scrolls into view. With reduced motion the entrances are off and the numbers show their final values. The grid itself never animates.