shadcn.io is not affiliated with official shadcn/ui
Shared-Scale Week Comparison Stats Block for React Aria
A week-on-week traffic comparison with two sparklines drawn on one shared scale, so the two weeks can be compared by eye.
Installation
Overview
A week-on-week comparison for React with React Aria. Twinweek, a traffic report, splits the block in two. This week is at the start, with the header and a total; last week is at the end, with a note and its total. Each half draws a sparkline, and both lines use one scale, the quietest day to the busiest day across either week, so a higher line is a busier day and the weeks can be compared by eye. This week is a solid line; last week is lighter, thinner and dashed. On a phone the halves stack, this week first. Totals, the change and both lines are computed from the same daily visits. It's built from SlidingNumber, Guides and a hand-drawn SVG in your theme's foreground colour, with no chart library.
FAQ
How do I change the two weeks?
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.
Why do the lines share a scale?
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.
Why aren't the weeks two colours?
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.
Is the comparison accessible?
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.
How does it fit on a phone?
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.
What moves?
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.