Примитивы

HabitHeatmap

Тепловая карта в стиле карты вкладов. Интенсивность выводится из самих значений, настраивать цвета не нужно.

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Код

Рецепт — это композиция примитивов, а не один элемент, поэтому единого сниппета нет. Соберите его из классов ниже или откройте примитивы, из которых он состоит.

Demo.tsx

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

// 13 недель активности. Насыщенность выводится из самих значений — никакой настройки цвета.
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" />

Используется как aura-habit-heatmap.

demo.component.ts

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

Экспортируется из корня пакета, как и всё остальное здесь.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	По умолчанию — наибольшее из значений.
cellLabel	`string`	`'value'`	Существительное для доступной подписи ячейки.

Имя	Тип	По умолчанию	Примечания
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	По умолчанию — наибольшее из значений.
cellLabel	`string`	`'value'`	Существительное для доступной подписи ячейки.

Имя	Тип	По умолчанию	Примечания
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	По умолчанию — наибольшее из значений.
cellLabel	`string`	`'value'`	Существительное для доступной подписи ячейки.

Имя	Тип	По умолчанию	Примечания
values	`number[] \| null`	—
weeks	`number`	`13`
max	`number`	—	По умолчанию — наибольшее из значений.
cellLabel	`string`	`'value'`	Существительное для доступной подписи ячейки.

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-heatmap	база	Обязательный. Без него модификатор не работает.
.aura-heatmap__cell	элемент