shadcn.io is not affiliated with official shadcn/ui
Hourly Matrix Heatmap Stats Block for Ark UI
A seven-day by 24-hour matrix of tiny squares in five foreground steps, with 00, 06, 12 and 18 hour markers, an outlined busiest hour and a readout in the frame's foot.
Installation
Overview
A footfall matrix for React with Ark UI. A centred header names the busiest hour, "The busiest hour is Saturday at 20:00", and a full-width frame holds the matrix: seven day rows by 24 hour columns, each tiny square one hour of one day of a typical week, shaded in five solid steps of your theme's foreground colour by its share of the busiest hour. The hours 00, 06, 12 and 18 are marked above the columns, the busiest hour is outlined and the frame's foot reads it out beside a Fewer / More key. Every count comes from one function of the day and the hour, so the squares, the headline and the readout agree. The matrix is one image with a summary and an unseen table of every hour's guests. On a phone it is the same matrix with smaller squares, about 9 pixels wide at 320. For restaurant traffic, support queues, server load and any week-by-hour pattern.
FAQ
How do I use my own counts?
Replace guestsOf(day, hour) with a lookup into your own 7 by 24 table of counts, or edit DAYS (a factor per day) and the two bump calls (a lunch and a dinner peak). The peak, the steps, the headline, the readout and the table for screen readers are computed from the grid, so nothing else needs editing.
How are the steps chosen?
Each square's step is its share of the busiest hour in the whole week: under 8%, 28%, 55%, 80% and above. All seven rows share one scale, so a quiet Monday looks quiet next to a busy Saturday. The steps are solid mixes of the foreground colour into the card; for a scale per day, see the weekly strips block.
What does the outline mean?
It is the single busiest hour of the week, read out in the frame's foot with its day, time and count. If two hours tie, the first in reading order (Monday to Sunday, 00 to 23) is outlined.
Is it accessible?
The matrix is one image with a text summary, and an unseen table with a row per day and a column per hour gives every count, so no number depends on shade. The outline is a ring, not a colour, and the readout is plain text. The matrix is forced left to right so hours run from the start of the line in every language.