تجسم متریک

1) اهداف تصویربرداری

درک سریع: تشخیص روند/ناهنجاری/تغییر در 3-5 ثانیه.
به درستی مقایسه کنید: دوره ها، بخش ها، انواع A/B.
داده ها را باور کنید: عدم اطمینان، منابع، طراوت را نشان دهید.
عمل: در کنار نمودار - CTA، فیلتر، لینک به playbooks.

2) انواع متریک و بهترین اشکال

3) مقیاس ها، محورها و تجمع

مقیاس: خطی به طور پیش فرض ؛ لگاریتمی - برای محدوده های مختلف ؛ درصد - [0; 100].
پایه صفر: میله ها - از ابتدا ؛ خطوط - بدون نیاز به صفر (اما نشان می دهد خط پایه).
تجمع: روز/ساعت/دقیقه، p50/p95/p99 ؛ اجتناب از متوسط برای توزیع «پر سر و صدا».
دکمه های «D/N/H» (روز/هفته/ساعت) و «↑/↓» در سلسله مراتب (منطقه → strana → gorod).
نقاط نمونه برداری (downsampling): LTTB/MinMax برای ردیف های طولانی به طوری که به از دست دادن افراط نیست.

4) زمینه و مقایسه

مقایسه دوره: «فعلی در مقابل قبلی» (پوشش با خط نقطه چین) و/یا چند ضلعی کوچک ؛ ∆ نسبی و ∆ مطلق را امضا کنید.
فصلی: گروه های پس زمینه آخر هفته/تعطیلات، مناطق گرم/سرد در ساعت.
معیارها: خطوط افقی هنجار/هدف (SLO/SLA)، واحدهای نشانه و افق زمانی.
فواصل اعتماد: نوار/نوار ± CI ؛ برای A/B - میله های خطا و P-value/آسانسور.

5) عدم اطمینان، حذفیات، تجدید نظر

حذفیات: شکستن خط (با صفر ارتباط برقرار نمی); «مه» خاکستری برای پنجره ناقص.
داده ها عقب می افتد: نشان «داده ها 12 دقیقه پشت سر گذاشته شده است»، راهنمای ابزار با استفاده از زمان سنج.
تجدید نظر: مناطق نازک «محاسبه مجدد»، اشاره به changelog.

6) رنگ، شکل و در دسترس بودن (A11y)

پالت: پایه خنثی ؛ قرمز - بحرانی، نارنجی - هشدار، سبز - مثبت.
استقلال رنگ: تکراری با ارزش/نشانگر/امضا ؛ کنتراست ≥ WCAG AA.
تعداد ردیف ها: ≤5 در هر نمودار ؛ در غیر این صورت چند برابر کوچک/facets.
اندازه/کلیک: اهداف تعاملی ≥ 32-40 پیکسل ؛ حلقه تمرکز، ناوبری صفحه کلید.

7) امضای صحیح

محورها: واحد، فرمت شماره (1,234,56 ؛ 12. 3K ؛ 5. 2%); برچسب های داده با محل.
افسانه: به ترتیب اهمیت بصری ؛ قابل کلیک برای شامل/حذف سری.
حاشیه نویسی: به طور خلاصه و در مورد ("انتشار PSP_X،" حادثه شماره 4217 ")، با اشاره به این رویداد.

8) تعامل: بیش از حد بارگیری نکنید

شناور/راهنمای ابزار: جمع و جور، با زمینه های کلیدی و ∆ در مقابل پایه.

زوم/قلم مو: انتخاب ماوس/صفحه کلید ؛ دکمه بازنشانی

تمرین پایین: بر روی بخش → بخش دقیق کلیک کنید ؛ نان سوخاری برای بازگشت

انتخابگرها: ایستگاه از پیش تنظیم محدوده (24h/7d/30d)، فیلترهای بخش، سوئیچ «Abs/Percentage».

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) عملکرد رندر

Aggregate در سرور: پنجره ها/چندک های «صحیح» را برگردانید.
Canvas/WebGL: برای ده ها هزار نقطه و نقشه های گرما ؛ SVG - برای ≤2 -3 هزار عنصر و امضای روشن است.
مجازی سازی لیست/جدول - بارگذاری صفحات همانطور که حرکت می کنید.
ذخیره کردن: کاشی های داغ، محاسبه «دیروز/هفته».

11) اعتبار و ضد الگوهای

• مقیاس را دستکاری کنید (محور ستون های بالای صفر را برش دهید).
• مخلوط واحدهای مختلف بدون محور ثانویه و امضای صریح.
• یک «جنگل» با 8 تا 10 ردیف ایجاد کنید.
• شکاف ها را با صفر جایگزین کنید.
• از 3D/shadow برای «زیبایی» استفاده کنید.

12) فرمول ها، واحدها و قالب بندی

پول: واحدهای کوچک/رشته های اعشاری ؛ به صراحت مشخص ارز.
Conversions/fractions: درصد با یک اعشار (در صورت لزوم - p. p.).
نرخ/نرخ: «در ساعت/در روز» - دوره را امضا کنید.
گرد کردن: به ارقام معنی دار، بدون پنهان کردن ترتیب مقادیر.

13) ویژگی کیفیت و معیارهای SLO

نمایش سطوح هشدار و سوزاندن بودجه خطا.
برای پنجره های وضعیت «OK/Degraded/Down» + پنجره های حادثه.
برای تاخیر - توزیع (p50/p95/p99)، «ویولن/boxplot» توسط خوشه/endpoints.

14) داستان سرایی و خودکار سماری

بلوک روایت: 2-4 جمله «چه اتفاقی افتاد» + «چرا» + «چه کاری باید انجام شود».
اسلاید/صادرات: PDF/PNG/SVG با فونت و رنگ ؛ علامت های سفید و تاریخ قطع.

15) طرح تست برای تجسم

واحد: فرمت محور، محاسبه بن، نوار CI.
ادغام: فیلترها/محدوده/محلی، حفاری و ناوبری معکوس.
E2E: سناریوی هشدار به عمل: کلیک کردن بر روی یک ناهنجاری → playbook.
A11y/i18n: خوانندگان صفحه نمایش، صفحه کلید، ترجمه امضا.
Perf: ارائه ردیف های بزرگ، کش سرد/گرم، استرس در 10 نقطه ×.

16) معیارهای کیفیت تجسم

Time-to-Insight (TTI): زمان متوسط برای اولین کلیک/بینش.
نرخ توضیح داده شده - سهم نمودار با توضیح داده شده در دسترس است.
Action Rate: جایی که اقدامات از ویجت انجام شده است.
خطا/سر و صدا: امضای نادرست، شکایات کاربر.

Perf p95: زمان اولین محتوا و تعامل

17) چک لیست طراحی برنامه

• نوع برنامه صحیح برای کار
• محورهای روشن، واحد، تعداد و فرمت تاریخ
• زمینه: پایه/SLO، دوره مقایسه، حاشیه نویسی
• نمایش شکاف/وقفه/تجدید نظر
• رنگ و کنتراست (WCAG)، 5 ردیف حداکثر
• تعامل بدون اضافه بار: شناور، زوم، مته پایین
• عملکرد: تجمع، downsampling، بوم/WebGL در تقاضا
• CTA در کنار هم: گزارش باز/playbook/ایجاد هشدار
• صادرات/اشتراک گذاری با تاریخ برش و تنظیمات فیلتر

18) جاسازی در داشبورد

سازگاری کیت: نشانه های یکنواخت (فونت ها، اندازه ها، پالت ها)، رفتار یکنواخت فونت ها.
قالب ویجت: KPI, timeseries, توزیع, مقایسه, نقشه, جدول.
اسلات برای «هوشمند» باعث می شود: نشان «ناهنجاری»، توضیحات راننده، دکمه های عمل.

19) برنامه پیاده سازی (3 تکرار)

• انواع نمودارها، مقیاس ها/فرمت های یکپارچه، پایه/SLO، نشان های شکاف/تاخیر، صادرات.

• مقایسه دوره، نوار CI، چند برابر کوچک، ناهنجاری/مدالها، ناوبری صفحه کلید.

• Downsampling/WebGL، پانل توضیح، خودکار ساماری، ایستگاه از پیش تنظیم داشبورد و CTA.

20) مینی سوالات متداول

آیا محور y همیشه باید از ابتدا شروع شود ؟

برای ستون ها - بله. برای خطوط - لازم نیست، اما خط پایه را مشخص کنید و با مقیاس «فریب» ندهید.

چگونه برای نشان دادن p95/p99 و اضافه بار نیست ؟

درصد نوار یا چند برابر کوچک با همان محورها.

چگونه می توان «پای» را با 8 بخش جایگزین کرد ؟

100٪ میله های انباشته یا نوار در سلول + مرتب سازی.

مجموع

تجسم متریک موثر انتخاب صحیح فرم + زمینه صادقانه + اقدامات مناسب است. استانداردهای یکنواخت را برای مقیاس ها و فرمت ها حفظ کنید، عدم اطمینان و نادیده گرفتن را نشان دهید، تمرین سریع و CTA را انجام دهید، از عملکرد و در دسترس بودن مراقبت کنید. سپس نمودارها «تصاویر» را متوقف می کنند و به یک ابزار تصمیم گیری تبدیل می شوند.