shadcn.io is not affiliated with official shadcn/ui
Hourly Matrix Heatmap Stats Block for React
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 Base 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.
Related
- Pro
Day-Scaled Strips Heatmap Stats
HeatmapsSeven rows, one per weekday, each a strip of 24 hourly squares scaled to that day's own peak, with its total and its peak hour, in cells whose lines run past their corners.
- Pro
Activity Streak Stats
HeatmapsA 26-week contribution grid of daily lessons with month labels, a Less to More key and a band of three counters for the current streak, the longest streak and the active days.
- Pro
Legend Filter Heatmap Stats
HeatmapsA twelve-week by seven-day commit heatmap whose five-step legend is a set of toggles: choosing a level keeps only those days at full strength, outlines the rest and counts the days.
- Pro
Calendar Month Heatmap Stats
HeatmapsA six-week calendar of square cells showing each day's date and meeting hours in five foreground steps, beside the month's total, busiest day, quietest weekdays and weekday average.
- Pro
Heatmap Density Grid Features
Metrics and chartsA 24 by 12 traffic density grid in a framed figure with a legend, three numbered callout cells, and the callouts described beside it, for a traffic observability tool.
- Pro
Distribution Card Histogram Stats
DistributionsA response-time histogram of ten 50 ms buckets with a smoothed density curve over them, a solid median line and a dashed mean line, and a band of three figures under it: mean, median and 90th percentile.