Metriklarni vizuallashtirish

1) Vizualizatsiya maqsadlari

Tezda tushunish: tendentsiyani/anomaliyani/siljishni 3-5 soniyada aniqlash.

To’g "ri solishtirish: davrlar, segmentlar, A/B variantlari

Ma’lumotlarga ishonish: noaniqlikni, manbalarni, yangilikni ko’rsatish.
Harakat qilish: jadval yonida - CTA, filtrlar, pleybuklarga havolalar.

2) Metrika turlari va eng yaxshi shakllar

3) Shkalalar, o’qlar va agregatsiyalash

Shkalalar: andoza chiziqli; logarifmik - karrali diapazonlar uchun; foizli - [0; 100].
Nol bazis: ustunlar - noldan; chiziqlar - nolsiz (lekin baseline koʻrsating).
Agregatsiyalash: kunduzgi/soatlik/daqiqalik, p50/p95/p99; o’rtacha «shovqinli» taqsimotlardan qoching.
Roll-up/Drill-down: iyerarxiya bo’yicha «D/N/Ch» (kun/hafta/soat) va «↑/↓» tugmalari (mintaqa → mamlakat → shahar).
Ekstremumlarni yoʻqotmaslik uchun uzun qatorlar uchun (downsampling): LTTB/MinMax.

4) Kontekst va taqqoslash

Davrlarni taqqoslash: «Joriy vs Oldingisi» (overlay) va/yoki small multiples; nisbiy ∆ va mutlaq ∆ imzolang.
Mavsumiylik: «dam olish/bayramlar» fon chiziqlari, soatlar bo’yicha iliq/sovuq zonalar.
Benchmarklar: me’yorlar/nishonlarning gorizontal chiziqlari (SLO/SLA), birliklar va vaqt gorizontini imzolang.
Ishonch oraliqlari: chiziqlar/lentalar ± CI; A/B uchun - error bars va p-value/lift.

5) Noaniqlik, o’tkazib yuborishlar, taftishlar

Oʻtkazib yuborish: chiziqni yirtib tashlang (nol bilan bogʻlamang); tugallanmagan deraza uchun kulrang «tumanlar».
Ma’lumotlar laglari: «ma’lumotlar 12 daqiqa orqada», tooltip bilan timestamp ingest.
Taftishlar: uchastkalarni ingichka shtrixlash «qayta hisoblandi», changelog’ga havola.

6) Rangi, shakli va ommabopligi (A11y)

Palitra: neytral baza; qizil - tanqidiy, to’q sariq - ogohlantirish, yashil - ijobiy.
Rang-mustaqillik: qiymati/markeri/imzosi bilan takrorlang; kontrast ≥ WCAG AA.
Qatorlar soni: bir grafikka 5 ≤; aks holda - small multiples/fasetkalar.
O’lchamlari/bosmalari: interaktiv maqsadlar ≥ 32-40 px; fokus halqalari, klaviatura navigatsiyasi.

7) To’g "ri imzolaymiz

O’qlar: o’lchov birliklari, sonlar formati (1 234,56; 12. 3k; 5. 2%); lokalli data-belgi.
Afsona: vizual ahamiyatga ega tartibda; qatorlarni kiritish/chiqarib tashlash uchun bosiladigan.
Izohlar: qisqacha va ish bo’yicha ("reliz PSP_X", "hodisa # 4217"), voqeaga tayanib.

8) Interaktivlik: ortiqcha yuklamaslik

Hover/Tooltip: ixcham, asosiy maydonlari va ∆ vs baseline.
Zoom/Brush: sichqoncha/klaviatura bilan tanlash; «Yangilash» tugmasi.
Drill-down: segment bo’yicha bosish → batafsil kesish; qaytarish uchun breadcrumb.
Selektorlar: diapazonlar presetalari (24ch/7d/30d), segmentlar filtrlari, «Abs/Foiz» o’tkazgichi.

9) Komponent namunalari (masalan, 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) Rendering unumdorligi

Serverda birlashtirish: allaqachon «toʻgʻri» oynalar/kvantillarni qaytaring.
Canvas/WebGL: o’n minglab nuqtalar va issiqlik xaritalari uchun; SVG - 2-3 ming element va aniq imzo ≤ uchun.
Roʻyxat/jadvallarni virtuallashtirish: aylantirilganda sahifalarni yuklash.
Kesh: issiq tayl, precompute «kecha/hafta».

11) Ishonchlilik va anti-patternlar

• Shkalani manipulyatsiya qilish (ustunlar oʻqini noldan yuqori kesish).
• Har xil birliklarni ikkilamchi oʻqsiz va aniq imzosiz aralashtirish.
• 8-10 qatorli stacked-area o’rmonini qurish.
• Boʻshliqlarni nol bilan almashtirish.
• «Go’zallik» uchun 3D/soyalardan foydalanish.

12) Formulalar, birliklar va formatlash

Pul: minor units/o’nlik satrlar; valyutani aniq ko’rsatish.
Konversiyalar/ulushlar: bir o’nlik foizdan (zarurat bo’lganda - p. p.) .
Tezlik/stavkalar: «soatiga/kuniga» - davrni imzolang.
Yaxlitlash: kattalik tartibini yashirmasdan, muhim razryadlargacha.

13) Sifat metrikalari va SLOning o’ziga xosligi

Error-budget burn (qolgan%) va ogohlantirish darajalarini koʻrsating.
Aptaym uchun - stacked status bar «OK/Degraded/Down» + hodisalar oynalari.
latency uchun - klaster/endpint bo’yicha taqsimlash (p50/p95/p99), «violin/boxplot».

14) Storitelling va avto-sammari

Narrative blok: 2-4 «nima bo’ldi» + «nima uchun» + «nima qilish kerak» jumlalari.
Slaydlar/Eksport: shrift va ranglarni saqlagan holda PDF/PNG/SVG; suv belgilari va kesish sanasi.

15) Vizualizatsiya uchun test-reja

Unit: oʻqlar formati, binlarni hisoblash, CI-lentalar.
Integration: filterlar/diapazonlar/lokal, drill-down va teskari navigatsiya.
E2E: «alertdan harakatga» stsenariysi: anomaliya bo’yicha bosish → pleybuk.
A11y/i18n: ekran o’quvchilari, klaviatura, imzo tarjimasi.
Perf: katta qatorli render, cold/warm cache, 10 × nuqtali stress.

16) Vizualizatsiya sifati metrikasi

Time-to-Insight (TTI): birinchi bosish/tushunishdan oldin vaqt vositasi.
Explained Rate: Mavjud Explain grafiklar ulushi.
Action Rate: amallar vidjetdan bajarilgan.
Error/Noise: notoʻgʻri imzolar, foydalanuvchi shikoyatlari.
Perf p95: birinchi kontentga va interaktivlikka qadar vaqt.

17) Grafik dizaynining chek-varaqasi

• Vazifa uchun toʻgʻri grafik turi
• Aniq oʻqlar, birliklar, sonlar va sanalar formati
• Kontekst: baseline/SLO, qiyoslash davri, izohlar
• Ruxsatnomalar/laglar/taftishlar
• Ranglar va kontrast (WCAG), 5 qatordan ortiq emas
• Ortiqcha yuklamasiz interaktivlik: hover, zoom, drill-down
• Ishlash: agregatsiya, downsampling, Canvas/WebGL kerak bo’lganda
• CTA yonida: hisobot/pleybuk ochish/alert yaratish
• Eksport/sharing

18) Dashbordlarga kiritish

Consistency-kit: yagona tokenlar (shriftlar, o’lchamlar, palitralar), tultiplarning yagona xulq-atvori.
Vidjet namunalari: KPI, timeseries, distribution, comparison, map, table.
Aqlli maslahatlar uchun slotlar: «anomaliya» nishonchasi, drayverlar tushuntirishlari, harakatlar tugmalari.

19) Joriy etish rejasi (3 ta iteratsiya)

• Grafik turlari, yagona shkalalar/formatlar, baseline/SLO, o’tkazib yuborishlar/lag-beyjlar, eksport.

• Davrlarni taqqoslash, CI-lentalar, small multiples, anomaliyalar/bayroqlar, klaviatura navigatsiyasi.

• Downsampling/WebGL, Explain-panel, avto-sammari, dashbord presetlari va CTA.

20) Mini-FAQ

Y oʻqini har doim noldan boshlash kerakmi?
Ustunlar uchun - ha. Chiziqlar uchun - bu shart emas, lekin bazelinni belgilang va masshtabda «aldamang».

Qanday qilib p95/p99 koʻrsatiladi va ortiqcha yuklanmaydi?
Bir xil oʻqli lenta percentiles yoki small multiples.

8 segmentli «pirog» ni nima bilan almashtirish kerak?
100% stacked bars yoki satrlar ichidagi barlar bilan jadval (bar-in-cell) + saralash.

Jami

Metriklarning samarali vizualizatsiyasi - bu shaklni to’g’ri tanlash + halol kontekst + qulay harakatlar. Shkalalar va formatlarning yagona standartlarini saqlang, noaniqliklar va o’tkazib yuborishlarni ko’rsating, tezkor drill-down va CTA bering, unumdorlik va qulaylikni saqlang. SHunda grafiklar «rasm» bo’lib qolmaydi va qarorlar qabul qilish vositasiga aylanadi.