Metrleriň wizuallaşdyrylmagy

1) Wizuallaşdyrmagyň maksatlary

Çalt düşünmek: tendensiýany/anomaliýany/üýtgemegi 3-5 sekuntda tanamak.

Dogry deňeşdirmek: döwürler, segmentler, A/B. wariantlary

Maglumatlara ynanmak: näbellilik, çeşmeler, täzelik.
Hereket etmek: grafigiň gapdalynda - CTA, süzgüçler, pleýbuklara baglanyşyklar.

2) Metrikleriň görnüşleri we iň gowy görnüşleri

3) Şkalalar, oklar we agregasiýa

Şkalalar: setirli; logarifmiki - köp diapazonlar üçin; göterim - [0; 100].
Nol binýady: sütünler - noldan; çyzyklar - nol talap etmezden (ýöne baseline görkeziň).
Jemlemek: gündiz/sagat/minut, p50/p95/p99; "şowhunly" paýlamalar üçin ortaça bolmakdan gaça duruň.
Roll-up/Drill-down: iýerarhiýa boýunça "D/N/H" (gün/hepde/sagat) we "↑/↓" (sebit → ýurt → şäher) düwmeleri.
Nokatlary saýlamak (downsampling): LTTB/MinMax, ekstremumlary ýitirmezlik üçin.

4) Kontekst we deňeşdirmeler

Döwürleri deňeşdirmek: "Häzirki vs Öňki" (overlay) we/ýa-da small multiples; degişlilikde ∆ we mutlak ∆ gol çekiň.
Möwsümliligi: fon zolaklary "dynç günleri/baýramçylyklar", sagatlar boýunça ýyly/sowuk zolaklar.
Bençmarklar: kadalaryň/maksatlaryň gorizontal çyzyklary (SLO/SLA), birliklere we wagt gözýetimine gol çekiň.
Ynam aralyklary: CI ± zolaklar/lentalar; A/B üçin - error bars we p-value/lift.

5) Näbellilik, sypdyrmalar, barlaglar

Geçişler: çyzygy ýyrtyň (nol bilen birleşdirmäň); tamamlanmadyk penjire üçin çal "dumanlar".
Maglumat laglary: nyşan "maglumatlar 12 minut yzda", tooltip with timestamp ingest.
Barlaglar: ýerleriň inçe çyzylmagy "sanaldy", çangeloga salgylanma.

6) Reňk, görnüş we elýeterlilik (A11y)

Palitra: bitarap baza; gyzyl - möhüm, mämişi - duýduryş, ýaşyl - oňyn.
Reňk garaşsyzlygy: many/bellikler/gollar bilen köpeldiň; WCAG AA ≥ kontrast.
Hatarlaryň sany: bir grafikde 5 ≤; otherwiseogsam - small multiples/fasetka.
Ölçegler/basmalar: interaktiw maksatlar ≥ 32-40 px; fokus halkalary, klawiatura nawigasiýasy.

7) Dogry gol çekýäris

Oklar: ölçeg birlikleri, san formaty (1 234.56; 12. 3k; 5. 2%); lokally data-bellikler.
Rowaýat: wizual ähmiýetli tertipde; hatarlary goşmak/aýyrmak üçin basylýar.
Düşündirişler: gysga we iş boýunça ("goýberiş PSP_X", "waka # 4217"), waka salgylanma bilen.

8) Interaktiwlik: artykmaç ýüklemäň

Hover/Tooltip: ykjam, açar meýdanlary we ∆ vs baseline.
Zoom/Brush: Aralygy syçan/klawiatura bilen saýlamak; "Taşla" düwmesi.
Drill-down: segmente basmak → jikme-jik kesmek; Yzyna gaýtarmak üçin breadcrumb.
Selektorlar: aralyk presetleri (24h/7d/30d), segmentleriň süzgüçleri, "Abs/Göterim" düwmesi.

9) Komponentleriň şablonlary (mysal 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) Renderingiň öndürijiligi

Serwerde jemlemek: eýýäm "dogry" penjireleri/kwantilleri yzyna gaýtaryň.
Canvas/WebGL: on müňlerçe nokatlar we ýylylyk kartalary üçin; SVG - 2-3 müň element we anyk gol ≤ üçin.
Sanawlaryň/tablisalaryň wirtualizasiýasy: aýlanylanda sahypalary ýüklemek.
Kesmek: gyzgyn taýlar, precompute "düýn/hepde".

11) Takyklyk we anti-patternler

• Ölçegi manipulirlemek (sütünleriň okuny noldan ýokary kesmek).
• Ikinji oksuz we aç-açan golsyz dürli birlikleri garyşdyrmak.
• "Tokaý" stacked-area 8-10 hatar guruň.
• Geçişleri nol bilen çalyşmak.
• "Gözellik" üçin 3D/kölegeleri ulanyň.

12) Formulalar, birlikler we formatlamak

Pul: minor units/onluk setirler; walýutany aç-açan görkezmek.
Konwersiýalar/paýlar: bir onlukdan göterimler (zerur bolanda - p. p.) .
Tizlikler/nyrhlar: "sagatda/günde" - döwre gol çekiň.
Tegelek: ululyklaryň tertibini gizlemän, möhüm kategoriýalara çenli.

13) Hil metrikleriniň we SLO aýratynlygy

Error-budget burn (galan%) we duýduryş derejelerini görkeziň.
Aptaým üçin - stacked status-barlar "OK/Degraded/Down" + hadysalar penjireleri.
latency üçin - bölmek (p50/p95/p99), toparlar/endpointler boýunça "violin/boxplot".

14) Storitelling we awto-sammari

Narrative blok: 2-4 "näme boldy" "näme üçin" "näme etmeli".
Slaýdlar/Eksport: Şriftleri we reňkleri saklamak bilen PDF/PNG/SVG; suw bellikleri we kesilen senesi.

15) Wizualizasiýa üçin synag-meýilnama

Unit: oklar formaty, binleri, CI-lentalary hasaplamak.
Integration: süzgüçler/aralyklar/lokal, drill-down we ters nawigasiýa.
E2E: "alertden herekete" ssenarisi: anomaliýa basmak → oýun.
A11y/i18n: ekran okyjylary, klawiatura, gollaryň terjimesi.
Perf: uly hatar render, cold/warm cache, 10 × nokada stres.

16) Wizualizasiýalaryň hiliniň metrikleri

Time-to-Insight (TTI): ilkinji gezek basylýança/düşünilmezinden öň wagt medianasy.
Explained Rate: bar bolan Explain bilen grafikleriň paýy.
Action Rate: widgetdan hereketler ýerine ýetirildi.
Error/Noise: nädogry gollar, ulanyjylaryň şikaýatlary.
Perf p95: ilkinji mazmuna we interaktiwlige çenli wagt.

17) Grafikanyň dizaýnynyň çek-sanawy

• Iş üçin grafikanyň dogry görnüşi
• Açyk oklar, birlikler, sanlaryň we seneleriň formaty
• Kontekst: baseline/SLO, deňeşdirme döwri, düşündiriş
• Geçişleri/laglary/barlaglary görkezmek
• Reňkler we kontrast (WCAG), 5 hatardan köp bolmaly däl
• Artykmaç interaktiwlik: hover, zoom, drill-down
• Öndürijilik: ýygnamak, downsampling, Canvas/WebGL zerur
• CTA golaýda: Hasaby açyň/playbook/alert dörediň
• Kesilen senesi we süzgüç parametrleri bilen eksport/paýlaşmak

18) Daşbordlara goşulmak

Consistency-kit: ýeke-täk bellikler (şriftler, ölçegler, palitrler), ýeke-täk tultipler.
Widget şablonlary: KPI, timeseries, distribution, comparison, map, table.
"Akylly" maslahatlar üçin slotlar: "anomaliýa" nyşany, sürüjileriň düşündirişleri, hereket düwmeleri.

19) Durmuşa geçirmek meýilnamasy (3 iterasiýa)

• Grafikleriň görnüşleri, birmeňzeş şkalalar/formatlar, baseline/SLO, geçişler/lag nyşanlary, eksport.

• Döwürleri deňeşdirmek, CI-lentalar, kiçi köplükler, anomaliýalar/nyşanlar, klawiatura nawigasiýasy.

• Downsampling/WebGL, Explain-panel, awto-sammarlar, dashbord presetleri we CTA.

20) Mini-FAQ

Y oky hemişe noldan başlamalymy?
Sütünler üçin - hawa. Çyzyklar üçin - hökman däl, ýöne baseline belläň we ululygy bilen "aldama".

p95/p99 nädip görkezmeli we artykmaç ýüklemeli däl?
Percentiles ýa-da small multiples şol bir okly lenta.

8 segmentli "pirogy" nädip çalyşmaly?
100% stacked bars ýa-da setirleriň içindäki barlar bilen tablisa (bar-in-cell) + sortlamak.

Jemi

Metrleriň netijeli wizuallaşdyrylmagy - dogry formany saýlamak + dogruçyl kontekst + amatly hereketler. Ölçegleriň we formatlaryň bitewi standartlaryny saklaň, näbellilik we boşluklary görkeziň, çalt gazyp alyň we CTA beriň, öndürijiligi we elýeterliligi saklaň. Şonda grafikler "surat" bolmagyny bes eder we karar bermek guralyna öwrüler.