Charts B

Heatmap

Intensity per day in a grid, with week, month and year tabs.

data-u="heatmap"Family B

Example

Heatmap

Grid of rounded cells in five accent levels. The tabs switch the granularity with a transition and each cell has a hover tip.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="heatmap" data-u-props="{&quot;label&quot;:&quot;Commits this year&quot;,&quot;noun&quot;:&quot;commits&quot;,&quot;periods&quot;:[{&quot;label&quot;:&quot;This year&quot;,&quot;total&quot;:1312,&quot;delta&quot;:9.2,&quot;seed&quot;:7,&quot;stats&quot;:[{&quot;v&quot;:&quot;41 days&quot;,&quot;l&quot;:&quot;Longest streak&quot;},{&quot;v&quot;:&quot;28&quot;,&quot;l&quot;:&quot;Commits on the best day&quot;},{&quot;v&quot;:&quot;6h 12m&quot;,&quot;l&quot;:&quot;Longest session&quot;},{&quot;v&quot;:&quot;186&quot;,&quot;l&quot;:&quot;Merged pull requests&quot;}]},{&quot;label&quot;:&quot;Last year&quot;,&quot;total&quot;:1203,&quot;delta&quot;:3.1,&quot;seed&quot;:19,&quot;stats&quot;:[{&quot;v&quot;:&quot;33 days&quot;,&quot;l&quot;:&quot;Longest streak&quot;},{&quot;v&quot;:&quot;24&quot;,&quot;l&quot;:&quot;Commits on the best day&quot;},{&quot;v&quot;:&quot;5h 40m&quot;,&quot;l&quot;:&quot;Longest session&quot;},{&quot;v&quot;:&quot;161&quot;,&quot;l&quot;:&quot;Merged pull requests&quot;}]},{&quot;label&quot;:&quot;Two years ago&quot;,&quot;total&quot;:1046,&quot;delta&quot;:-2.4,&quot;seed&quot;:31,&quot;stats&quot;:[{&quot;v&quot;:&quot;27 days&quot;,&quot;l&quot;:&quot;Longest streak&quot;},{&quot;v&quot;:&quot;19&quot;,&quot;l&quot;:&quot;Commits on the best day&quot;},{&quot;v&quot;:&quot;4h 55m&quot;,&quot;l&quot;:&quot;Longest session&quot;},{&quot;v&quot;:&quot;132&quot;,&quot;l&quot;:&quot;Merged pull requests&quot;}]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Heatmap</h3>
    <p>Grid of rounded cells in five accent levels. The tabs switch the granularity with a transition and each cell has a hover tip.</p>
  </div>
</article>

Installation

Just this chart, with the core and the tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add heatmap

Dependency Pulls in b-shell (shell for B charts). The installer downloads it and puts it in the right order.

The full card from the example, as HTML ready to paste:

curl -fsSL unslop.leallabs.dev/i | sh -s add chart-heatmap

Family B: shell u-chartb-card > the data-u with the u-chartb-panel class, then div.u-chartb-copy with h3 and p.

Props

They go in data-u-props, as JSON. Each item in periods becomes an option in the picker and the chart animates from the old data to the new.

Prop	Type	Default	What it does
`label`	string	no default	Small label at the top of the card.
`noun`	string	contributions	Word for the count.
`tabs`	array	`[Semanal, Mensal, Anual]`	Granularity tabs.
`tab`	number	0	Tab it opens on.
`activity`	string	no default	Title of the activity bar.
`periods`	array	no default	List of `{label, total, delta, seed, stats: [{v, l}`]}. The cells come from seed: it's a visual pattern, not per-day data. All with the same number of stats.
`period`	number	0	Index of the period that opens selected.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
tabs	`role="tablist"`, `role="tab"`, `aria-selected`	Weekly, Monthly and Yearly.
period list	`role="listbox"`, `role="option"`	Opens with `aria-expanded` and marks the option in `aria-selected`.
grid	`aria-hidden="true"`	The cells are decoration. Total and stats stay in text.

Keyboard

Key	Does
Left and right arrows	change the tab
Enter or Space	opens the period list
Up and down arrows	moves through the options
Esc	closes without changing
Tab	closes and moves focus on

Events and API

No public events. The period change happens inside the card.