Activity Heatmap
Weekday by hour heatmap of workspace events with intensity cells, a Less to More legend, and peak and quiet window callouts.
Weekday by hour heatmap of workspace events with intensity cells, a Less to More legend, and peak and quiet window callouts.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Activity Heatmap is the when-is-the-workspace-busy view: weekday rows read against twelve hour columns where each cell's intensity shows how much happened in that window, with a Less to More legend and callout rows naming the peak and quietest stretches. Cells are plain divs stepped through foreground opacity, so the grid needs no chart library and reads cleanly in both themes.
Each day is one row with a levels array, and every value indexes a foreground opacity class from bg-foreground/5 up to bg-foreground/80. The hour label array marks every third column, the two window callouts summarize the peak and quiet times, and the footer states the event count the grid was built from.
Reach for this block on a workspace analytics or admin overview page, wired to your events grouped by weekday and hour. The Last 30 days button drives the range, and the window callouts should recompute from the same buckets.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace activity rhythm. Other heatmap reads:
Tip: the two callouts do the interpreting; a heatmap shows the shape, the peak and quiet lines say what to do about it.