שימוש ברכיבים להמחשה כדי לעבד המחשות מותאמות אישית

בדוגמה הזו מוצגת המחשה חזותית מותאמת אישית שהיא מקומית לאפליקציה שנמצאת בפיתוח, ולא המחשה חזותית מותאמת אישית שזמינה ב-Looker Marketplace.

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

האפשרות הזו יכולה להיות שימושית במקרים הבאים:

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

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

רקע

אחרי שמעבדים שאילתה בממשק Explore של Looker ומעבירים את Query.client_id שלה לרכיבים להמחשה של Looker, אפשר לשנות את סוג התרשים על ידי עדכון המאפיין type של המאפיין config.

כל ערך שמתקבל במאפיין type ממופה לרכיב React ספציפי. לכן, כש-type מוגדר כ-line, רכיב Line עובר רינדור. כש-type מוגדר כ-area, רכיב Area עובר רינדור, וכן הלאה.

המאפיין chartTypeMap של הרכיב Visualization מאפשר להוסיף רשומה חדשה למיפוי של סוגים/רכיבים, או להחליף רשומות קיימות, כך שכל ערך type ישויך לרכיב מסוים.

דרישות

קודם צריך לייבא את רכיב DataProvider ולספק מופע מאומת של SDK. הדוגמה הבאה נוצרה במסגרת סביבת התוספים של Looker, וה-SDK מגיע מ-ExtensionContext.

בתוך DataProvider, אפשר לעבד את הרכיבים Query ו-Visualization כדי לשלוח בקשה לנתונים מ-Looker SDK ולעבד את הוויזואליזציה הצפויה בתוך האפליקציה.

ההגדרה היא כדלקמן (בנכס query, מחליפים את הערך ב-Query.client_id מהשאילתה):

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

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

הוספת סוג תרשים חדש

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

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

במקרה הזה, type הוגדר ל-pie: תרשים שרכיבי Looker מציעים כברירת מחדל. אבל מה קורה אם רוצים להשתמש בתרשים שלא מוצע כברירת מחדל? במצב כזה, אפשר להשתמש במאפיין chartTypeMap של Visualization כדי להוסיף או להחליף את רכיבי התרשים במיפוי הסוג/הרכיב במערכת המתאם.

לדוגמה, אם רוצים להוסיף תרשים מכ"ם חדש למפה של סוגים או רכיבים, מוסיפים אותו ל-chartTypeMap כך:

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

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

הקוד הזה מבצע את הפעולות הבאות:

• ייבוא של רכיב React‏ MyCustomRadar
• מקצה את המקש radar למאפיין config.type
• מעדכנים את הנכס chartTypeMap כדי שמערכת מיפוי הסוגים תדע מה להציג עבור type מסוג radar

כך הוא מוצג בארגז החול להמחשה חזותית ב-Looker:

באופן דומה, אתם יכולים להחליף תרשימים קיימים אם אתם רוצים להציג גרסה משלכם. בדוגמה הבאה, תרשים הקו שמוגדר כברירת מחדל ברכיבי Looker מוחלף ברכיב תרשים קו בהתאמה אישית:

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

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

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

השלבים הבאים

• שימוש ברכיבי המחשה ובמאפיין dashboard כדי להציג המחשה פשוטה
• שימוש ברכיבים להמחשה כדי ליצור המחשה בהתאמה אישית
• טבלאות של מאפייני שאילתות והמחשות