Activity heatmap
When the agent and the team were busy, by day and hour.
An activity heatmap shows when something is busy, as a 7×24 grid of cells — one a day down, one
an hour across — each tinted from the accent by its value. Pass one or more series; each is 168
values from 0 to 1 (Monday 12am first), with a max and unit for the tips and an optional
note. With two or more series a switch appears, and picking one sweeps it in as a wave from the
top left. In a narrow card the grid shows half the day at a time in bigger cells and scrolls
sideways, starting at the latest hours.
Usage
<!-- include core.css + activity-heatmap.css + activity-heatmap.js -->
<div class="hmx panel" data-c="activity-heatmap">
<div class="hmx-h">
<div><b>Activity</b><span class="muted hmx-st">Last 4 weeks</span></div>
<div class="seg2 hmx-sg" role="group" aria-label="Who">
<button aria-pressed="true" data-v="agent">Agent</button>
<button aria-pressed="false" data-v="team">Team</button>
</div>
</div>
<div class="hmx-wrap"><div class="hmx-sc">
<div class="hmx-days muted"><span>Mon</span><span></span><span>Wed</span><span></span><span>Fri</span><span></span><span>Sun</span></div>
<div class="hmx-grid"><!-- 168 cells filled in by the script --></div>
<div class="hmx-f muted"><span class="hmx-ax">12am</span><!-- ... --></div>
</div></div>
<div class="hmx-lg muted">Less<i style="--dm-a:.08"></i><i style="--dm-a:.85"></i>More</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
series | ActivityHeatmapSeries[] | One or more series; the switch shows when there are two or more. |
value | string | The series on show, by key. Leave it out to let the switch pick it. |
defaultValue | string | The series shown first when uncontrolled. Defaults to the first series. |
onValueChange | (key) => void | Called when the switch picks a series. |
title | string | Header text. Defaults to Activity. |
period | string | The line under the title before the cells fill in, and when a series has no note. Defaults to Last 4 weeks. |
series[].key | string | Identifies the series, used by value / defaultValue. |
series[].label | string | The switch label, like Agent. |
series[].values | number[] | 168 values from 0 to 1, one an hour, Monday 12am first. |
series[].max | number | What a full cell counts, for the tips, like 40. |
series[].unit | string | What it counts, for the tips, like runs. |
series[].note | string | The line under the title while this series shows. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a surface, and each cell is a mix of the accent into the chip by its value — so the whole
grid shifts with the theme's accent and the empty cells read against the surface. In Soft the card
and cells are a touch rounder.