Создание календарной диаграммы тепловых карт (например, Github Contributions) в ReactJS

Диаграмма тепловой карты представляет некоторые данные в табличном формате с определенными цветовыми диапазонами, такими как низкий, средний и высокий. Как правило, это вариант традиционной тепловой карты, где данные находятся в календаре (обычно месяц в столбце и дни недели в строке, каждая точка данных — дата), а цветовое кодирование отображается с использованием метрики по вашему собственному интересу, которая обычно варьируется в зависимости от день.

Если вы захотите внедрить такую ​​диаграмму в свой проект ReactJS, мы покажем вам, как вы можете добиться этого с помощью компонента «Тепловая карта календаря React».

1. Установите React Calendar Heatmap

Тепловая карта React Calendar позволяет встроить компонент тепловой карты календаря svg, вдохновленный графиком вклада github. Компонент расширяется до размера контейнера и является суперконфигурируемым.

Чтобы установить этот компонент в свой проект, откройте новый терминал, перейдите в каталог вашего проекта и установите, выполнив следующую команду:

npm install react-calendar-heatmap

После установки вы сможете импортировать компонент в свой код с помощью react-calendar-heatmap, Для получения дополнительной информации об этом компоненте, не забудьте посетить его официальный репозиторий на Github здесь.

2. Добавить таблицу стилей по умолчанию

На втором этапе вам нужно загрузить основную структуру CSS, которая предоставит компоненту структуру тепловых карт. Вы можете использовать бесплатный CDN:

Или скачать копия файла styles.css из хранилища и добавить его в свой проект с помощью JS (через импорт) или с помощью тег.

Изменение цветов тепловой карты

Чтобы определить ваши цвета для тепловой карты, необходимо добавить дополнительный CSS либо загрузив новый файл CSS, либо просто создав блок стиля в своем HTML-шаблоне. Всего 4 правила, которые определяют цвет каждой шкалы:

.react-calendar-heatmap .color-scale-1 {
fill: #d6e685;
}
.react-calendar-heatmap .color-scale-2 {
fill: #8cc665;
}
.react-calendar-heatmap .color-scale-3 {
fill: #44a340;
}
.react-calendar-heatmap .color-scale-4 {
fill: #1e6823;
}

3. Реализация вашей первой тепловой карты

Наконец, все, что вам нужно сделать, чтобы включить тепловую карту в ваше представление, — это импортировать компонент и предоставить необходимые свойства для его инициализации. Как базовый пункт, вы должны предоставить данные, которые будут отображаться, эти данные должны храниться в массиве, и каждый раз это литеральный объект с единственным свойством, а именно date. Эта дата как строка должна быть в состоянии интерпретироваться классом Date в JavaScript и свойством count, которое указывает количество элементов в дате. Также вам нужно указать количество дней, которое будет отображаться на графике, в этом случае мы будем отображать целый год (365 дней). Как уже упоминалось, диаграмма расширяется, чтобы соответствовать родительскому контейнеру, поэтому мы обернем ее в div шириной 700px:

import React from 'react';
// Import the calendarheatmap
import CalendarHeatmap from 'react-calendar-heatmap';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// Some dates to render in the heatmap
values: [
{ date: '2016-01-01', count: 4 },
{ date: '2016-01-22', count: 1 },
{ date: '2016-01-30', count: 3 },
{ date: new Date(2016, 0, 4)}
],
// How many days should be shown
numDays: 365
}
this.onClick = this.onClick.bind(this);
}
onClick(value) {
console.log(value);
}
render() {
return (
);
}
}

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

function getDummyDates(from, to, numberDates) {
numberDates = numberDates || 50;
let result = [];
for(let i = 0; i < numberDates;i++){
result.push(
{
date: new Date(from.getTime() + Math.random() * (to.getTime() - from.getTime())),
count: Math.floor(Math.random() * 6)
}
);
}
return result;
}
this.state = {
// Some dates to render in the heatmap
values: getDummyDates(new Date(2016, 0, 1), new Date(2017, 2, 1), 500),
// How many days should be shown
numDays: 365
};

График результатов будет что-то вроде: