Wizualizacja mierników

1) Cele obrazowania

Szybko zrozumieć: rozpoznać trend/anomalia/przesunięcie w 3-5 sekund.
Porównaj poprawnie: okresy, segmenty, warianty A/B.
Wierz w dane: pokazują niepewność, źródła, świeżość.
Ustawienie: obok wykresu - CTA, filtry, linki do odtwarzaczy.

2) Typy metryczne i najlepsze formy

3) Wagi, osie i agregacja

Wagi: liniowe domyślnie; logarytmika - dla wielu zakresów; procent - [0; 100].
Podstawa zerowa: pręty - od podstaw; linie - brak wymogu zero (ale pokaż linię bazową).
Agregacja: dzień/godzina/minuta, p50/p95/p99; unikać średniej dla „hałaśliwych” dystrybucji.
Roll-up/Wiertła-down przyciski „D/N/H” (dzień/tydzień/godzinę) i „na” w hierarchii (region → strana → gorod).
Punkty pobierania próbek (downsampling): LTTB/MinMax dla długich rzędów, aby nie stracić skrajności.

4) Kontekst i porównania

Porównanie okresowe: „Current vs Previous” (nakładka z linią kropkowaną) i/lub małe wielokrotności; znak względny i bezwzględny.
Sezonowość: weekend/wakacje zespoły tła, ciepłe/zimne strefy na godzinę.
Wartości odniesienia: pozioma norma/linie docelowe (SLO/SLA), jednostki znaków i horyzont czasowy.
Przedziały zaufania: paski/taśmy ± CI; dla A/B - pręty błędów i p-value/winda.

5) Niepewność, zaniechania, korekty

Pominięcia: przerwać linię (nie połączyć z zerem); szare „mgły” dla niekompletnego okna.
Lagi danych: odznaka „dane jest 12 minut za”, końcówka narzędzi ze znacznikiem czasowym ingest.
Zmiany: cienkie obszary wylęgowe „przeliczone”, odniesienie do changelogu.

6) Kolor, kształt i dostępność (A11y)

Paleta: neutralna podstawa; czerwony - krytyczny, pomarańczowy - ostrzeżenie, zielony - dodatni.
Niezależność kolorów: duplikat z wartościami/markerami/podpisami; kontrast ≥ WCAG AA.
Liczba wierszy: ≤ 5 na wykres; w przeciwnym razie małe wielokrotności/fasety.
Rozmiary/kliknięcia: interaktywne cele ≥ 32-40 px; pierścienie ostrości, nawigacja klawiatura.

7) Prawidłowe podpisanie

Osie: jednostki, format liczbowy (1,234,56; 12. 3k; 5. 2%); etykiety danych z locale.
Legenda: W kolejności do znaczenia wizualnego; można kliknąć, aby dodać/wyłączyć serię.
Adnotacje: krótko i w przypadku („release PSP_X”, „incydent # 4217”), z odniesieniem do zdarzenia.

8) Interaktywność: nie przeciążać

Hover/Tooltip: kompaktowy, z kluczowymi polami i linią podstawową.
Zoom/Brush: wybór myszy/klawiatury; Zresetuj przycisk.
Wiertło-down: kliknij na segment → sekcja szczegółowa; bułka tarta do powrotu.
Selektory: ustawienia wstępne zakresów (24h/7d/30d), filtry segmentowe, przełącznik „Abs/Percentage”.

9) Szablony komponentów (przykład 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) Renderowanie wydajności

Agregat na serwerze: zwróć już „poprawne” okna/kwantyle.
Canvas/WebGL: dla dziesiątek tysięcy punktów i map ciepła; SVG - dla ≤ 2 -3 tys. elementów i wyraźnych podpisów.
Lista/Wirtualizacja tabeli - Wczytaj strony podczas przewijania.
Buforowanie: gorące płytki, prekomputer „wczoraj/tydzień”.

11) Ważność i anty-wzory

• Manipulować skalą (przyciąć oś kolumn powyżej zera).
• Mieszać różne jednostki bez osi wtórnej i wyraźnych podpisów.
• Zbuduj ułożony obszar „las” z 8-10 rzędów.
• Zastąpić luki zerami.
• Użyj 3D/shadow dla dobra „piękna”.

12) Wzory, jednostki i formatowanie

Pieniądze: niewielkie jednostki/struny dziesiętne; wyraźnie określić walutę.
Konwersje/frakcje: procenty po przecinku (w razie potrzeby - p. p.).
Stawki: „za godzinę/dzień” - podpisz okres.
Zaokrąglanie: do znaczących cyfr, bez ukrywania kolejności wartości.

13) Specyfika mierników jakości i SLO

Pokaż poziom poparzeń i ostrzeżeń w budżecie błędów.
Dla uptime - ułożone paski stanu „OK/Degraded/Down” + okna incydentów.
Dla opóźnień - rozkład (p50/p95/p99), „skrzypce/boxplot” przez klastry/punkty końcowe.

14) Storytelling i auto-sammari

Blok narracyjny: 2-4 zdania „co się stało” + „dlaczego” + „co robić”.
Slajdy/eksport: PDF/PNG/SVG z czcionkami i kolorami; znaki wodne i data cutoff.

15) Plan badania wizualizacji

Jednostka: format osi, obliczanie bloku, taśma CI.
Integracja: filtry/zakresy/locale, wiertarka i odwrotna nawigacja.
E2E: alert-to-action scenariusz: kliknięcie na anomalię → playbook.
A11y/i18n: czytniki ekranu, klawiatura, tłumaczenie podpisów.
Perf: render z dużych rzędów, zimny/ciepły pamięci podręcznej, stres w 10 × punktów.

16) Mierniki jakości wizualizacji

Czas do wglądu (TTI): Mediana czasu do pierwszego kliknięcia/wglądu.
Explained Rate - udział wykresów z Wyjaśnienia dostępne.
Wskaźnik działania: gdzie działania z widżetu zostały wykonane.
Błąd/hałas: nieprawidłowe podpisy, reklamacje użytkowników.
Perf p95: czas do pierwszej zawartości i do interaktywności.

17) Lista kontrolna projektu harmonogramu

• Poprawny typ harmonogramu zadania
• Przezroczyste osie, jednostki, numer i format daty
• Kontekst: punkt odniesienia/SLO, okres porównawczy, adnotacje
• Pokaż luki/opóźnienia/korekty
• Kolor i kontrast (WCAG), 5 rzędów maks
• Interaktywność bez przeciążenia: zawisanie, powiększanie, wiercenie
• Wydajność: agregacja, downsampling, Canvas/WebGL na żądanie
• CTA obok siebie: raport otwarty/playbook/create alert
• Eksportuj/udostępniaj z datą cięcia i ustawieniami filtra

18) Osadzanie w deskach rozdzielczych

Zestaw konsystencji: jednolite żetony (czcionki, rozmiary, palety), jednolite zachowanie czcionek.
Szablony widgetów: KPI, timeseries, distribution, comparison, map, table.
Sloty do „inteligentnych” wierszy: odznaka „anomalia”, wyjaśnienia kierowcy, przyciski akcji.

19) Plan realizacji (3 iteracje)

• Rodzaje wykresów, ujednolicone wagi/formaty, wzorzec/SLO, luki/opóźnienia, eksport.

• Porównania okresowe, taśmy CI, małe wielokrotności, anomalie/odznaki, nawigacja klawiatura.

• Downsampling/WebGL, Wyjaśnić panel, auto-sammari, ustawienia deski rozdzielczej i CTA.

20) Mini-FAQ

Czy oś y powinna zawsze zaczynać się od zera?
Dla kolumn - tak. Dla linii - nie jest to konieczne, ale określa linię odniesienia i nie „oszukuje” według skali.

Jak pokazać p95/p99 i nie przeciążenie?
Taśma percentyle lub małe wielokrotności o tych samych osiach.

Jak zastąpić „ciasto” 8 segmentów?
100% ułożone pręty lub bar-in-cell + sort.

Razem

Skuteczna wizualizacja metryczna to właściwy wybór formy + uczciwy kontekst + wygodne działania. Zachować jednolite standardy dla wagi i formatów, wykazać niepewność i pominięcia, dać szybkie wiercenie w dół i CTA, dbać o wydajność i dostępność. Następnie wykresy przestanie być „zdjęcia” i stać się narzędziem decyzji.