Визуализация метрик

1) Цели визуализации

Понять быстро: за 3–5 секунд распознать тренд/аномалию/сдвиг.
Сравнить корректно: периоды, сегменты, варианты A/B.
Поверить данным: показать неопределенность, источники, свежесть.
Действовать: рядом с графиком — CTA, фильтры, ссылки на плейбуки.

2) Типы метрик и лучшие формы

3) Шкалы, оси и агрегирование

Шкалы: линейная по умолчанию; логарифмическая — для кратных диапазонов; процентная — [0;100].
Нулевой базис: столбики — с нуля; линии — без требования нуля (но показывайте baseline).
Агрегирование: дневные/часовые/минутные, p50/p95/p99; избегайте среднего для «шумных» распределений.
Roll-up/Drill-down: кнопки «Д/Н/Ч» (день/неделя/час) и «↑/↓» по иерархии (регион→страна→город).
Выборка точек (downsampling): LTTB/MinMax для длинных рядов, чтобы не терять экстремумы.

4) Контекст и сравнения

Сравнение периодов: «Текущий vs Предыдущий» (overlay с пунктиром) и/или small multiples; подпишите относительную ∆ и абсолютную ∆.
Сезонность: фоновые полосы «выходные/праздники», теплые/холодные зоны по часам.
Бенчмарки: горизонтальные линии норм/целей (SLO/SLA), подпишите единицы и временной горизонт.
Интервалы доверия: полосы/ленты ±CI; для A/B — error bars и p-value/лифт.

5) Неопределенность, пропуски, ревизии

Пропуски: разрывайте линию (не соединяйте нулем); серые «туманы» для незавершенного окна.
Лаги данных: бейдж «данные отстают на 12 мин», tooltip с timestamp ingest.
Ревизии: тонкая штриховка участков «пересчитано», ссылка на changelog.

6) Цвет, форма и доступность (A11y)

Палитра: нейтральная база; красный — критично, оранжевый — предупреждение, зеленый — позитив.
Цвето-независимость: дублируйте значением/маркерами/подписями; контраст ≥ WCAG AA.
Количество рядов: ≤5 на один график; иначе — small multiples/фасетки.
Размеры/клики: интерактивные цели ≥ 32–40 px; фокус-кольца, клавиатурная навигация.

7) Подписываем правильно

Оси: единицы измерения, формат чисел (1 234,56; 12.3k; 5.2%); дата-метки с локалью.
Легенда: в порядке визуальной важности; кликабельная для включения/исключения рядов.
Аннотации: коротко и по делу («релиз PSP_X», «инцидент #4217»), с ссылкой на событие.

8) Интерактивность: не перегружать

Hover/Tooltip: компактные, с ключевыми полями и ∆ vs baseline.
Zoom/Brush: выделение диапазона мышью/клавиатурой; кнопка «Сбросить».
Drill-down: клик по сегменту → детальный разрез; breadcrumb для возврата.
Селекторы: пресеты диапазонов (24ч / 7д / 30д), фильтры сегментов, переключатель «Абс/Процент».

9) Шаблоны компонентов (пример API)

json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}

10) Производительность рендеринга

Агрегировать на сервере: возвращайте уже «правильные» окна/квантили.
Canvas/WebGL: для десятков тысяч точек и тепловых карт; SVG — для ≤2–3 тыс. элементов и четких подписей.
Виртуализация списков/таблиц: подгружать страницы по мере прокрутки.
Кэширование: горячие тайлы, precompute «вчера/неделя».

11) Достоверность и анти-паттерны

• Манипулировать шкалой (обрезать ось столбиков выше нуля).
• Смешивать разные единицы без вторичной оси и явных подписей.
• Строить «лес» stacked-area с 8–10 рядами.
• Подменять пропуски нулями.
• Использовать 3D/тенюшки ради «красоты».

12) Формулы, единицы и форматирование

Деньги: minor units/десятичные строки; явно указывать валюту.
Конверсии/доли: проценты с одной десятичной (при необходимости — p.p.).
Скорости/ставки: «в час/в день» — подпишите период.
Округление: до значимых разрядов, не скрывая порядок величин.

13) Специфика метрик качества и SLO

Показывайте error-budget burn (оставшийся % бюджета) и уровни предупреждений.
Для аптайма — stacked статус-бары «OK/Degraded/Down» + окна инцидентов.
Для latency — распределения (p50/p95/p99), «violin/boxplot» по кластерам/эндпоинтам.

14) Сторителлинг и авто-саммари

Narrative блок: 2–4 предложения «что произошло» + «почему» + «что сделать».
Слайды/экспорт: PDF/PNG/SVG с сохранением шрифтов и цветов; водяные знаки и дата среза.

15) Тест-план для визуализаций

Unit: формат осей, вычисление бинов, CI-ленты.
Integration: фильтры/диапазоны/локаль, drill-down и обратная навигация.
E2E: сценарий «от алерта к действию»: клик по аномалии → плейбук.
A11y/i18n: экранные читатели, клавиатура, перевод подписей.
Perf: рендер больших рядов, cold/warm cache, стресс на 10× точек.

16) Метрики качества визуализаций

Time-to-Insight (TTI): медиана времени до первого клика/понимания.
Explained Rate: доля графиков с доступным Explain.
Action Rate: где были выполнены действия из виджета.
Error/Noise: неверные подписи, жалобы пользователей.
Perf p95: время до первого контента и до интерактивности.

17) Чек-лист дизайна графика

• Правильный тип графика под задачу
• Ясные оси, единицы, формат чисел и дат
• Контекст: baseline/SLO, период сравнения, аннотации
• Показ пропусков/лагов/ревизий
• Цвета и контраст (WCAG), не больше 5 рядов
• Интерактивность без перегруза: hover, zoom, drill-down
• Производительность: агрегирование, downsampling, Canvas/WebGL при нужде
• CTA рядом: открыть отчет/плейбук/создать алерт
• Экспорт/шаринг с датой среза и параметрами фильтров

18) Встраивание в дашборды

Consistency-kit: единые токены (шрифты, размеры, палитры), единое поведение тултипов.
Шаблоны виджетов: KPI, timeseries, distribution, comparison, map, table.
Слоты для «умных» подсказок: бейдж «аномалия», объяснения драйверов, кнопки действий.

19) План внедрения (3 итерации)

• Типы графиков, единые шкалы/форматы, baseline/SLO, пропуски/лаг-бейджи, экспорт.

• Сравнения периодов, CI-ленты, small multiples, аномалии/бейджи, клавиатурная навигация.

• Downsampling/WebGL, Explain-панель, авто-саммари, пресеты дашбордов и CTA.

20) Мини-FAQ

Нужно ли всегда начинать ось Y с нуля?
Для столбиков — да. Для линий — не обязательно, но укажите baseline и не «обманывайте» масштабом.

Как показать p95/p99 и не перегрузить?
Лента percentiles или small multiples с одинаковыми осями.

Чем заменить «пирог» с 8 сегментами?
100% stacked bars или таблица с барами внутри строк (bar-in-cell) + сортировка.

Итог

Эффективная визуализация метрик — это корректный выбор формы + честный контекст + удобные действия. Держите единые стандарты шкал и форматов, показывайте неопределенность и пропуски, давайте быстрый дрилл-даун и CTA, берегите производительность и доступность. Тогда графики перестанут быть «картинками» и станут инструментом принятия решений.