Графики и данные
Тепловая карта онлайн
Тепловая карта показывает перекрёстную таблицу, где одна ячейка или группа ячеек выделяется на общем фоне. В Dele заливка идёт одной шкалой чернил, а главная ячейка получает коралловую выноску и не искажает шкалу остальных.
Когда использовать
- Доля упавших запросов по сервисам и спринтам
- Число тикетов по командам и неделям
- Матрица ошибок классификатора
- Нагрузка по дням недели и сменам
Как с ней работать в Dele
- Столбцы (columns) — 3–8 с короткими заголовками, строки (rows) — 3–7, в каждой по одному неотрицательному числу на столбец в порядке столбцов.
- Заливка — одна шкала оттенков: чем темнее, тем больше. Разных цветов по строкам и сине-красной шкалы для беззнаковых данных не будет.
- Выноски (callouts) ссылаются на строку и столбец по id и могут иметь короткую заметку до 14 символов. Акцентная выноска одна — ячейка из заголовка, не обязательно максимум.
- Акцентная ячейка исключается из шкалы, чтобы не обесцветить остальные; её значение укажите в сноске (footnote).
- Суффикс значений (unit), печать чисел в ячейках (showValues) и подписи измерений (rowAxis, colAxis) настраиваются отдельно.
- Не убирайте строки и столбцы ради чистого узора — исключения называются в сноске.
Три способа собрать диаграмму
Словами. Откройте ИИ-ассистента в редакторе или подключите своего агента по MCP и опишите задачу, например:
«Построй тепловую карту ошибок: сервисы auth, payments, search, catalog по спринтам S1–S6. Выдели payments в S4 — 47% ошибок.»
В редакторе. Создайте диаграмму из шаблона «Тепловая карта», меняйте элементы на холсте и в панели справа — раскладка пересчитывается сама.
Кодом. Диаграмма — это JSON-спецификация. Её можно править в панели «Спецификация», генерировать скриптом и хранить в git.
Спецификация примера (JSON)
{
"type": "heatmap",
"title": "Неделя, когда платежи потемнели",
"description": "Доля упавших сборок CI по пяти сервисам за шесть спринтов: у платежей в спринте S4 — 47% из-за регрессии деплоя, остальные ячейки 1–9%.",
"rowAxis": "Сервис",
"colAxis": "Спринт",
"unit": "%",
"columns": [
{
"id": "s1",
"label": "S1"
},
{
"id": "s2",
"label": "S2"
},
{
"id": "s3",
"label": "S3"
},
{
"id": "s4",
"label": "S4"
},
{
"id": "s5",
"label": "S5"
},
{
"id": "s6",
"label": "S6"
}
],
"rows": [
{
"id": "auth",
"label": "auth",
"values": [
4,
5,
6,
3,
2,
2
]
},
{
"id": "payments",
"label": "payments",
"values": [
3,
4,
5,
47,
6,
4
]
},
{
"id": "gateway",
"label": "api-gateway",
"values": [
2,
3,
4,
2,
1,
1
]
},
{
"id": "billing",
"label": "billing",
"values": [
5,
7,
9,
6,
4,
3
]
},
{
"id": "notifications",
"label": "notifications",
"values": [
1,
2,
2,
2,
1,
1
]
}
],
"callouts": [
{
"row": "payments",
"col": "s4",
"note": "регрессия",
"focal": true
}
],
"footnote": "Шкала без акцента: 1–9% · акцент — 47%, исправлено в S5",
"legendNote": "Учебные данные, не реальный реестр."
}Когда выбрать другой формат
- Тренд во времени по одному-двум рядам → Линейный график
- Сравнение нескольких точных чисел → Столбчатая диаграмма
- Оценка вариантов по общим критериям → Радар
Вопросы о формате
Почему главная ячейка не участвует в шкале цвета?
Один выброс растягивает шкалу, и остальные ячейки становятся почти белыми. Dele выделяет его кораллом отдельно, а шкала остаётся читаемой для остальной таблицы.
Сколько строк и столбцов помещается?
До 7 строк и до 8 столбцов. Для большей таблицы выберите срез по главному вопросу или разбейте её на несколько карт.