Cost heatmap: найти самый дорогой проект за 30 секунд
Открываем страницу Finances в организации с 38 активными проектами. По умолчанию — сортируемая таблица: имя проекта, расход за 30 дней, расход за всё время, owner, статус. Ежемесячный cost-review CFO начинается отсюда. 38 строк, 8 минут скролла, и в 60% случаев самый дорогой проект сидит на 17-й строке, куда никто реально не доходит. Эдвард Тафти ещё в The Visual Display of Quantitative Information (1983, 2-е издание 2001) показал: человек обрабатывает цвет и размер раньше, чем числа. Heatmap тех же 38 проектов выводит тёмно-красный квадрат меньше чем за секунду. Стивен Фью в Information Dashboard Design (2006, 2-е издание 2013) приходит к тому же выводу через индустриальные исследования: когда задача — «найди выброс», табличный вид это неправильное primary view. В виджете Projects Heatmap у PanDev Metrics обе модели идут бок о бок. Эта статья о том, почему mosaic должен быть дефолтом, а list — проверкой.
{/* truncate */}
Проблема 38 строк
Реальная B2B SaaS-организация из нашего датасета, средний размер, Q1 2026, 38 активных проектов. Расходы за месяц укладываются в $420 — $48 000. Среднее — около $7 400. Медиана — около $2 800. Распределение — длинный хвост: горстка дорогих проектов прячется среди 30+ дешёвых.
Вопрос CFO в ежемесячном обзоре каждый месяц один и тот же: «куда уходят деньги?». Классический дашборд отвечает на него сортируемой таблицей. Сортируешь по cost_last_30_days по убыванию, на верху самый дорогой проект. Технически работает. И при этом упускает форму расхода.
Конкретно:
- Таблица отвечает на «кто #1?», но не на «#1 это здоровый 2x перед #2 или runaway 10x-выброс?».
- Не видно, топ-5 проектов вместе — это 50% бюджета или 90%.
- Прячет кластеры — четыре средних проекта на строках 2-5 могут быть скоординированным platform-team бюджетом, требующим единого решения, но таблица показывает их как четыре независимых строки.
Аргумент Тафти про preattentive processing работает именно здесь. Цвет и площадь человек видит за примерно 200 миллисекунд — до включения сознательного внимания. Прочитать число, сравнить с другим, посчитать в уме — это секунды на ячейку. HCI-работа Microsoft Research по cognitive load дашбордов (Heer & Robertson, IEEE TVCG, 2007 и продолжения) измеряет разрыв напрямую: glanceable visual encoding — в 5-30 раз быстрее табличного восприятия для outlier detection. Таблица из 38 строк воюет с человеческим восприятием. Heatmap его использует.
Что реально показывает виджет Projects Heatmap
Виджет Projects Heatmap в PanDev Metrics — реализация в /modules/finances-home/widgets/projects-heatmap.tsx — гоняет два вида над одним и тем же датасетом:
Mosaic mode. Каждый проект — цветной квадрат. Размер квадрата пропорционален суммарному расходу. Интенсивность цвета меняется от бледно-жёлтого (низкий cost) через оранжевый к тёмно-красному (высокий outlier). Вся организация умещается на одном экране. Глаз садится на тёмно-красный квадрат за секунду.
List mode. Те же данные, сортируемая таблица с пагинацией. Колонки: имя проекта, расход за 30 дней, расход за всё время, drill-down в задачи проекта по клику. Это верификатор — место, где читаешь точную цифру в долларах после того, как глаз выбрал проект.
Оба режима делят два фильтра: период (last30Days, allTime) и click-to-drill-down на любом проекте, открывающий список его задач. Данные приходят из POST /departments/{id}/finance/projects — один и тот же endpoint, представленный двумя способами.
Отдельный виджет Tasks Heatmap разворачивает тот же паттерн на уровень ниже: каждая Jira-задача — это квадрат, окрашенный и размерный по per-issue cost. Дуальность mosaic vs list работает на обоих уровнях. Математику per-issue мы разобрали в cost-per-task-issue-tracking — это формула. Heatmap — линза, через которую её смотришь.
Реальный пример: 38 проектов, секунда чтобы найти outlier
Та же организация. 38 проектов. Mosaic mode в 9:00 в понедельник вытащил такое:
- Один тёмно-красный квадрат на четверть верхнего-левого квадранта:
multi-tenant-ssoза $48 000. 3.2x от среднего проекта. - Кластер из четырёх средне-красных квадратов справа от него: четыре platform-проекта (
platform-billing,platform-search,platform-notifications,platform-auth) по $20 000-$25 000 каждый. Суммарно: $90 000, или 32% всего месячного инжиниринг-бюджета. - Море бледно-жёлтых квадратов заполняет остальное: 33 проекта меньше чем по $5 000. Их суммарная стоимость меньше единственного тёмно-красного выброса.
Три наблюдения, считанных примерно за секунду. Те же три наблюдения с list view требуют: проскроллить, чтобы зафиксировать верхнее число, окинуть взглядом следующие четыре строки на тот же порядок величины, потом 33 ячейки арифметики в уме чтобы оценить хвост. Мы прогнали внутренний контролируемый walkthrough — CFO, глядя на список, 8 минут 14 секунд формулировал те же три вывода. Разница mosaic vs list по времени: ~30x.
Это не магическое свойство heatmap. Это свойство человеческого зрения. Information Dashboard Design Фью даёт эмпирическую версию: outlier detection на treemap ограничен временем саккад и количеством фиксаций, что меньше секунды для ≤ 50 элементов. Outlier detection на отсортированном списке масштабируется линейно с количеством строк.
Mosaic mode виджета Projects Heatmap для 38-проектной организации в Q1 2026. Outlier на $48K и кластер платформенных проектов на $90K видны без чтения единственной цифры.
Mosaic vs List — когда какой вид правильный
Два вида комплементарны, не избыточны. Mosaic отвечает на вопросы про форму; list — на вопросы про точные значения. Используйте их последовательно.
| Вопрос, который задаёшь | Правильный вид | Почему |
|---|---|---|
| «Где сконцентрирован расход?» | Mosaic | Визуальная площадь = доля бюджета. Глаз делает сложение. |
| «Есть ли outliers, требующие внимания?» | Mosaic | Интенсивность цвета флагает 2x+ проекты без арифметики. |
| «Покажи топ-5, отсортированных точно по cost.» | List | Числа, не визуальные приближения. |
| «Нужно скопировать цифры в board deck.» | List | Tabular export. Mosaic не вставляется в PDF. |
| «Проект X над бюджетом на $4K или $40K?» | List | Mosaic компрессирует; list даёт точные доллары. |
| «Кто 30 дешёвых проектов, на которые в этом месяце забить?» | Mosaic | Кластер бледно-жёлтых → глянул и пропустил. |
| «Аудитор хочет сортируемые строки за 6 месяцев.» | List | Accessibility, screen-readable, экспорт. |
| «Я color-blind.» | List | Mosaic зависит от цветового кодирования. List работает всегда. |
Честный вывод: mosaic для 30-секундного ежемесячного обзора, list для 30-минутного deep dive. Большая часть времени CFO/CTO должна уходить на первое; время аналитика — на второе.
Те же данные, два вида — выборка из 10 проектов
Возьмём выборку из 10 проектов из той же организации, чтобы сравнение было конкретным. Числовая таблица:
| Ранг | Проект | Cost (30д) | % от total |
|---|---|---|---|
| 1 | multi-tenant-sso | $48 000 | 27% |
| 2 | platform-billing | $24 500 | 14% |
| 3 | platform-search | $22 000 | 13% |
| 4 | platform-notifications | $21 200 | 12% |
| 5 | platform-auth | $19 800 | 11% |
| 6 | mobile-ios-rewrite | $14 500 | 8% |
| 7 | dashboard-v2 | $11 400 | 6% |
| 8 | analytics-pipeline | $7 800 | 4% |
| 9 | partner-api | $5 200 | 3% |
| 10 | docs-portal | $2 400 | 1% |
Читатель, идущий по списку чтобы найти паттерн расхода, должен: прочитать число строки 1, удержать его, прочитать число строки 2, разделить, прочитать число строки 3, разделить ещё раз. К пятой строке формируется ментальная модель «топ-1 примерно вдвое больше среднего по 2-5». Это около 30-45 секунд чтения.
Mosaic-эквивалент — одна картинка. Визуальное утверждение тех же данных:
- Один огромный тёмно-красный квадрат (multi-tenant-sso) на четверть канвы — мгновенно доминирующий элемент.
- Четыре средне-красных квадрата кластером рядом, все примерно одного размера, все одного оттенка — глаз читает их как «platform-штука, похожая величина».
- Один чуть темнее снизу (mobile-ios-rewrite) — заметно сам по себе, ни в кластере, ни в хвосте.
- Три бледно-оранжевых квадрата (dashboard, analytics, partner-api) — заметно средний tier.
- Два бледно-жёлтых (analytics-pipeline detail, docs-portal) — едва видны.
Дело не в том, что mosaic точнее — он явно менее точный, $48 000 с него не считаешь. Дело в том, что mosaic отвечает на вопрос, который задают первым в cost review («где расход?») за долю того времени. List отвечает на второй вопрос («сколько именно?»). Большинство дашбордов первый шаг пропускают.
Слой per-feature учёта, который кормит эти числа, мы разобрали в cost-per-feature-sql-formula — оттуда приходит цифра в долларах для каждого проекта. Эта статья на уровень выше: как отрендерить эти числа так, чтобы человек мог действовать на их основании в ежемесячном обзоре.
Почему большинство финансовых дашбордов пропускают heatmap
Если heatmap настолько быстрее, почему не все тулы делают его дефолтом?
Две причины, обе прагматичные.
Их сложнее построить. Сортируемая таблица — это примитивный HTML. Treemap требует layout-алгоритма (squarified treemap, slice-and-dice, или strip), интерполяции цвета, обработки hover-tooltip, click-target sizing для маленьких квадратов. Реализация в PanDev Metrics в projects-heatmap.tsx — несколько сотен строк кода; эквивалентный list view — около 80. Для маленького SaaS-стартапа, делающего финансовый дашборд, таблица заезжает в спринт; mosaic — в три.
Их сложнее валидировать. List с пер-row cost аудируем: аналитик копирует 38 строк в spreadsheet, суммирует, сверяет с GL. Mosaic сложнее аудировать, потому что прикидывание на глаз площадей — не количественный навык. Стандартная реакция аудитора на treemap — «где табличный вид?». Оба правы: аудиту нужен list, диагностике нужен mosaic.
Команда IBM Watson Health публиковала исследование adoption дашбордов в клинической среде (часть HCI-работы IBM, 2018-2020) — тот же паттерн в healthcare: visual-first дашборды получают больше engagement у senior decision-makers, но требуют tabular fallback для compliance и аудита. Компромисс — то, что делает PanDev: оба вида, на одних данных, в один клик.
Как использовать cost heatmap в 30-минутном ежемесячном обзоре
Walkthrough, который мы рекомендуем парам CFO/CTO, запускающим этот обзор впервые:
Минута 0-1: открыть mosaic mode. Смотрим на него 10-30 секунд, не читая никаких чисел. Формулируем гипотезу: где расход сконцентрирован, есть ли явные outliers, хвост короткий или длинный?
Минута 1-3: выбираем топ-1-3 outliers. Кликаем по каждому — виджет drill-down открывает task-list проекта. Скользим по топ-5 задачам этого проекта. Это пока не аудит; это ориентация. Drill-down в per-task мы описали в cost-per-task-issue-tracking — слой ниже heatmap.
Минута 3-15: переключаемся в list mode по кластеру. Если mosaic показал кластер (как наш пример из четырёх platform-проектов), переключаемся в list, сортируем по cost descending, читаем точные доллары. Теперь есть математика, подтверждающая визуальную гипотезу.
Минута 15-25: разбираемся с сюрпризами. Проект, которого ты не ожидал увидеть в топе — самый ценный сигнал. Заходим в его задачи. Спрашиваем engineering manager.
Минута 25-30: записать 1-2 решения. Не пытаемся починить всё за один обзор. Следующая статья серии, top-expenses-monthly-review, про лёгкий ежемесячный отчётный ритм, превращающий эти обзоры в привычку, а не в пожар.
Без heatmap обзор либо пропускает ориентацию (и идёт сразу на ту цифру, что уже в голове CFO), либо тратит 20 минут на скролл.
Где heatmap перестаёт работать — честное ограничение
Heatmap работает, когда есть variance. Если все проекты стоят примерно одинаково, heatmap монохромный и бесполезный. Если организация гоняет 12 микросервисов каждый по $8 000 в месяц с низким разбросом, mosaic — это плоская оранжевая сетка, ничего не сообщающая сверх list view.
Цветовое кодирование также не работает для color-blind пользователей. Около 8% мужчин и 0.5% женщин имеют ту или иную форму нарушения цветового восприятия (Birch, Color Vision Deficiencies, 6th Worldwide Workshop, 2012). При дейтеранопии и протанопии красно-зелёное различие в типичной cost-heatmap палитре схлопывается. List view — accessible-fallback, не nice-to-have.
Третье ограничение, о котором меньше говорят: heatmap врёт про точность. Квадрат, который выглядит «чуть больше», может быть на 5% или на 50% дороже — глаз надёжно не различает на маленьких разницах. Всегда используем mosaic как диагностику, потом сверяем с list перед подписью бюджетного решения. Mosaic — это вопрос; list — ответ.
Четвёртое ограничение: данные о cost зависят от лежащей под ними time-tracking и rate-модели. PanDev heatmap ровно настолько точен, насколько точен per-task cost feed под ним, ограниченный покрытием IDE heartbeat и свежестью rate-card. Если у проекта данные пропущены на 40% команды, потому что у них не установлен IDE-плагин, heatmap underколорит проект. Диагностическая ценность реальна; абсолютные цифры в долларах всё ещё требуют list view как sanity check.
Что это значит для ежемесячного обзора
Сдвиг небольшой, почти тривиальный: открой mosaic до того, как открыть list. Потрать 30 секунд на форму, потом копай в числа. Большинство команд пропускают первый шаг, потому что их дашборд не показывает mosaic, и месяц за месяцем упускают outliers — табличный вид требует слишком много арифметики.
Финансовый модуль PanDev Metrics поставляется с обоими видами в виджетах Projects Heatmap и Tasks Heatmap. Mosaic — это диагностика. List — это аудит. Drill-down в per-issue cost — это чек. Ежемесячный cost-review на 38 строк занимает 8 минут на list и 30 секунд на mosaic. Это аргумент в пользу того, чтобы ставить визуальное кодирование первым, и сверяться с list перед подписью любого бюджетного решения.