Shared-Scale Week Comparison Stats Block for React

Edit THIS_WEEK and LAST_WEEK at the top of the file, seven visit counts from Monday to Sunday. The totals, the percent on last week, the shared scale and both lines are read from those arrays. DAYS names the seven points under the lines.

Each line is scaled from the same low and high, the quietest and busiest day in either week, into one box. A day at the top of this week's line is as busy as a day at the top of last week's, which is the comparison. The note under the header states that range in words. This week is the solid two-pixel line; last week is a lighter dashed line with a hollow end dot.

The weeks differ by weight and by a dash, not by a palette colour, so the block stays correct in every theme and still reads without colour. The note says which line is last week. The direction of the week is a percent in the header, with a sign, not a green or red stroke.

Yes. Each sparkline is an image whose name gives the week's total, its lowest and highest day, and the shared scale. The day names and the axis figures are written out beside the drawing. The charts run from the start of the week to the end in every language: the box is dir="ltr". Totals sit in bdi elements and roll visually; a screen reader hears the final total immediately.

The two halves stack. This week, with the header, comes first; last week, with the note about the shared scale, follows. The divider between them becomes a top rule. Nothing scrolls sideways at 320 pixels.

The header fades up once when the page loads, and this week's line draws from the start of the week to the end with a CSS clip-path transition. Last week's line is already drawn, since it can sit below the fold on a phone. With reduced motion the transitions are off and both lines simply appear.