shadcn.io is not affiliated with official shadcn/ui
Day-Scaled Strips Heatmap Stats Block for React
Seven 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.
Installation
Overview
A week of chat for React with Base UI. A start-aligned header compares the busiest and the quietest day, "Wednesday carries 1,131 messages, Sunday just 353", with a key at its end. Seven rows follow, one per day, each a cell whose lines run past its corners, a little apart. A row has the day and its total at the start, a strip of 24 squares for the hours, and the peak hour with its count at the end, and one axis of hours above the rows marks 00, 06, 12 and 18. Each strip is scaled to its own day's busiest hour (five solid steps of your theme's foreground colour), so a quiet Sunday still shows its shape instead of fading into the weekdays. Every figure is counted from per-day message curves at module scope, and an unseen table gives every hour's count. On a phone a row is the name and total, the strip at full width, then the peak. For chat, email, orders and any activity whose days differ in size.
FAQ
How do I use my own counts?
Replace messagesOf(day, hour) with a lookup into your own 7 by 24 counts, or edit the bumps of each day in DAYS (an hour, a width and a height per cluster of messages). The totals, peaks, steps, headline and table for screen readers are computed from the counts. The wobble is a seeded sequence, so every render agrees.
Why is each strip scaled to its own day?
So a day's shape is never lost to a bigger neighbour. A step is the square's share of that day's busiest hour, so every strip has a darkest square, and the peak column says how big that peak really is. If you want one shared scale instead, use the hourly matrix block.
Why do the rows have lines past their corners?
Each row is a cell drawn with the Guides component, whose lines run a little past the corners, with a + mark at the start. The rows sit a little apart so those lines never touch, and they stay inside the page rails.
Is it accessible?
Each row is a list item with a heading for the day, its total and its peak as text, and the strip is an image named with the day and its busiest hour. An unseen table lists every hour of every day. The strips are forced left to right so hours run from the start of the line in every language, and the numbers sit in bdi elements.
Related
- Pro
Hourly Matrix Heatmap Stats
HeatmapsA 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.
- 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
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
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
Horizon Chart Grid Stats
Area and lineSix regions of CDN throughput as 48 px horizon strips with three folded bands, a baseline, the current value and the change on an hour ago, and a key that explains how to read the bands.
- 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.