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

1) Цілі візуалізації

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

2) Типи метрик і кращі форми

3) Шкали, осі та агрегування

Шкали: лінійна за замовчуванням; логарифмічна - для кратних діапазонів; процентна - [0; 100].
Нульовий базис: стовпчики - з нуля; лінії - без вимоги нуля (але показуйте baseline).
Агрегування: денні/годинні/хвилинні, p50/p95/p99; уникайте середнього для «галасливих» розподілів.
Roll-up/Drill-down: кнопки «Д/Н/Ч» (день/тиждень/година) і «↑/↓» з ієрархії (region→strana→gorod).
Вибірка точок (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, бережіть продуктивність і доступність. Тоді графіки перестануть бути «картинками» і стануть інструментом прийняття рішень.