יצירת תמונה דינמית של לוח בקרה באמצעות Liquid ו-HTML

אפשר להוסיף תמונות למרכזי בקרה ב-Looker על ידי קידוד קשיח של כתובת URL של תמונה במשבצת טקסט של Markdown. עם זאת, התמונות במשבצות הטקסט הן סטטיות ולא מתעדכנות על סמך התוצאות. מה אם רוצים שתמונה במרכז הבקרה תשתנה באופן דינמי על סמך ערך מסנן שהמשתמש בחר?

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

הפתרון

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

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

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

כדי ליצור את התמונה הדינמית של מרכז הבקרה, צריך לבצע שלושה שלבים:

1. יוצרים מאפיין תמונה ב-LookML.
2. יוצרים משבצת של תמונה דינמית במרכז הבקרה.
3. מוסיפים מסננים למרכז הבקרה ומבצעים ליטושים אחרונים.

שלב 1: יוצרים מאפיין תמונה ב-LookML

כדי ליצור מאפיין תמונה ב-LookML:

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

2. מוסיפים פרמטר html כדי להגדיר {% if %}הצהרה מותנית של Liquid עם המשתנה value, לכל ערך שרוצים להציג לו תמונה.

   לדוגמה, המאפיין state_flag_image הבא קובע תנאי להצגת התמונות שצוינו (עם תגי html <img> ) כשהערך של state הוא "California",‏ "New York",‏ "Colorado" או "Illinois". בכל שאר המצבים, אפשר להציג את הסמל "אין תמונה זמינה":

         dimension: state_flag_image {
             type: string
             sql: ${state} ;;
             html:
                 {% if state._value == "California" %}
                 <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
                 {% elsif state._value == "New York" %}
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
                 {% elsif state._value == "Colorado" %}
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
                 {% elsif state._value == "Illinois"%}
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
                 {% else %}
                 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
                 {% endif %} ;;
         }
       

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

בשלב הבא, אתם יכולים ליצור משבצת במרכז הבקרה למאפיין התמונה.

שלב 2: יוצרים משבצת תמונה דינמית בלוח הבקרה

אחרי שיוצרים את מאפיין התמונה (state_flag_image), אפשר ליצור חקירה שתהפוך למשבצת של התמונה הדינמית בלוח הבקרה.

יוצרים את הניתוח לפי הקריטריונים הבאים:

• מוסיפים מסנן למאפיין המקורי (במקרה הזה, state). מגדירים את המסנן לכל ערך. כתוצאה מכך, התמונה "אין תמונה זמינה" תוצג בהתחלה, כי לא נבחר ערך ספציפי למסנן. ערך המסנן הזה יתעדכן בהתאם לבחירה של המשתמש במסנן של מרכז הבקרה. 
• בוחרים את מאפיין התמונה (במקרה הזה, state_flag_image) וכל מאפיין אחר שעשוי להיות נחוץ לשאילתה שקובעת את התמונה (לדוגמה, אם רוצים להביא בחשבון תאריך, אפשר לכלול תאריך וכו').
• משנים את מגבלת השורות לשורה אחת.
• משנים את סוג התרשים להמחשה לתרשים להמחשה של KPI (ערך יחיד) או לערך יחיד (קודם), ומסתירים את כל העמודות האחרות מלבד מאפיין התמונה (state_flag_image). 

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

שומרים את הניתוח בלוח בקרה בתור משבצת.

שלב 3: מוסיפים מסננים למרכז הבקרה ומבצעים ליטושים אחרונים

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

במצב העריכה של לוח הבקרה, יוצרים את המסנן:

• פותחים את החלון להוספת מסנן.
• בוחרים את השדה שלפיו רוצים לסנן. שדה המסנן צריך להיות המאפיין שעליו מבוסס מאפיין התמונה. בדוגמה הזו, השדה של המסנן יהיה state.
• בכרטיסייה משבצות לעדכון, בוחרים את משבצת התמונה משלב 2.
• בוחרים את המאפיין המקורי (מדינה במקרה הזה) בתפריט הנפתח שדה לסינון.
בוחרים משבצות אחרות שרוצים לעדכן.
• מתאימים אישית את המסנן לפי הצורך. אם בוחרים באפשרות אמצעי הבקרה מתקדם, צריך לבטל את הבחירה באפשרות התרת ערכי סינון מרובים, שמופעלת באופן אוטומטי כשבוחרים באפשרות מתקדם.

עכשיו משבצת התמונה תתעדכן בהתאם למסנן שהמשתמש בחר.

כשמשתמש בוחר לסנן לפי "California", בלוח הבקרה יוצגו דגל המדינה והנתונים של מדינת קליפורניה:

כשמשתמש בוחר לסנן לפי "Colorado", בלוח הבקרה יוצגו דגל המדינה והנתונים של מדינת קולורדו: