تصور المقاييس

1) أهداف التصوير

افهم بسرعة: تعرف على الاتجاه/الشذوذ/التحول في 3-5 ثوانٍ.
قارن بشكل صحيح: الفترات والقطاعات والمتغيرات ألف/باء.
صدق البيانات: أظهر عدم اليقين والمصادر والنضارة.
التصرف: بجانب الرسم البياني - CTA، المرشحات، الروابط إلى كتب اللعب.

2) الأنواع المترية وأفضل الأشكال

3) المقاييس والمحاور والتجميع

المقاييس: خطية افتراضياً ؛ اللوغاريتمية - للنطاقات المتعددة ؛ النسبة المئوية - [0 ؛ 100].
الأساس الصفري: قضبان - من الصفر ؛ - لا يشترط وجود صفر (ولكن يبين خط الأساس).
المجموع: يوم/ساعة/دقيقة، ص 50/ص 95/ص 99 ؛ تجنب متوسط التوزيعات «الصاخبة».
الزران «D/N/H» (يوم/أسبوع/ساعة) و «↑/↓» في التسلسل الهرمي (region→strana→gorod).
نقاط أخذ العينات (تقليل الحجم): LTTB/MinMax لصفوف طويلة حتى لا تفقد التطرف.

4) السياق والمقارنات

مقارنة الفترة: «الحالي مقابل السابق» (تراكب مع خط منقط) و/أو مضاعفات صغيرة ؛ توقيع ∆ النسبية ∆ المطلقة.
الموسمية: فرق خلفية عطلة نهاية الأسبوع/العطلات، مناطق دافئة/باردة كل ساعة.
المعايير: المعايير الأفقية/الخطوط المستهدفة (SLO/SLA)، ووحدات الإشارات والأفق الزمني.
'1' الفترات الفاصلة بين الثقة: شرائط/أشرطة ± CI ؛ بالنسبة لـ A/B - أشرطة الخطأ و p-value/المصعد.

5) عدم اليقين والإغفالات والتنقيحات

الإغفالات: كسر الخط (لا تتصل بالصفر) ؛ «الضباب» الرمادي للنافذة غير المكتملة.
تأخر البيانات: شارة «البيانات متأخرة 12 دقيقة»، مع تناول طابع زمني.
التنقيحات: مناطق الفتحة الرقيقة «أعيد حسابها»، إشارة إلى التغيير.

6) اللون والشكل والتوافر (A11y)

لوحة: قاعدة محايدة ؛ أحمر - حرج، برتقالي - تحذير، أخضر - إيجابي.
استقلالية الألوان: مكررة مع القيمة/العلامات/التوقيعات ؛ على النقيض ≥ WCAG AA.
عدد الصفوف: ≤5 لكل رسم بياني ؛ مضاعفات/جوانب صغيرة.
الأحجام/النقرات: أهداف تفاعلية ≥ 32-40 بكسل ؛ حلقات التركيز، لوحة المفاتيح الملاحة.

7) التوقيع بشكل صحيح

المحاور: الوحدات، شكل الأرقام (1 234 56 ؛ 12. 3 ك ؛ 5. 2%); ملصقات البيانات مع الموقع.
الأسطورة: حسب ترتيب الأهمية البصرية ؛ يمكن النقر عليها لإدراج/استبعاد السلاسل.
الشروح: بإيجاز وفي القضية ("الإفراج، PSP_X" الحادث رقم 4217 ")، بالإشارة إلى الحدث.

8) التفاعل: لا تفرط في الحمل

التحليق/الأدوات: مضغوط، مع الحقول الرئيسية و ∆ مقابل خط الأساس.
التكبير/الفرشاة: اختيار الماوس/لوحة المفاتيح ؛ زر إعادة الضبط.
النقر فوق الجزء → القسم التفصيلي ؛ فتات الخبز للعودة.
المحددات: التعيينات المسبقة للنطاقات (24h/7d/30d)، مرشحات القطاعات، مفتاح «Abs/Central».

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/shadow من أجل الجمال

12) الصيغ والوحدات والشكل

النقود: وحدات ثانوية/سلاسل عشرية ؛ يحدد صراحة العملة.
التحويلات/الكسور: النسب المئوية مع كسر عشري واحد (إذا لزم الأمر - ص).
الأسعار/الأسعار: «في الساعة/في اليوم» - وقع الفترة.
التقريب: إلى أرقام كبيرة، دون إخفاء ترتيب القيم.

13) خصوصية الجودة ومقاييس SLO

أظهر مستويات حرق ميزانية الخطأ والتحذير.
للوقت المناسب - أشرطة الحالة المكدسة "OK/Degraded/Down' + نوافذ الحوادث.
للكمون - التوزيعات (p50/p95/p99)، «الكمان/المربع» حسب المجموعات/نقاط النهاية.

14) سرد القصص والسماري التلقائي

الكتلة السردية: 2-4 جمل «ماذا حدث» + «لماذا» + «ماذا تفعل».
الشرائح/التصدير: PDF/PNG/SVG بخطوط وألوان ؛ علامات مائية وتاريخ قطع.

15) خطة اختبار للتصورات

الوحدة: تنسيق المحور، حساب سلة المهملات، شريط CI.
التكامل: المرشحات/النطاقات/الموقع، والملاحة العكسية.
E2E: سيناريو التنبيه إلى العمل: النقر على دليل → الشاذ.
A11y/i18n: قارئات الشاشة، لوحة المفاتيح، ترجمة التوقيعات.
بيرف: عرض صفوف كبيرة، مخبأ بارد/دافئ، إجهاد عند 10 نقاط ×.

16) مقاييس جودة التصور

Time-to-Insight (TTI): متوسط الوقت للنقر/البصيرة أولاً.
المعدل الموضح - حصة الرسوم البيانية مع التوضيح المتاح.
معدل الإجراء: حيث تم تنفيذ الإجراءات من الودجة.
خطأ/ضوضاء: توقيعات غير صحيحة، شكاوى المستخدم.
Perf p95: time to first content and to interactivity.

17) قائمة مراجعة تصميم الجدول

• نوع الجدول الزمني الصحيح للمهمة
• مسح المحاور والوحدات والرقم وشكل التاريخ
• السياق: خط الأساس/مكتب الإحصاء، فترة المقارنة، الشروح
• إظهار الفجوات/التأخيرات/التنقيحات
• اللون والتباين (WCAG)، 5 صفوف كحد أقصى
• التفاعل بدون حمل زائد: تحوم، تصغير، حفر لأسفل
• الأداء: التجميع، التقليل، Canvas/WebGL عند الطلب
• CTA جنبًا إلى جنب: تقرير/دليل مفتوح/إنشاء تنبيه
• التصدير/المشاركة مع إعدادات تاريخ الشريحة والتصفية

18) تضمين في لوحات القيادة

مجموعة الاتساق: رموز موحدة (خطوط، أحجام، لوحات)، سلوك موحد للمحارف.
قوالب Widget: KPI, timeseries, distribution, comparison, map, table.
فتحات للمطالبات «الذكية»: شارة «شاذة»، تفسيرات السائق، أزرار الحركة.

19) خطة التنفيذ (3 تكرارات)

• أنواع الرسوم البيانية، والمقاييس/الأشكال الموحدة، وخط الأساس/SLO، والفجوات/شارات التأخير، والتصدير.

• مقارنات الفترة، أشرطة CI، مضاعفات صغيرة، شذوذ/شارات، تنقل لوحة المفاتيح.

• Downsampling/WebGL، لوحة شرح، السماري التلقائي، التجهيزات المسبقة للوحة القيادة و CTA.

20) الأسئلة الشائعة الصغيرة

هل يجب أن يبدأ محور y دائمًا من الصفر ؟

للأعمدة - نعم. بالنسبة للخطوط - ليست ضرورية، ولكن حدد خط الأساس ولا «تخدع» بالمقياس.

كيف تظهر p95/p99 وليس الحمل الزائد ؟

شريط مئوي أو مضاعفات صغيرة بنفس المحاور.

كيفية استبدال «الفطيرة» بـ 8 أجزاء ؟

100٪ قضبان مكدسة أو نوع بار في الخلية +.

المجموع

التصور المتري الفعال هو الاختيار الصحيح للشكل + السياق الصادق + الإجراءات المريحة. احتفظ بمعايير موحدة للمقاييس والتنسيقات، وأظهر عدم اليقين والإغفالات، وأعطي تدريبًا سريعًا للأسفل و CTA، واهتم بالأداء والتوافر. ثم ستتوقف الرسوم البيانية عن أن تكون «صورًا» وتصبح أداة قرار.