הדמיית מדדים

1) מטרות הדמיה

להבין במהירות: להכיר טרנד/אנומליה/שינוי ב 3-5 שניות.
השווה נכון: תקופות, מקטעים, וריאנטים A/B.
תאמינו לנתונים: להראות חוסר ודאות, מקורות, רעננות.
מערכה: ליד הגרף - CTA, מסננים, קישורים לספרי שעשועים.

2) סוגים מטריים וצורות טובות ביותר

3) קשקשים, גרזנים וצבירה

מאזניים: לינארי כברירת מחדל; לוגריתמי - לטווחים מרובים; אחוז - [ 0; 100].
אפס בסיס: סורגים - מאפס; קווים - אין דרישה של אפס (אבל להראות קו בסיס).
צבירה: יום/שעה/דקה, p50/p95/p99; הימנע מממוצע הפצות ”רועשות”.
Roll-up/Drill-down כפתורים ”D/N/H” (יום/שבוע/שעה) ו- ”dlocked/auth” בהיררכיה (אזור = strana = גורוד).
נקודות דגימה (downsampling): LTTB/MinMax עבור שורות ארוכות כדי לא לאבד קיצוניות.

4) הקשר והשוואות

השוואה תקופתית: ”זרם נגד קדם” (כיסוי עם קו מקווקו) ו/או כפולות קטנות; חתום באופן יחסי ומוחלט.
עונתיות: רצועות רקע של סוף שבוע/חג, אזורים חמים/קרים לפי שעה.
נקודות ציון: נורמה אופקית/קווי מטרה (SLO/SLA), יחידות סימן ואופק זמן.
מרווחי אמון: רצועות/קלטות netCI; עבור A/B - סורגים שגיאה ו p-ערך/מעלית.

5) אי ־ ודאות, השמטות, תיקונים

השמטות: לשבור את הקו (לא להתחבר עם אפס); ”פוגים” אפורים עבור החלון הלא שלם.
נתונים: נתונים ”התג הוא 12 דקות מאוחר יותר,” tooltip עם חותם זמן בלע.
תיקונים: אזורי צוהר דקים ”מחושבים מחדש”, התייחסות לצ 'אנגלוג.

6) צבע, צורה וזמינות (A11y)

Palette: בסיס נייטרלי; אדום - קריטי, כתום - אזהרה, ירוק - חיובי.
עצמאות צבעונית: שכפול עם ערך/סמנים/חתימות; חדות WCAG AA.
מספר שורות: סימון 5 לגרף; אחרת, כפולות/פנים קטנות.
גדלים/קליקים: מטרות אינטראקטיביות: 32-40 px; טבעות מיקוד, ניווט מקלדת.

7) חתימה נכונה

צירים: יחידות, פורמט מספר (1,234,56; 12. 3k; 5. 2%); תוויות נתונים עם מקום.
אגדה: לפי סדר החשיבות החזותית; קליק לכלול/לא כולל סדרה.
אנוטציות: בקצרה ובמקרה (”שחרור”, PSP_X ”תקרית # 4217”), עם התייחסות לאירוע.

8) אינטראקטיביות: לא עומס יתר

Hover/Tooltip: compact, עם שדות מפתח ו-Loberve baseline.
זום/ברוש: בחירת עכבר/מקלדת; כפתור איפוס.
תרגיל למטה: לחץ על קטע # סעיף מפורט; פירורי לחם כדי לחזור.
סלקטורים: טווחים (24h/7d/30d), מסנני מקטעים, מתג ”Abs/אחוז”.

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) יצירת ביצועים

צבירה בשרת: החזר כבר ”נכון” חלונות/כמויות.
קנבס/WebGL: עבור עשרות אלפי נקודות ומפות חום; SVG - עבור 2-3 אלף אלמנטים וחתימות ברורות.
רשימת/טבלה וירטואליזציה - טען עמודים תוך כדי גלילה.
מטמון: אריחים חמים, מראש ”אתמול/שבוע”.

11) תוקף ואנטי דפוסים

• לתפעל את הסקאלה (לקצץ את ציר העמודות שמעל לאפס).
• לערבב יחידות שונות ללא ציר משני וחתימות מפורשות.
• לבנות ”יער” ערום עם 8-10 שורות.
• החלף פערים עם אפסים.
• השתמש 3D/shadow למען ”יופי”.

12) נוסחאות, יחידות ותבנית

כסף: יחידות קטנות/מחרוזות עשרוניות; לציין במפורש מטבע.

המרות/שברים: אחוזים עם אחד עשרוני (במידת הצורך - p. p.)

תעריפים/תעריפים: ”לשעה/ליום” - לחתום על התקופה.
עיגול: לספרות משמעותיות, בלי להסתיר את סדר הערכים.

13) מפרט איכות ומדדי SLO

הצג שגיאה בתקציב שרפה ורמות אזהרה.
עבור סרגלי מצב נערמים "OK/Degraded/Down' + חלונות תקרית.
עבור latency - הפצות (p50/p95/p99), ”כינור/בוקס פלוט” על ידי אשכולות/נקודות קצה.

14) סיפור סיפורים וסמארי אוטומטי

בלוק נרטיבי: 2-4 משפטים ”מה קרה” + ”למה” + ”מה לעשות”.
שקופיות/ייצוא: PDF/PNG/SVG עם גופנים וצבעים; סימני מים ותאריך חיתוך.

15) תוכנית מבחן לחיזוי

יחידה: נוסחת ציר, חישוב בין, קלטת מודיע.
אינטגרציה: מסננים/טווחים/לוקאל, מקדחה כלפי מטה וניווט הפוך.

E2E: תרחיש התראה לפעולה: לחיצה על אנומליה

A11y/i18n: קוראי מסך, מקלדת, תרגום חתימות.
Perf: להפוך של שורות גדולות, מטמון קר/חם, מתח ב 10 × נקודות.

16) מדדי איכות ויזואליזציה

זמן לתובנה (TTI): זמן מדיאן ללחוץ/תובנה ראשונה.
קצב מוסבר - נתח של גרפים עם הסבר זמין.
קצב פעולה: היכן שבוצעו הפעולות מהווידג 'ט.
שגיאה/רעש: חתימות שגויות, תלונות משתמש.
Perf p95: זמן לתוכן ראשון ולקשר אינטראקטיבי.

17) בדיקת עיצוב לוח זמנים

[ ] סוג לוח הזמנים הנכון למשימה

[ ] צירים נקיים, יחידות, מספר ופורמט תאריך

[ ] הקשר: קו בסיס/SLO, תקופת השוואה, הערות

[ ] הצג פערים/לאגות/תיקונים

[ ] צבע וניגוד (WCAG), 5 שורות מקסימום

[ ] אינטראקטיביות ללא עומס יתר:

ביצועים : צבירה, ירידה, קנבס/WebGL לפי דרישה

[ ] CTA זה לצד זה:

[ ] יצוא/שיתוף עם פרוסות תאריך והגדרות סינון

18) הטבעה בלוחות מחוונים

אסימונים אחידים (גופנים, גדלים, פלטים), התנהגות אחידה של גפנים.
תבניות ווידג 'ט: KPI, זמנים, הפצה, השוואה, מפה, שולחן.
חריצים לתג ”חכם”: תג ”חריג”, הסברים לנהג, כפתורי פעולה.

19) תוכנית יישום (3 איטרציות)

• סוגים של גרפים, קשקשים/פורמטים מאוחדים, קו בסיס/SLO, תגים/לאג, יצוא.

• השוואות תקופתיות, קלטות מודיע, כפולות קטנות, חריגות/תגים, ניווט מקלדת.

• מדשדש/WebGL, לוח הסברה, אוטומטי-סמרי, לוח מחוונים וסי-טי-איי.

20) מיני ־ FAQ

האם ציר y תמיד צריך להתחיל מאפס?
לעמודות - כן. לקווים - לא הכרחיים, אבל לציין קו בסיס ולא ”להטעות” לפי קנה מידה.

איך להראות p95/p99 ולא עומס יתר?
קלטת אחוזון או כפולות קטנות עם אותם צירים.

איך להחליף את ה ”פאי” ב-8 מקטעים?
100% סורגים ערומים או סוג בר-in-cell +.

סך הכל

הדמיה מטרית אפקטיבית היא הבחירה הנכונה של צורה + הקשר ישר + פעולות נוחות. שמרו על סטנדרטים אחידים לסקאלות ולפורמטים, הראו חוסר ודאות והשמטות, תנו תרגיל מהיר למטה וCTA, דאגו לביצועים ולזמינות. אז הגרפים יפסיקו להיות ”תמונות” ויהפכו לכלי החלטה.