הסברים קצרים מותאמים אישית

אפשר להתאים אישית את תיאורי הכלים שמופיעים כשמשתמשים מעבירים את העכבר מעל רכיבים בהדמיות של Looker. בעזרת תיאורי כלים מותאמים אישית תוכלו לספק יותר הקשר, להציג מדדים נוספים ולהתאים אישית את המידע שמוצג למשתמשים. באמצעות הגדרת הוויזואליזציה Custom Tooltip (הסבר מותאם אישית), אפשר להגדיר הסברים קצרים בכלי לעריכת הוויזואליזציה ב-Explore באמצעות שילוב של הגדרות ממשק משתמש ועורך HTML שתומך בתבניות Liquid.

בדף הזה מוסבר איך להפעיל את הגדרת ההמחשה החזותית Custom Tooltips (תיאורי כלים מותאמים אישית) במופע Looker (מקורי) ואיך להשתמש בה. הדף הזה כולל את הקטעים הבאים:

הדרישות ממשתמשים ומופעים

כדי לגשת להגדרת הוויזואליזציה Custom Tooltips, אתם צריכים לעמוד בדרישות הבאות:

  • במכונה של Looker (המקורית) צריכה לפעול גרסה Looker 26.4 ואילך.
  • כדי ליצור תיאורי כלים מותאמים אישית ב-Explores, צריכה להיות לכם ההרשאה explore וגישה למודל LookML הבסיסי.

מגבלות

לתכונת התצוגה המקדימה הסברים מותאמים אישית יש את המגבלות הבאות:

איך משתמשים בתיאורי כלים מותאמים אישית

אם יש לכם הרשאות מתאימות, אתם יכולים להתאים אישית את תיאור הכלי של סדרה בתרשים הוויזואליזציה של 'ניתוח נתונים'. כדי להתאים אישית את תיאור הכלי:

  1. פותחים או יוצרים שאילתת ניתוח ובוחרים סוג נתמך של תצוגה חזותית.
  2. לוחצים על עריכה בכרטיסייה Visualization (הדמיה) ב'חיפוש וניתוח נתונים' כדי לפתוח את עורך ההדמיות.
  3. לוחצים על הכרטיסייה סדרות.
  4. בקטע התאמות אישיות, מוצאים את הסדרה שרוצים להוסיף לה את תיאור הכלי. אם יש כמה סדרות, מרחיבים את הסדרה שרוצים להוסיף לה תיאור קצר.
  5. לוחצים על המתג Custom Tooltip כדי להפעיל את הפונקציונליות של תיאור הכלים המותאם אישית עבור סדרה או תרשים ספציפיים.
  6. בקטע Custom Tooltip (תיאור כלים מותאם אישית), אפשר לשנות את המראה הבסיסי של תיאור הכלים באמצעות האפשרויות הבאות:
    • גודל גופן: הגדרת גודל הגופן של תיאור הכלים.
    • משפחת גופנים: הגדרת משפחת הגופנים של הגופן בתיבת הטיפ.
    • רדיוס הגבול: מגדיר את מידת העיגול של קצוות הכלי לתיאור. ככל שהמספר גבוה יותר, כך הקצוות של תיאור הכלים מעוגלים יותר.
    • צל לתיבה: מגדיר את הצל של תיבת הכלי.
    • צבע גופן: הגדרת צבע הגופן של תיאור הכלי.
    • צבע רקע: מגדיר את צבע הרקע של תיאור הכלים.
    • צבע הגבול: מגדיר את צבע הגבול של תיאור הכלים.
    • יישור הטקסט: הגדרת היישור של הגופן בתיבת הטיפ. בוחרים באפשרות יישור לשמאל, יישור למרכז או יישור לימין. יישור לימין היא הגדרת ברירת המחדל.
  7. בנוסף לאפשרויות הקודמות, או במקום להשתמש בהן, אפשר להחיל אפשרויות מתקדמות יותר של סגנון. לשם כך, לוחצים על עריכת תוכן של תיאור קצר כדי לפתוח את עורך ה-HTML של עריכת תוכן של תיאור קצר.

  8. בכלי עריכת תוכן של תיאור כלי, אפשר להשתמש ב-HTML ובמשתני Liquid כדי ליצור את המבנה של תיאור הכלי ולאכלס אותו.

    • משתמשים בתגי HTML רגילים כדי לעצב את התוכן של תיאור הכלי (לדוגמה, <div>, ‏ <span>, ‏ <strong>, ‏ <table>,‏<ul>, ‏ <ol>). חשוב לזכור ש-HTML שעובר עיבוד כפוף לכללי ניקוי ה-HTML של Looker.
    • יכול להיות שלא תהיה תמיכה בכל משתני Liquid בהצגת טיפים מותאמים אישית.

  9. במהלך העריכה של התוכן המותאם אישית של תיאור הכלים, אפשר ללחוץ על תצוגה מקדימה (או על מקשי הקיצור Command-Return ב-Mac או Ctrl+Enter במחשב) ולהעביר את העכבר מעל נקודות הנתונים בחלונית התצוגה המקדימה של הוויזואליזציה כדי לראות תצוגה מקדימה של תיאור הכלים.

  10. לוחצים על שמירה בכלי לעריכת HTML, ואז שומרים את הניתוח ב-Explore כ-Look או כמשבצת בלוח בקרה כדי שהשינויים יישמרו.

דוגמאות

הדוגמאות הבאות מציגות מקרי שימוש בהתאמה אישית של הסברים קצרים ברמות שונות:

הסבר קצר בהתאמה אישית עם כמה ערכים של מדדים

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

בדוגמה הזו, בתרשים עם ערך יחיד שנקרא 'מספר ההזמנות בשנת 2025' מוצג הערך של מספר ההזמנות עבור מדינת המשתמשים 'ארה"ב', והוא מבוסס על שאילתת חיפוש ב-Explore שכוללת גם את מספר פריטי ההזמנה. עם זאת, הערך של Order Items Count לא מוצג בתרשים.

קוד ה-HTML הבא מוזן בכלי עריכת תוכן של תיאור הכלי עבור סדרת מספר ההזמנות, ומגדיר את התוכן כך שיכלול את הערך של מספר פריטי ההזמנה בתיאור הכלי:

<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
  <div>
    <strong>Order Items Count:</strong> {{ order_items.count }}
  </div>
  <div>
    <strong>Orders Count:</strong> {{ orders.count }}
  </div>
</div>

הסבר קצר על תרשים הערך היחיד של מספר ההזמנות מציג את הערך של מספר פריטי ההזמנה בסך 54,340$, ואת הערך של מספר ההזמנות בסך 39,189.

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

הצגת ערכים מוסתרים כטבלה בתיבת טיפ מותאמת אישית

כפי שצוין במידע על מגבלות בדף הזה, אפשר להשתמש בתיאורי כלים מותאמים אישית רק כדי להפנות לשדות שכלולים בשאילתת חיפוש. עם זאת, יכול להיות שלא תרצו להציג את כל השדות של התכונה 'מה יש באזור' בתרשים. בעזרת תיאור כלים מותאם אישית, אתם יכולים להציג למשתמשים נתונים משדות שמוסתרים מהוויזואליזציות, בלי להוסיף אותם לתרשים.

בדוגמה הזו, טבלת נתונים ב-Explore כוללת את המדדים Orders Count ו-Order Items Count, שמקובצים לפי המאפיינים Users State ו-Orders Status. המפתח רוצה להציג למשתמשים טבלה קטנה, ולכן הוא מסתיר את השדות Orders Status ו-Order Items Count מהתרשים של הטבלה. עם זאת, המפתח עדיין רוצה שהמשתמשים יראו את הערכים של Orders Status ושל Order Items Count שמשויכים לערך מסוים של Orders Count.

קוד ה-HTML הבא מוזן בכלי Edit Tooltip Content עבור סדרת Orders Count, ומגדיר את התוכן כך שיכלול את הערכים של Orders Status ושל Order Items Count בתיבת הטיפ, במבנה של טבלה:

<div>
    <div>
        <table border="1">
          <!-- Table Body -->
          <tbody>
            <!-- Row 1 -->
            <tr>
              <td>
                <strong>Order status</strong>
              </td>
              <td>
                {{ orders.status }}
              </td>
            </tr>
            <!-- Row 2 -->
            <tr>
              <td>
                <strong>State</strong>
              </td>
              <td>
                {{ users.state }}
              </td>
            </tr>
            <!-- Row 3 -->
            <tr>
              <td>
                <strong>Count of orders</strong>
              </td>
              <td>
                {{ orders.count }}
              </td>
            </tr>
            <!-- Row 4 -->
            <tr>
              <td>
                <strong>Count of order items</strong>
              </td>
              <td>
                {{ order_items.count }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

כשמעבירים את העכבר מעל הערך של &#39;מספר ההזמנות&#39; בתרשים טבלה, מוצגים הערכים של &#39;מצב המשתמשים&#39;, &#39;סטטוס ההזמנות&#39;, &#39;מספר ההזמנות&#39; ו&#39;מספר פריטי ההזמנות&#39; בטבלה עם שתי עמודות.

המשתמשים יכולים לראות את כל נתוני השאילתה ב'חיפוש וניתוח נתונים', בלי השדות הנוספים שמוצגים בתרשים הטבלה.

הסבר קצר בהתאמה אישית עם פונקציות נפוצות של Liquid

התמיכה בתיאורי כלים בהתאמה אישית כוללת פונקציות נפוצות של Liquid, כמו צינורות ושימוש בהצהרות downcast. בדוגמה הזו, בתרשים עמודות אנכי מוצגות הזמנות שמקובצות לפי סטטוס הזמנה. המפתח רוצה לעצב את ההסבר הקצר כך שהמשתמשים יוכלו לזהות במהירות את ההבדל בין Orders Count לבין Orders Status עם הערך 'CANCELLED' לבין Orders Status עם הערך 'COMPLETED'.

הקוד הבא בפורמט HTML ו-Liquid מוזן בכלי Edit Tooltip Content (עריכת תוכן תיאור הכלי) עבור הסדרה Orders Count (מספר ההזמנות), וקובע שערך תיאור הכלי יופיע באדום עבור מספר ההזמנות עם הסטטוס CANCELLED (בוטלה) ובירוק עבור הזמנות עם הסטטוס COMPLETED (הושלמה). הקוד משתמש בהקצאת משתנים ובצינורות כדי לוודא שהמחרוזת מדויקת, וכדי להחיל את העיצוב המותנה שצוין:

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

הערך של Orders Count (מספר ההזמנות) בעמודה Orders Status (סטטוס ההזמנות) עם הערך COMPLETED (הושלם) מוצג בטקסט ירוק בתיאור הכלי.

הערך של ספירת ההזמנות מוצג בירוק בתיבת מידע בעמודה &#39;סטטוס ההזמנות&#39;.

הערך של מספר ההזמנות בעמודה סטטוס ההזמנה עם הערך 'בוטלה' מוצג בטקסט אדום בתיאור הכלי.

הערך של ספירת ההזמנות מוצג בירוק בתיבת מידע בעמודה &#39;סטטוס ההזמנות&#39;.

המשתמשים יכולים להבחין במהירות בין הזמנות שבוטלו לבין הזמנות שהושלמו, שמוצגות בתרשים עמודות אנכי.