Heatmap Stat Card
Activity heatmap card with a CSS grid of cells shaded by foreground opacity across hours and days, no chart lib.
Activity heatmap card with a CSS grid of cells shaded by foreground opacity across hours and days, no chart lib.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Heatmap Stat Card shows API call activity across the last 14 days by hour, a CSS grid of cells shaded in six foreground opacity steps from bg-foreground/5 (quietest) to bg-foreground/80 (busiest), with hour labels 9am through 6pm on the left axis and abbreviated day labels Mon through Sun repeating across the bottom. The headline in the top-right is 1.24M total calls. No chart lib, no green scale; the card reads correctly in both light and dark theme.
Cells are built from a deterministic heat function so the grid is stable on every render without importing data. The legend below the grid pairs Less and More labels with the six opacity swatches.
Reach for this block on a developer dashboard or API usage panel where peak hours matter as much as the daily total, wired to your hourly bucketed call counts.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the API call activity heatmap. Other heatmap subjects:
Tip: pair the heatmap with a line chart for the same window; the heatmap shows when, the line shows trend.