Սիմվոլիզացիա մետրիկ

1) Տեսողական նպատակներ

Հասկանալու համար '3-5 վայրկյանում ճանաչել միտումը/անոմալիան/շարժումը։

Համեմատել ճիշտ 'ժամանակահատվածներ, հատվածներ, տարբերակներ A/B

Հավատալ տվյալներին 'ցույց տալ անորոշությունը, աղբյուրները, թարմ։

Գործեք 'գրաֆիկի կողքին' CTA, ֆիլտրեր, էջերի հղումներ։

2) Մեթրիկի տեսակները և լավագույն ձևերը

3) Մասշտաբներ, առանցքներ և համախմբում

Մասշտաբներ 'գծային լռելյայն; լոգարիթմական 'կարճ միջակայքների համար; տոկոսն է [0; 100].

Զրոյական բազիս 'սյունակներ' զրոյից; գծերը առանց զրոյի պահանջարկի (բայց ցույց տվեք baseline)։

Համախմբումը 'ցերեկային/ժամ/րոպե, p50/p95/p99; խուսափեք միջինից «աղմկոտ» բաշխման համար։

Roll-up/Mastill-down: «D/N/H» կոճակները (օր/շաբաթ/ժամ) և «108/108» հիերարխիայի վրա (տարածաշրջանը ռուսական քաղաքն է)։

Կետերի նմուշը (downsampling) 'LTTB/MinMax երկար շարքերի համար, որպեսզի չկորցնի ծայրահեղականությունը։

4) Համատեքստը և համեմատությունը

Ժամանակահատվածների համեմատությունը '«Ընթացիկ vs նախորդ» (overlay punctir) և/կամ small multiples; ստորագրեք հարաբերական կարգավորումը և բացարձակ կարգավորումը։

Սեզոնը '«հանգստյան/արձակուրդների» ֆոնային շերտերը, ժամացույցի տաք/սառը գոտիները։

Բենչմարկներ 'հորիզոնական գծեր նորմեր/նպատակներ (SLO/SLA), ստորագրեք միավորներ և ժամանակային հորիզոն։

Վստահության ընդմիջումները 'ժապավենը/ժապավենը/CI; A/B-ի համար 'error bars և p-value/վերելակ։

5) Անորոշություն, բաց թողիր

Բաց թողեք 'կոտրեք գիծը (մի միացրեք զրոյին); մոխրագույն «մառախուղները» անավարտ պատուհանի համար։

Տվյալների բայերը ՝ բեյջը «տվյալները հետ են մնում 12 մղոնով», tooltip timestamp ingest-ից։

Տե՛ ս ՝ հատվածների բարակ հարվածը «հաշվարկված» է, հղում changelog-ին։

6) Գույնը, ձևը և հասանելիությունը (A11y)

Պալիտրա 'չեզոք հիմքը; կարմիր - քննադատական, նարնջագույն - նախազգուշացում, կանաչ - պոզիտիվ։

Գունավոր անկախություն 'կրկնօրինակեք իմաստը/մարկերները/ստորագրությունները։ հակադրություն WCAG AA։

Շարքերի քանակը ՝ 355 մեկ գրաֆիկի վրա; հակառակ դեպքում 'small multiples/ֆասեթներ։

Չափերը/կլիկները ՝ ինտերակտիվ նպատակները 32-40 px; ֆոկուս օղակներ, ստեղնաշարային ռոտացիա։

7) Մենք ճիշտ ենք ստորագրում

Առանցքները ՝ չափման միավորներ, թվերի ձևաչափը (1 234.56; 12. 3k; 5. 2%); ամսաթիվը տեղական հետ։

Լեգենդը 'տեսողական կարևորության։ կլիկաբելային շարքերի ներառման/բացառման համար։

Սենսացիա 'կարճ և դեպքում («PMS _ X», «պատահականություն # 3817»), հղում իրադարձությանը։

8) Ինտերակտիվ. Մի ծանրաբեռնեք

Hover/Tooltip: կոմպակտ, հիմնական դաշտերով և www.vs baseline-ով։

Zoom/Brush 'մկնիկի/ստեղնաշարի բաժանումը; «Նետել» կոճակը։

Medil-down: հատվածի կլիկը մանրամասն կտրում է։ breadcrumb համար։

Սելեկտորները ՝ միջակայքների ճնշումները (111 ժամ/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/WinGL 'տասնյակ հազարավոր կետերի և ջերմային քարտեզների համար։ SVG-ը 2-3 հազար տարրերի և հստակ ստորագրությունների համար է։

Ցուցակների/աղյուսակների վիրտուալիզացիան 'էջերը բեռնաթափել, քանի որ դրանք պտտվում են։

Քեշինգը 'տաք թայլեր, precomp.ru «երեկ/շաբաթ»։

11) Հուսալիությունը և հակատիպերը

Դուք չեք կարող

Շահարկել մասշտաբով (կտրել սյունակների առանցքը զրոյից բարձր)։

Խառնեք տարբեր միավորներ առանց հիբրիդային առանցքի և ակնհայտ ստորագրությունների։

Կառուցել «անտառ» stacked-area 8-10 շարքերով։

Փոխեք բացթողումները։

Օգտագործել 3D/տենյուկներ գեղեցկության համար։

12) Բանաձևը, միավորները և անջատումը

Փողը ՝ minor units/տասանորդ տողեր; հստակ ցույց տալ արժույթը։

Կոնվերսիա/մասնաբաժին 'մեկ տասանորդ (անհրաժեշտության դեպքում' p. p.) .

Արագությունը/տոկոսադրույքները '«ժամը/օրը», ստորագրեք ժամանակահատվածը։

Կլորացումը 'մինչև նշանակալի օրինագծերը, առանց թաքցնելու մեծությունների կարգը։

13) Հատկության և SLO-ի առանձնահատկությունները

Ցույց տվեք error-budget burn (բյուջեի մնացած տոկոսը) և նախազգուշացման մակարդակները։

Aptaima-ի համար stacked կարգավիճակը «OK/Degraded/Down» + պատուհանը։

Latency-ի համար (p50/p95/p99), «violin/boxplot» կլաստերներով/endpointam։

14) Սթորթելինգը և ավտո-սամմարին

Narrative բլոկը '2-4 առաջարկներ «, թե ինչ է տեղի ունեցել» + «ինչու» + «ինչ անել»։

Սլայդներ/էքսպորտներ ՝ PDF/PNG/SVG, տառատեսակների և գույների պահպանումով։ հիբրիդային նշանները և կտրման ամսաթիվը։

15) Տեսողական տեսողական պլան

Unit 'առանցքների ձևաչափը, բինի հաշվարկումը, CI ժապավենը։

Integration: ֆիլտրեր/միջակայքներ/www.orl, www.ill-down և հակառակը։

E2E: սցենարը «Ալերտից դեպի գործողություն» 'անոմալիայի տեսահոլովակ։

A1y/i18n: էկրանի ընթերցողներ, ստեղնաշար, ստորագրությունների թարգմանություն։

Պերֆ 'մեծ շարքերի ռենդեր, cold/warm cache, սթրեսը 10 հազար կետերի վրա։

16) Վիզալիզացիայի որակի մետրերը

Time-to-Insight (TTI) 'ժամանակի մեդիան մինչև առաջին տեսահոլովակը/հասկացողությունը։

Windained Rate-ը 'Medain-ի հասանելի գրաֆիկների մի մասը։

Action Rate: Որտեղ կատարվել էին վիջետի գործողությունները։

Error/Medise: սխալ ստորագրություններ, օգտագործողների բողոքներ։

Perf p95: ժամանակը մինչև առաջին բովանդակությունը և մինչև ինտերակտիվ։

17) Դիզայնի թուղթը գրաֆիկայի

• Ճիշտ գրաֆիկի տեսակը խնդրի տակ է
• Պարզ առանցքները, միավորները, թվերի ձևաչափը և ամսաթիվը
• Համատեքստը 'baseline/SLO, համեմատության ժամանակահատվածը, ծանոթագրությունը
• Բացթողումների/բայերի/վերանայման ցուցադրություն/
• Գույներն ու հակադրությունը (WCAG), ոչ ավելի քան հինգ շարքեր։
• Ինտերակտիվ առանց ծանրաբեռնվածության 'hover, zoom, www.ill-down
• Արտադրողականություն ՝ համախմբում, downsampling, Canvas/WinGL կարիքի դեպքում
• CTA մոտ 'բացել զեկույց/պլեյբուկ/ստեղծել ալերտ։
• Էքսպորտը/շարինգը կտրման ամսաթվով և ֆիլտրերի մատակարարմամբ

18) Dashbords

Consistency-kit: միասնական հոսանքներ (տառատեսակներ, չափսեր, պալիտրա), թուլտիպների միասնական վարքագիծը։

Վիջեթների ձևանմուշները ՝ KPI, timeseries, distribution, comparison, map, table։

«Խելացի» հուշումների համար արցունքները 'բեյջ «անոմալիա», վարորդների բացատրությունները, գործողությունների կոճակները։

19) Իրականացման պլանը (3 իտացիա)

Iteration 1-Fundamentals (2-3 շաբաթ)

Գծապատկերների տեսակները, միասնական մասշտաբները/մասշտաբները, baseline/SLO, բացթողումներ/lag-baji, էքսպորտը։

Iteration 2 - Insight & A11y (3-4 շաբաթ)

Համեմատությունները, CI-ժապավենները, small multiples, anomalia/baji, ստեղնաշարի լուծումը։

Iteration 3 - Scale & Story (շարունակաբար)։

Downsampling/WinGL, Altain-վահանակ, Auto-սամարի, dashbords և CTA-ի ճնշումները։

20) Mini-FAQ

Արդյո՞ ք պետք է միշտ սկսել Y առանցքը զրոյից։

Սյուների համար այո։ Գծերի համար պարտադիր չէ, բայց նշեք baseline-ը և մի «խաբեք» մասշտաբով։

Ինչպե՞ ս ցույց տալ p95/p99 և չփոխանցել։

Percentiles կամ small multiples ժապավենը նույն առանցքներով։

Ինչպե՞ ս փոխարինել «կարկանդակը» 8 հատվածով։

100% stacked bars կամ թմբուկի հետ տողերի ներսում (bar-in-cell) + տեսակավորում։

Արդյունքը

Մեթրիկի արդյունավետ տեսողությունն այն է, որ ձևի + ազնիվ համատեքստը + հարմար է։ Պահեք մասշտաբի և ձևաչափերի միասնական ստանդարտները, ցույց տվեք անորոշություն և բացթողումներ, եկեք արագ անցնենք դաուն-դաուն և CTA-ն, հոգ տանել արտադրողականության և հասանելիության մասին։ Այդ ժամանակ գրաֆիկները կդադարեն լինել «նկարներ» և կդառնան որոշումների կայացման գործիք։