Архив: Heat map та tree map

Описание

Створити графік який буде поєднувати в собі heat map та tree map з ієрархією, але не більше 3 рівнів: графік представляє собою набір прямокутників площа яких віповідає значенню показнику value_x, а колір значенню показнику value_y. Кожен такий прямокутник може містити в собі дочірні елементи які являють собою такі самі прямокутники.

Дані для графіку будуть змінюватися кожні 15 секунд - графік має швидко рендериться.

Графік має генерувати наступні події з передачею інформації про прямокинк взаємодія з яким відбувається:

# click;

# mouse enter;

# mouse leave;

# touch.

Наведення мишки на дочірній прямокутник має змінювати оформлення батьківського елементу (hover effect). Реалізувати за допомогою оброблення mouse enter/mouse leave - це дасть змогу одночасно кастамізувати ефект.

Графік має масштабуватися - параметр який відповідає за масштаб з можливістю зміни масштабу динамічно.

Графік має бути responsive.

Може розміщуватися декілька екземплярів графіків на одній сторінці.



Вхідні данні:



interface Item {

title: string;

xValue: number;

yValue: number;

xValueShow: string | number;

yValueShow: string | number;

extra: any;

children: Item[];

};



Вхідні данні - масив екземплярів типу Item.



Приклад:

Дивись файл data.ts



Приклад рендеру:

// Рендер

Категория

Веб-программирование