Primitives

HabitHeatmap

Contribution-style heatmap. Intensity is derived from the values, so it needs no colour configuration.

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Code

A recipe is a composition of primitives, not one element — so there is no single snippet to copy. Build it from the classes below, or open the primitives it is made of.

Demo.tsx

import { HabitHeatmap } from '@ilomee/aura-react';

// 13 weeks of activity. Intensity is derived from the values — no colour config.
const VALUES = Array.from({ length: 13 * 7 }, (_, i) => (i * 7 + (i % 5) * 3) % 9);

export default function Demo() {
  return <HabitHeatmap values={VALUES} weeks={13} cellLabel="commit" />;
}

Demo.vue

<HabitHeatmap :values="values" :weeks="13" cell-label="commit" />

Demo.svelte

<HabitHeatmap {values} weeks={13} cellLabel="commit" />

Used as aura-habit-heatmap.

demo.component.ts

<aura-habit-heatmap [values]="values" [weeks]="13" cellLabel="commit" />

Exported from the package root, like everything else in this package.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	Defaults to the largest value.
cellLabel	`string`	`'value'`	Noun used in each cell’s accessible label.

Name	Type	Default	Notes
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	Defaults to the largest value.
cellLabel	`string`	`'value'`	Noun used in each cell’s accessible label.

Name	Type	Default	Notes
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	Defaults to the largest value.
cellLabel	`string`	`'value'`	Noun used in each cell’s accessible label.

Name	Type	Default	Notes
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	Defaults to the largest value.
cellLabel	`string`	`'value'`	Noun used in each cell’s accessible label.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-heatmap	base	Required. A modifier does nothing without it.
.aura-heatmap__cell	element