Метриканы көрсету

1) Визуализация мақсаттары

Тез түсіну: трендті/аномалияны/ауысуды 3-5 секундта тану.

Дұрыс салыстыру: кезеңдер, сегменттер, A/B нұсқалары

Деректерге сену: белгісіздікті, көздерді, ашықтықты көрсету.
Әрекет ету: кестенің жанында - CTA, сүзгілер, плейбуктерге сілтемелер.

2) Метрика түрлері және үздік пішіндер

3) Шкала, ось және агрегаттау

Шкалалар: әдепкі сызықтық; логарифмдік - еселі диапазондар үшін; пайыздық - [0; 100].
Нөлдік базис: бағандар - нөлден бастап; сызықтар - нөл талап етілмейді (бірақ baseline көрсетіңіз).
Агрегаттау: күндізгі/сағаттық/минуттық, p50/p95/p99; «шулы» бөлулер үшін орташадан аулақ болыңыз.
Roll-up/Drill-down: иерархия бойынша «Д/Н/С» (күн/апта/сағат) және «↑/↓» (өңір → ел → қала) түймелері.
Нүктелерді таңдау (downsampling): LTTB/MinMax ұзын қатарлар үшін экстремумдарды жоғалтпау үшін.

4) Контекст және салыстыру

Кезеңдерді салыстыру: «Ағымдағы vs Алдыңғы» (overlay) және/немесе small multiples; салыстырмалы ∆ және абсолюттік ∆ қол қойыңыз.
Маусымдылық: «демалыс/мерекелер» фондық жолақтары, сағат бойынша жылы/суық аймақтар.
Бенчмаркалар: нормалар/мақсаттардың көлденең сызықтары (SLO/SLA), бірліктер мен уақыт көкжиегіне қол қойыңыз.
Сенім аралықтары: CI ± жолақтар/таспалар; A/B үшін - error bars және p-value/лифт.

5) Белгісіздік, ауытқулар, ревизиялар

Ауытқулар: сызықты үзіңіз (нөлмен жалғамаңыз); аяқталмаған терезеге арналған сұр «тұман».
Деректер лагтары: бейдж «деректер 12 минутқа артта қалады», tooltip timestamp ingest.
Тексеру: учаскелерді жіңішке штрихтау «қайта саналды», changelog сілтемесі.

6) Түсі, пішіні және қолжетімділігі (A11y)

Палитра: бейтарап база; қызыл - сыни, қызғылт сары - ескерту, жасыл - оң.
Түс-тәуелсіздік: мәнмен/маркерлермен/қолтаңбалармен қайталаңыз; WCAG AA ≥ қарама-қарсылығы.
Қатарлар саны: бір кестеге ≤ 5; басқаша - small multiples/фасетка.
Өлшемдері/басулары: интерактивті мақсаттар ≥ 32-40 px; фокус-сақина, клавиатуралық навигация.

7) Дұрыс қол қойыңыз

Біліктер: өлшем бірліктері, сандар форматы (1 234,56; 12. 3k; 5. 2%); жергілікті белгі-күні.
Аңыз: көрнекі маңызды ретімен; қатарларды қосу/алып тастау үшін кликабельді.
Аннотациялар: қысқа және іс бойынша ("релиз PSP_X", "инцидент # 4217"), оқиғаға сілтеме жасай отырып.

8) Интерактивтілік: артық жүктемеңіз

Hover/Tooltip: ықшам, негізгі өрістері мен ∆ бар vs baseline.
Zoom/Brush: тінтуірмен/пернетақтамен таңдау; «Қалпына келтіру» түймешігі.
Drill-down: сегментті басу → егжей-тегжейлі кесу; қайтару үшін breadcrumb.
Селекторлар: диапазондар пресеттері (24ч/7д/30д), сегменттердің сүзгілері, «Абс/Пайыз» қосқышы.

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 қатары бар stacked-area «орман» құру.
• Рұқсатнамаларды нөлге ауыстыру.
• 3D/көлеңкелерді «сұлулық» үшін пайдалану.

12) Формулалар, бірліктер және пішімдеу

Ақша: minor units/ондық жолдар; валютаны анық көрсету.
Конверсиялар/үлестер: бір ондық пайызбен (қажет болған жағдайда - р. p.) .
Жылдамдықтар/мөлшерлемелер: «сағатына/күніне» - кезеңге қол қойыңыз.
Дөңгелектеу: мәнді разрядтарға дейін, шама тәртібін жасырмай.

13) Сапа метрикасының және SLO ерекшелігі

error-budget burn (қалған% бюджет) және ескерту деңгейлерін көрсетіңіз.
Аптайм үшін - stacked статус-барлар «OK/Degraded/Down» + оқиғалар терезелері.
latency үшін - кластерлер/эндпоинттер бойынша бөлу (p50/p95/p99), «violin/boxplot».

14) Сторителлинг және авто-саммарлар

Narrative блок: 2-4 сөйлем «не болды» + «неге» + «не істеу керек».
Слайдтар/экспорт: Қаріптер мен түстерді сақтай отырып, PDF/PNG/SVG; су белгілері және кесу күні.

15) Визуализациялауға арналған тест-жоспар

Unit: білік пішімі, бинді, CI-таспаны есептеу.
Integration: сүзгілер/ауқымдар/локаль, drill-down және кері навигация.
E2E: «алертадан әрекетке» сценарийі: аномалия бойынша басу → ойнату.
A11y/i18n: экрандық оқырмандар, пернетақта, қолтаңбаларды аудару.
Perf: үлкен қатарлардың рендері, cold/warm cache, 10 × нүктеге стресс.

16) Визуализация сапасының метрикасы

Time-to-Insight (TTI): бірінші басуға/түсінуге дейінгі уақыт медианы.
Explained Rate: қол жетімді Explain графиктерінің үлесі.
Action Rate: виджеттен әрекеттер орындалған.
Error/Noise: дұрыс емес қолтаңбалар, пайдаланушылардың шағымдары.
Perf p95: бірінші мазмұнға және интерактивтілікке дейінгі уақыт.

17) Графика дизайнының чек-парағы

• Тапсырманың дұрыс графикалық түрі
• Анық біліктер, бірліктер, сандар мен күндер пішімі
• Контексті: baseline/SLO, салыстыру кезеңі, аңдатпа
• Рұқсатнамаларды/лагтарды/тексерулерді көрсету
• Түстер мен контраст (WCAG), 5 қатардан артық емес
• Шамадан тыс жүктеусіз интерактивтілік: hover, zoom, drill-down
• Өнімділігі: біріктіру, downsampling, Canvas/WebGL қажет болғанда
• CTA жанында: есеп/playbook ашу/алерт жасау
• Кесілген күні және сүзгі параметрлері бар экспорт/sharing

18) Дашбордтарға қою

Consistency-kit: бірыңғай токендер (қаріптер, өлшемдер, палитралар), бірыңғай тултиптер мінез-құлқы.
Widget үлгілері: KPI, timeseries, distribution, comparison, map, table.
«Ақылды» кеңестер үшін слоттар: «аномалия» бейджі, драйверлердің түсіндірмелері, әрекет түймешіктері.

19) Енгізу жоспары (3 итерация)

• Графиктердің түрлері, бірыңғай шкала/пішімдер, baseline/SLO, өткізіп жіберу/лаг-бейдждер, экспорт.

• Кезеңдерді салыстыру, CI-ленталар, small multiples, аномалиялар/бейдждер, клавиатуралық навигация.

• Downsampling/WebGL, Explain панелі, авто саммарлар, дашбордтар мен CTA пресеттері.

20) Mini-FAQ

Y осін әрдайым нөлден бастау керек пе?
Бағандар үшін - иә. Сызықтар үшін - міндетті емес, бірақ baseline көрсетіңіз және масштабпен «алдаңыз».

p95/p99 қалай көрсету керек және артық жүктемеу керек?
Бірдей осьтері бар percentiles немесе small multiples таспасы.

8 сегменті бар «бәлішті» немен ауыстыру керек?
100% stacked bars немесе жолдар ішіндегі барлары бар кесте (bar-in-cell) + сұрыптау.

Жиынтығы

Метриктерді тиімді визуализациялау - бұл дұрыс пішінді таңдау + адал контекст + ыңғайлы әрекеттер. Шкалалар мен пішімдердің бірыңғай стандарттарын сақтаңыз, белгісіздік пен ауытқуларды көрсетіңіз, жылдам drill down және CTA беріңіз, өнімділік пен қолжетімділікті сақтаңыз. Сонда графиктер «сурет» болуын тоқтатып, шешім қабылдау құралына айналады.