Heatmap
A calendar or matrix heatmap (GitHub contributions style) that accepts data via the data property or attribute and renders intensity buckets using design tokens.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type | string | calendar | Display mode: calendar or matrix |
weeks | number | 53 | Number of week columns to render in calendar mode |
end | string | — | End date (YYYY-MM-DD) for calendar mode; defaults to today |
data | string | — | JSON data: {YYYY-MM-DD: count} map for calendar or 2D number array for matrix |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/heatmap.js"></script>import "./pura/lib/heatmap.js";