Metrik görselleştirme

1) Görüntüleme hedefleri

Hızlı bir şekilde anlayın: 3-5 saniye içinde bir trend/anomali/vardiya tanıyın.

Doğru şekilde karşılaştırın: dönemler, segmentler, A/B varyantları

Verilere inanın: belirsizliği, kaynakları, tazeliği gösterin.
Act: Grafiğin yanında - CTA, filtreler, oyun kitaplarına bağlantılar.

2) Metrik türleri ve en iyi formları

3) Ölçekler, eksenler ve toplama

Ölçekler: varsayılan olarak doğrusal; logaritmik - çoklu aralıklar için; Yüzde - [0; 100].
Sıfır temel: çubuklar - sıfırdan; çizgiler - sıfır gereksinimi yoktur (ancak taban çizgisini gösterir).
Toplama: gün/saat/dakika, p50/p95/p99; "Gürültülü" dağıtımların ortalamasından kaçının.
Yuvarlama/Delme düğmeleri "D/N/H" (gün/hafta/saat) ve hiyerarşide "↑/↓" (bölge, strana, gorod).
Örnekleme noktaları (altörnekleme): Aşırı uçları kaybetmemek için uzun satırlar için LTTB/MinMax.

4) Bağlam ve karşılaştırmalar

Dönem karşılaştırması: "Current vs Previous" (noktalı çizgi ile kaplama) ve/veya küçük katlar; göreceli ∆ ve mutlak ∆ işaretleyin.
Mevsimsellik: hafta sonu/tatil arka plan bantları, saat başı sıcak/soğuk bölgeler.
Benchmarklar: yatay norm/hedef çizgileri (SLO/SLA), işaret birimleri ve zaman ufku.
Güven aralıkları: şeritler/bantlar ± CI; A/B için - hata çubukları ve p-değeri/asansör.

5) Belirsizlik, eksiklikler, revizyonlar

Eksiklikler: hattı kırmak (sıfır ile bağlanmayın); Tamamlanmamış pencere için gri "sisler".
Veri gecikmeleri: rozet "veri 12 dakika geride", zaman damgası alımıyla ilgili ipucu.
Revizyonlar: Ince kapak alanları "yeniden hesaplanır", changelog'a referans.

6) Renk, şekil ve kullanılabilirlik (A11y)

Palet: nötr taban; kırmızı - kritik, turuncu - uyarı, yeşil - pozitif.
Renk bağımsızlığı: değer/işaretleyici/imzalarla çoğaltma; WCAG AA ≥ kontrast.
Satır sayısı: Grafik başına ≤5; Aksi takdirde küçük katlar/fasetler.
Boyutlar/tıklamalar: Etkileşimli hedefler ≥ 32-40 piksel; Odaklama halkaları, klavye navigasyonu.

7) Doğru imzalama

Eksenler: birimler, sayı biçimi (1,234,56; 12. 3k; 5. 2%); Yerel ayarlı veri etiketleri.
Efsane: Görsel önem sırasına göre; Serileri dahil etmek/hariç tutmak için tıklanabilir.
Ek açıklamalar: kısaca ve durumda ("release", PSP_X incident # 4217 "), olaya atıfta bulunarak.

8) Etkileşim: aşırı yükleme yapmayın

Hover/Tooltip: kompakt, anahtar alanları ve ∆ vs taban çizgisi.
Yakınlaştırma/Fırça: fare/klavye seçimi; Sıfırla düğmesi.
Matkapla: segmente tıklayın - ayrıntılı bölüm; Geri dönmek için ekmek kırıntısı.
Seçiciler: aralık ön ayarları (24h/7d/30d), segment filtreleri, "Abs/Yüzde" anahtarı.

9) Bileşen şablonları (örnek 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) Render performansı

Sunucu üzerinde toplama: zaten "doğru" windows/quantiles döndürün.
Canvas/WebGL: on binlerce nokta ve ısı haritası için; SVG - ≤2 -3 bin eleman ve net imzalar için.
Liste/Tablo Sanallaştırma - Sayfaları kaydırırken yükleyin.
Önbelleğe alma: sıcak karolar,'dün/hafta "ön hesaplama.

11) Geçerlilik ve anti-kalıplar

• Ölçeği değiştirin (sıfırın üzerindeki sütunların eksenini kesin).
• İkincil eksen ve açık imzalar olmadan farklı birimleri karıştırın.
• 8-10 sıra ile yığılmış bir alan "orman" oluşturun.
• Boşlukları sıfırlarla değiştirin.
• 3D/shadow "güzellik" uğruna kullanın.

12) Formüller, birimler ve biçimlendirme

Para: küçük birimler/ondalık dizeler; Açıkça para birimini belirtin.
Dönüşümler/kesirler: bir ondalık ile yüzdeler (gerekirse - s. p.).
Oranlar/oranlar: "Saat başına/gün başına" - süreyi imzalayın.
Yuvarlama: değerlerin sırasını gizlemeden önemli basamaklara.

13) Kalite ve SLO metriklerinin özgüllüğü

Hata bütçeli yanma ve uyarı düzeylerini göster.
Çalışma süresi için - yığılmış durum çubukları "OK/Degraded/Down" + olay pencereleri.
Gecikme süresi için - dağılımlar (p50/p95/p99), kümelere/uç noktalara göre "keman/boxplot".

14) Hikaye anlatımı ve otomatik sammari

Anlatı bloğu: 2-4 cümle'ne oldu "+" neden "+'ne yapmalı".
Slaytlar/dışa aktarma: Fontlar ve renklerle PDF/PNG/SVG; filigranlar ve kesme tarihi.

15) Görselleştirmeler için test planı

Birim: eksen biçimi, bin hesaplama, CI bant.
Entegrasyon: filtreler/aralıklar/yerel ayar, delme ve ters navigasyon.
E2E: Harekete geçirici senaryo: Bir anomaliye tıklamak - oyun kitabı.
A11y/i18n: ekran okuyucular, klavye, imzaların çevirisi.
Perf: Büyük satırların oluşturulması, soğuk/sıcak önbellek, 10 × noktasında stres.

16) Görselleştirme kalitesi metrikleri

Time-to-Insight (TTI): İlk tıklama/içgörü için medyan zaman.
Explained Rate - Mevcut Explained ile grafiklerin paylaşımı.
Eylem Oranı: widget'tan eylemlerin gerçekleştirildiği yer.
Hata/Gürültü: yanlış imzalar, kullanıcı şikayetleri.
Perf p95: İlk içerik ve etkileşim zamanı.

17) Zamanlama Tasarımı Kontrol Listesi

• Görev için zamanlama türünü düzeltin
• Açık eksenler, birimler, sayı ve tarih biçimi
• Bağlam: temel/SLO, karşılaştırma dönemi, ek açıklamalar
• Boşlukları/gecikmeleri/revizyonları göster
• Renk ve Kontrast (WCAG), 5 satır maks
• Aşırı yüklenmeden etkileşim: hover, zoom, drill-down
• Performans: Toplama, altörnekleme, Canvas/WebGL talep üzerine
• CTA yan yana: raporu/oyun kitabını aç/uyarı oluştur
• Dilim Tarihi ve Filtre Ayarlarıyla Dışa Aktar/Paylaş

18) Panolara gömme

Tutarlılık kiti: tek tip belirteçler (yazı tipleri, boyutlar, paletler), yazı tiplerinin tek tip davranışı.
Widget şablonları: KPI, zaman çizelgeleri, dağıtım, karşılaştırma, harita, tablo.
"Akıllı" istemler için yuvalar: "anomali" rozeti, sürücü açıklamaları, eylem düğmeleri.

19) Uygulama planı (3 yineleme)

• Grafik türleri, birleşik ölçekler/biçimler, taban çizgisi/SLO, boşluklar/gecikme rozetleri, dışa aktarma.

• Dönem karşılaştırmaları, CI bantları, küçük katlar, anomaliler/rozetler, klavye navigasyonu.

• Altörnekleme/WebGL, Açıklama paneli, otomatik sammari, pano hazır ayarları ve CTA.

20) Mini-SSS

Y ekseni her zaman sıfırdan başlamalı mı?
Sütunlar için - evet. Çizgiler için - gerekli değil, ancak taban çizgisini belirtin ve ölçeğe göre "aldatmayın".

P95/p99 nasıl gösterilir ve aşırı yüklenmez?
Bant yüzdelik dilimleri veya aynı eksenlere sahip küçük katlar.

"Pasta" 8 segmentle nasıl değiştirilir?
%100 yığılmış çubuklar veya hücre içi çubuk + sıralama.

Toplam

Etkili metrik görselleştirme, doğru form seçimi + dürüst bağlam + uygun eylemlerdir. Ölçekler ve formatlar için tek tip standartları koruyun, belirsizlik ve eksiklikleri gösterin, hızlı bir inceleme ve CTA verin, performans ve kullanılabilirliğe dikkat edin. Daha sonra grafikler "resim" olmaktan çıkacak ve bir karar aracı haline gelecektir.