მეტრიკის ვიზუალიზაცია

1) ვიზუალიზაციის მიზნები

სწრაფად გასაგები: 3-5 წამში აღიარეთ ტენდენცია/ანომალია/ცვლა.

შეადარეთ სწორად: პერიოდები, სეგმენტები, A/B ვარიანტები

დაიჯერეთ მონაცემები: აჩვენეთ გაურკვევლობა, წყაროები, სიახლე.
მოქმედება: გრაფიკის გვერდით - CTA, ფილტრები, ბმულები პლეიბუკებზე.

2) მეტრიკის ტიპები და საუკეთესო ფორმები

სცენარი	საუკეთესო ფორმები	კომენტარები
დროებითი რიგები	ხაზოვანი გრაფიკი, გამჭვირვალობა, spapkline	სტანდარტულად p50/p95; თავიდან აიცილეთ 3D და stacked მრავალი მწკრივით
განაწილება	histogram, boxplot, violin, ECDF	„მძიმე კუდებისთვის“ აჩვენეთ ლოგის მასშტაბები ან percentiles
კატეგორიები	bar/column, dot plot	დალაგეთ მნიშვნელობით, არა ანბანით
შემადგენლობა/წილი	100% stacked bars, treemap	წრიული - მხოლოდ 2-3 სეგმენტისთვის
ვერსიების შედარება	small multiples, slope graph, dumbbell	გააკეთეთ იგივე ღერძი და მასშტაბები
გეო	choropleth, სიმბოლო-რუკა	სტანდარტიზებული მოსახლეობა/მოცულობა (per capita/1000 tx)
თანმიმდევრობა	funnel, sankey	ძაბრისთვის - აშკარად დააფიქსირეთ ნაბიჯის საფუძველი

3) მასშტაბები, ღერძი და აგრეგაცია

მასშტაბები: ხაზოვანი; ლოგარითმული - მრავალჯერადი დიაპაზონისთვის; პროცენტული - [0; 100].
ნულოვანი საფუძველი: სვეტები - ნულიდან; ხაზები - ნულის მოთხოვნის გარეშე (მაგრამ აჩვენეთ ბასელინი).
დანართი: დღე/საათი/წუთი, p50/p95/p99; მოერიდეთ საშუალო „ხმაურიან“ განაწილებას.
Roll-up/Drill-Down: ღილაკები „D/N/H“ (დღე/კვირა/საათი) და იერარქიულად „Transion“ (რეგიონი - ქვეყანა - ქალაქი).
წერტილების ნიმუში: LTTB/MinMax გრძელი რიგებისთვის, ისე რომ არ დაკარგოთ ექსტრემალები.

4) კონტექსტი და შედარებები

პერიოდების შედარება: „მიმდინარე წინა“ (overlay punktire) და/ან მცირე multiples; მოაწერეთ ფარდობითი და აბსოლუტური.
სეზონური: ფონის ზოლები „შაბათ/არდადეგები“, თბილი/ცივი ზონები საათებში.
ბენზინგასამართი სადგურები: ნორმების/მიზნების ჰორიზონტალური ხაზები (SLO/SLA), მოაწერეთ ერთეული და დროებითი ჰორიზონტი.
ნდობის ინტერვალები: ზოლები/ფირები ± CI; A/B - error bars და p-value/lift.

5) გაურკვევლობა, გამოტოვება, გადასინჯვა

გამოტოვეთ: დაარღვიეთ ხაზი (ნუ დააკავშირებთ ნულს); ნაცრისფერი „ნისლები“ არასრული ფანჯრისთვის.
მონაცემთა ბლოკები: „მონაცემები 12 წუთის განმავლობაში ჩამორჩება“, timestamp ungest timestamp.
გადასინჯვა: ნაკვეთების თხელი შეხება „დათვლილია“, ბმული ჩანგელოგზე.

6) ფერი, ფორმა და წვდომა (A11y)

პალიტრა: ნეიტრალური ბაზა; წითელი - კრიტიკულად, ნარინჯისფერი - გაფრთხილება, მწვანე - პოზიტიური.
ფერის დამოუკიდებლობა: დუბლირება ღირებულებები/მარკერები/ხელმოწერები; კონტრასტია WCAG AA.
რიგების რაოდენობა: 5 ევრო ერთი გრაფიკით; წინააღმდეგ შემთხვევაში - მცირე multiples/ფასეტები.
ზომები/დაწკაპუნება: ინტერაქტიული მიზნები - 32-40 px; ფოკუსის რგოლები, კლავიატურის ნავიგაცია.

7) სწორად მოვაწეროთ ხელი

ღერძი: გაზომვის ერთეულები, რიცხვების ფორმატი (1,234.56; 12. 3k; 5. 2%); მონაცემთა ბაზები ადგილობრივი.
ლეგენდა: ვიზუალური მნიშვნელობით; მწკრივების ჩართვა/გამორიცხვა.
განცხადებები: მოკლედ და საქმეში („გამოშვება PSP _ X“, „ინციდენტი # 4217“), ღონისძიების მითითებით.

8) ინტერაქტიულობა: არ გადატვირთოთ

Hover/Tooltip: კომპაქტური, საკვანძო სფეროებით და ბაზელინით.
Zoom/Brush: მაუსის/კლავიატურის დიაპაზონის გამოყოფა; ღილაკი „ჩამოაგდეს“.
Drill-down: დაწკაპუნება სეგმენტში - დეტალური ჭრილობა; breadcrumb დასაბრუნებლად.
სელექტორები: დიაპაზონის პრესეტები (24h/7d/30d), სეგმენტის ფილტრები, აბს/პროცენტის შეცვლა.

9) კომპონენტების შაბლონები (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) გაშვების შესრულება

დააკავშიროთ სერვერზე: დააბრუნეთ „რეგულარული“ ფანჯრები/კვანძები.
Canvas/WebGL: ათობით ათასი წერტილისა და თერმული ბარათისთვის; SVG - 2-3 ათასი ელემენტის და მკაფიო ხელმოწერების მისაღებად.
ჩამონათვალის/ცხრილების ვირტუალიზაცია: გადატვირთეთ გვერდები, როგორც გადახრა.
ქეშირება: ცხელი ტაილები, precompute „გუშინ/კვირა“.

11) სანდოობა და ანტი-ნიმუშები

შეუძლებელია:

მასშტაბის მანიპულირება (გაჭრა სვეტების ღერძი ნულამდე).
შეურიეთ სხვადასხვა დანაყოფები მეორადი ღერძისა და აშკარა ხელმოწერების გარეშე.
აშენეთ „ტყე“ გაჩერებული არეით 8-10 მწკრივით.
შეცვალეთ გამოტოვება ნულებით.
გამოიყენეთ 3D/ჩრდილები „სილამაზისთვის“.

12) ფორმულები, ერთეულები და ფორმატირება

ფული: მცირე ერთეულები/ათობითი ხაზები; აშკარად მიუთითეთ ვალუტა.
კონვერტაცია/წილი: პროცენტი ერთი ათობითი (საჭიროების შემთხვევაში - პ. p.) .
სიჩქარე/განაკვეთები: „საათში/დღეში“ - ხელი მოაწერეთ პერიოდს.
დამრგვალება: მნიშვნელოვან კატეგორიებამდე, რაოდენობათა რიგის დამალვის გარეშე.

13) ხარისხის მეტრიკის სპეციფიკა და SLO

აჩვენეთ error-budget burn (ბიუჯეტის დარჩენილი%) და გაფრთხილების დონე.
აფთიაქისთვის - stacked სტატუსის ბარები „OK/Degraded/Down“ + ინციდენტის ფანჯარა.
latency- სთვის - განაწილება (p50/p95/p99), „violin/boxplot“ მტევანი/ენდოინტამი.

14) Storitelling და auto-sammari

Narrative ბლოკი: 2-4 წინადადება „რა მოხდა“ + „რატომ“ + „რა უნდა გავაკეთოთ“.
სლაიდები/ექსპორტი: PDF/PNG/SVG შრიფტების და ყვავილების შენარჩუნებით; წყლის ნიშნები და ჭრის თარიღი.

15) ვიზუალიზაციის ტესტის გეგმა

Unit: ღერძების ფორმატი, ბინების გაანგარიშება, CI ფირები.
Integration: ფილტრები/დიაპაზონი/ლოკალი, drill-down და საპირისპირო ნავიგაცია.
E2E: სცენარი „ალერტიდან მოქმედებამდე“: დაწკაპუნება ანომალიის შესახებ - ფლეიბუკები.
A11y/i18n: ეკრანის მკითხველი, კლავიატურა, ხელმოწერების თარგმნა.
Perf: დიდი რიგების გამყიდველი, ცივი/warm cache, სტრესი 10 × წერტილზე.

16) ვიზუალიზაციის ხარისხის მეტრიკა

დრო Insight (TTI): საშუალო დრო პირველი დაწკაპუნებით/გაგებით.
Explained Rate: გრაფიკების წილი ხელმისაწვდომი Explain.
მოქმედება: სად გაკეთდა ვიჯეტის მოქმედებები.
Error/Noise: არასწორი ხელმოწერები, მომხმარებლის პრეტენზიები.
Perf p95: პირველი შინაარსის დრო და ინტერაქტიულობა.

17) გრაფიკის დიზაინის სია

სწორი ტიპის გრაფიკა
ნათელი ღერძები, ერთეულები, რიცხვების ფორმატი და თარიღები
კონტექსტი: baseline/SLO, შედარების პერიოდი, მენიუ
საგუშაგოების/ბლოკების/გადასინჯვების ჩვენება
ფერები და კონტრასტები (WCAG), არაუმეტეს 5 მწკრივი
ინტერაქტიულობა გადატვირთვის გარეშე: hover, zoom, drill-down
პროდუქტიულობა: დანერგვა, დანერგვა, Canvas/WebGL საჭიროების შემთხვევაში
CTA იქვე: ანგარიშის გახსნა/ფლეიბუკი/ალერტის შექმნა
ექსპორტი/ბურთი ჭრის თარიღით და ფილტრაციის პარამეტრებით

18) დაშბორდები

Consistency-kit: ერთიანი ნიშნები (შრიფტები, ზომები, პალიტრები), ტულტიპების ერთიანი ქცევა.
ვიჯეტის შაბლონები: KPI, timeseries, distribution, comparison, map, table.
„ჭკვიანი“ მინიშნებების სლოტები: „ანომალია“, დრაივერების ახსნა, მოქმედების ღილაკები.

19) განხორციელების გეგმა (3 გამეორება)

განმეორება 1 - Fundamentals (2-3 კვირა):

გრაფიკის ტიპები, ერთი მასშტაბები/ფორმატები, ბაზელინი/SLO, გამშვები/lag badges, ექსპორტი.

განმეორება 2 - Insight & A11y (3-4 კვირა):

პერიოდების შედარება, CI ფირები, მცირე მულტიპლიკაციები, ანომალიები/ბადეები, კლავიატურის ნავიგაცია.

Iteration 3 - Scale & Story (მუდმივად):

Downsampling/WebGL, Explain პანელი, Sammari მანქანები, dashboards და CTA.

20) მინი-FAQ

ყოველთვის უნდა დაიწყოთ ღერძი Y ნულიდან?
სვეტებისთვის - დიახ. ხაზებისთვის - არა აუცილებელი, მაგრამ მიუთითეთ ბასელინი და არ „მოატყუოთ“ მასშტაბით.

როგორ უნდა აჩვენოთ p95/p99 და არ გადატვირთოთ?
ფირზე percentiles ან მცირე ზომის multiples იგივე ღერძებით.

როგორ შევცვალოთ ნამცხვარი 8 სეგმენტით?
100% მოძრავი ბარები ან ცხრილი ბარები ხაზების შიგნით (bar-in-cell) + დახარისხება.

შედეგი

მეტრის ეფექტური ვიზუალიზაცია არის ფორმის სწორი არჩევანი + გულწრფელი კონტექსტი + მოსახერხებელი მოქმედებები. შეინარჩუნეთ მასშტაბებისა და ფორმატების ერთიანი სტანდარტები, აჩვენეთ გაურკვევლობა და გამოტოვება, მოდით, სწრაფი drill down და CTA, დაიცავით პროდუქტიულობა და წვდომა. შემდეგ გრაფიკა შეწყვეტს „სურათებს“ და გახდება გადაწყვეტილების მიღების ინსტრუმენტი.

მეტრიკის ვიზუალიზაცია

შედეგი

დაგვიკავშირდით

სწრაფი კავშირი

ვიდეო მალე განახლდება

ჩვენ ახლა ძალიან დაკავებული ვართ პროექტებით