Metriklərin vizuallaşdırılması

1) Vizuallaşdırma məqsədləri

Tez başa düşün: 3-5 saniyədə tendensiyanı/anomaliyanı/sürüşməni tanıyın.

Düzgün müqayisə: dövrlər, seqmentlər, A/B variantları

Məlumatlara inanmaq: qeyri-müəyyənlik, mənbələr, təravət göstərmək.
Hərəkət edin: CTA qrafikinin yanında, filtrlər, playbook linkləri.

2) Metrik növləri və ən yaxşı formaları

3) Şkalalar, oxlar və aqreqasiya

Şkalalar: default xətti; loqarifmik - qat-qat diapazonlar üçün; faiz - [0; 100].
Sıfır baza: sütunlar - sıfırdan; xətlər - sıfır tələbi olmadan (lakin baseline göstərin).
Aqreqasiya: gündüz/saat/dəqiqə, p50/p95/p99; «səs-küylü» paylamalar üçün ortalamadan çəkinin.
Roll-up/Drill-down: «D/N/H» (gün/həftə/saat) və «↑/↓» iyerarxiya (region → ölkə → şəhər) düymələri.
Nöqtə seçimi (downsampling): LTTB/MinMax ekstremumları itirməmək üçün uzun sıralar üçün.

4) Kontekst və müqayisə

Dövrlərin müqayisəsi: «Cari vs Əvvəlki» (nöqtə ilə overlay) və/və ya small multiples; nisbi ∆ və mütləq ∆ imzalayın.
Mövsümlük: arxa zolaqlar «həftə sonu/tətil», isti/soyuq zonalar saat.
Standartlar: üfüqi xətt normaları/hədəfləri (SLO/SLA), vahid və vaxt üfüqi imzalayın.
Etimad intervalları: CI ± zolaqlar/lentlər; A/B üçün - error bars və p-value/lift.

5) Qeyri-müəyyənlik, qaçırmalar, yoxlamalar

Boşluqlar: xətti qırın (sıfır birləşdirməyin); yarımçıq pəncərə üçün boz «duman».
Verilənlər laqları: «verilənlər 12 dəqiqə geridə qalır» nişanı, timestamp ingest ilə tooltip.
Təftişlər: sahələrin nazik ştrixləşdirilməsi «yenidən hesablanır», changelog-a keçid.

6) Rəng, forma və mövcudluq (A11y)

Palitra: neytral baza; qırmızı - kritik, narıncı - xəbərdarlıq, yaşıl - müsbət.
Rəng-müstəqillik: məna/işarələr/imzalar ilə təkrarlayın; kontrast ≥ WCAG AA.
Sıra sayı: bir qrafikə ≤ 5; əks halda - kiçik multiples/fasetlər.
Ölçülər/kliklər: 32-40 px ≥ interaktiv hədəflər; fokus halqaları, klaviatura naviqasiyası.

7) Düzgün imzalayın

Oxlar: ölçü vahidləri, ədəd formatı (1 234.56; 12. 3k; 5. 2%); lokal ilə data-etiket.
Əfsanə: vizual əhəmiyyət sırasına görə; sıraları daxil etmək/istisna etmək üçün tıklanabilir.
Şərhlər: qısa və iş üzrə ("release PSP_X", "insident # 4217"), hadisəyə istinad ilə.

8) Interaktivlik: həddindən artıq yüklənməyin

Hover/Tooltip: kompakt, əsas sahələri və ∆ ilə vs bazeline.
Zoom/Brush: siçan/klaviatura ilə diapazonun seçilməsi; «Sıfırla» düyməsi.
Drill-down: seqmentə basın → ətraflı kəsik; geri qaytarmaq üçün breadcrumb.
Selektorlar: diapazon presetləri (24h/7d/30d), seqment filtrləri, «Abs/Faiz» açarı.

9) Komponent şablonları (API nümunəsi)

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) Render performansı

Serverdə yığın: artıq «düzgün» pəncərələri/kvantilləri qaytarın.
Canvas/WebGL: on minlərlə nöqtə və istilik kartları üçün; SVG - ≤ 2-3 min element və aydın imzalar üçün.
Siyahı/cədvəllərin virtuallaşdırılması: səhifələri sürüklədikcə yükləyin.
Caching: isti tails, precompute «dünən/həftə».

11) Etibarlılıq və anti-nümunələr

• Ölçü manipulyasiyası (sütun oxunu sıfırdan yuxarı kəsin).
• İkinci ox və aydın imzalar olmadan müxtəlif vahidləri qarışdırın.
• 8-10 sıra ilə «meşə» stacked-area qurmaq.
• Boşluqları sıfırla əvəz edin.
• «Gözəllik» üçün 3D/kölgə istifadə edin.

12) Formullar, vahidlər və formatlaşdırma

Pul: minor units/onluq sətirlər; açıq valyuta göstərmək.
Dönüşüm/paylar: bir onluq faiz (lazım olduqda - p. p.) .
Sürət/dərəcələr: «saatda/gündə» - müddəti imzalayın.
Dəyirmi: ölçü qaydasını gizlətmədən əhəmiyyətli dərəcələrə qədər.

13) Keyfiyyət metrik xüsusiyyətləri və SLO

Error-budget burn (büdcənin qalan% -i) və xəbərdarlıq səviyyələrini göstərin.
Aptime üçün - stacked status bar «OK/Degraded/Down» + hadisə pəncərələri.
latency üçün - paylama (p50/p95/p99), klasterlər/endpointlər üzrə «violin/boxplot».

14) Storitelling və avto-sammari

Narrative blok: 2-4 təklif «nə oldu» + «niyə» + «nə etmək lazımdır».
Slaydlar/İxrac: PDF/PNG/SVG şriftləri və rəngləri saxlamaqla; su işarələri və kəsilmə tarixi.

15) Vizualizasiya üçün test planı

Vahid: oxların formatı, binlərin hesablanması, CI-lent.
Integration: filterlər/diapazonlar/lokal, drill-down və əks naviqasiya.
E2E: «alertdən hərəkətə» ssenarisi: anomaliyaya basın → playbook.
A11y/i18n: ekran oxucuları, klaviatura, imza tərcüməsi.
Perf: böyük sıra render, cold/warm cache, 10 × nöqtə stress.

16) Vizualizasiya keyfiyyətinin metrikası

Time-to-Insight (TTI): median ilk klik/anlayış qədər vaxt.
Explained Rate: mövcud Explain ilə qrafiklərin payı.
Action Rate: widgetdan hərəkətlərin edildiyi yer.
Error/Noise: səhv imzalar, istifadəçi şikayətləri.
Perf p95: ilk məzmuna və interaktivliyə qədər vaxt.

17) Qrafik dizayn çek siyahısı

• Tapşırıq üçün düzgün qrafik növü
• Aydın oxlar, vahidlər, rəqəmlər və tarixlər formatı
• Kontekst: baseline/SLO, müqayisə müddəti, annotasiyalar
• Keçidlərin/laqların/yoxlamaların göstərilməsi
• Rənglər və kontrast (WCAG), 5 sıradan çox deyil
• Həddindən artıq yüklənmədən interaktivlik: hover, zoom, drill-down
• Məhsuldarlıq: yığma, downsampling, Canvas/WebGL ehtiyac
• CTA yaxınlıqda: açıq hesabat/playbook/alert yaratmaq
• Kəsmə tarixi və filter parametrləri ilə ixrac/paylaşma

18) Dashboard daxil

Consistency-kit: vahid tokenlər (şriftlər, ölçülər, palitrlər), vahid tultiplərin davranışı.
Widget şablonları: KPI, timeseries, distribution, comparison, map, table.
«Ağıllı» ipuçları üçün slots: «anomaliya» nişanı, sürücülərin izahı, hərəkət düymələri.

19) Tətbiq planı (3 iterasiya)

• Qrafik növləri, vahid şkalalar/formatlar, baseline/SLO, boşluqlar/lag nişanları, ixrac.

• Dövrlərin müqayisəsi, CI-lent, kiçik multiples, anomaliyalar/nişanlar, klaviatura naviqasiyası.

• Downsampling/WebGL, Explain Panel, Auto-Sammary, Dashboard Presets və CTA.

20) Mini-FAQ

Y oxu həmişə sıfırdan başlamalıdırmı?
Sütunlar üçün - bəli. Xətlər üçün - lazım deyil, ancaq bazeline göstərin və miqyasda «aldatmayın».

Necə p95/p99 göstərmək və həddindən artıq yükləmək deyil?
Eyni oxları olan percentiles və ya small multiples.

8 seqmentli «piroq» nə ilə əvəz olunur?
100% yığılmış barlar və ya cədvəl bar-in-cell + sıralama.

Yekun

Metriklərin effektiv vizuallaşdırılması düzgün forma seçimi + dürüst kontekst + rahat hərəkətlərdir. Ölçü və formatların vahid standartlarını saxlayın, qeyri-müəyyənlik və boşluqları göstərin, sürətli drill down və CTA verin, performans və əlçatanlığa diqqət edin. Sonra qrafiklər «şəkil» olmağı dayandıracaq və qərar qəbul etmək üçün bir vasitə olacaq.