שימוש ברכיבים להמחשה ובמאפיין לוח הבקרה כדי להציג המחשה פשוטה

שימוש במאפיין dashboard של רכיב ההדמיה Query מאפשר לכם להציג הדמיה שניתנת להטמעה ויכולה להגיב לשינויים בממשק המשתמש של Looker. היתרונות של שימוש במאפיין dashboard:

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

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

  1. יצירת שאילתה והוספה שלה ללוח בקרה
  2. הטמעת השאילתה באפליקציית React באמצעות מזהה לוח הבקרה.
  3. משנים את ההצגה החזותית אם צריך.

דרישות

לפני שמתחילים, צריך כמה דברים:

  • צריכה להיות לכם גישה למכונה של Looker.
  • בין אם אתם בונים במסגרת התוסף או באפליקציית React עצמאית משלכם, חשוב לבצע אימות באמצעות Looker API ולקבל גישה לאובייקט Looker SDK. מידע נוסף זמין במאמר בנושא אימות של Looker API או במסגרת ההרחבות שלנו.
  • מוודאים שהתקנתם את חבילת ה-NPM של רכיבי ההמחשה של Looker ואת חבילת ה-NPM של @looker/components-data. מידע על התקנה ושימוש בחבילת רכיבים להמחשה זמין במסמך ה-README ב-GitHub וב-NPM.

שלב 1: בניית שאילתה והוספה שלה ללוח בקרה

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

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

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

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

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

מזהה לוח בקרה מספרי מופיע בכתובת ה-URL של לוח הבקרה אחרי dashboards/. מעתיקים את המזהה הזה לשימוש בשלב הבא.

המאפיין dashboard של רכיב Query מקבל רק מזהים מספריים. היא לא מקבלת את מזהי המחרוזות של לוחות בקרה של LookML.

שלב 2: הטמעת השאילתה באפליקציית React באמצעות מזהה לוח הבקרה

עכשיו אפשר להטמיע את השאילתה באפליקציית React על ידי העברת מזהה לוח הבקרה במאפיין dashboard של רכיב Query:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

שלב 3: משנים את התצוגה החזותית אם צריך

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

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

יש שתי דרכים לשנות את ההדמיה המוטמעת:

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

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

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

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

השלבים הבאים