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

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

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

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

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

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

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

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

  1. יצירת שאילתה ב-Explore והעתקת הערך qid
  2. העברת הנתונים לרכיב של תצוגה חזותית בהתאמה אישית
  3. הגדרה מפורטת של רכיב CustomVis
  4. שינוי הנתונים המנורמלים
  5. הוספת הנתונים שעברו טרנספורמציה אל CustomVis
  6. יצירת התרשים בהתאמה אישית

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

דרישות

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

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

שלב 1: בניית שאילתה ב'ניתוח נתונים' והעתקת מזהה השאילתה

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

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

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

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

שלב 2: העברת הנתונים לרכיב ויזואליזציה בהתאמה אישית

כדי להתחיל, מעבירים את הערך qid שנלקח מכתובת ה-URL של Explore אל הרכיב Query ואת אובייקט ה-SDK המאומת אל DataProvider.

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

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'></Query>
    </DataProvider>
  )
}

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

רכיב Query יכול לקבל כל רכיב React כרכיב צאצא, ויעביר את הערכים config, data, fields ו-totals כמאפיינים כדי לעבד את רכיבי הוויזואליזציה שלכם. המערכת תציג את CustomVis כצאצא של Query, כדי שיוכל לקבל את כל הנתונים הרלוונטיים כמאפיינים.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
import { CustomVis } from '../path/to/MyCustomVis'

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

שלב 3: בניית הרכיב CustomVis

בשלב הבא, ניצור את הרכיב CustomVis. המאפיינים שמועברים בירושה מהרכיב Query הם config,‏ fields,‏ data,‏ pivots ו-totals:

  • ‫config מתאר את כל הדרכים שבהן הנתונים צריכים להיות מוצגים בתרשים, כמו עובי הקו בתרשים קווי קטן או הגודל והצורה של הנקודות בתרשים פיזור.
  • ‫fields מאחסן מטא-נתונים נוספים לגבי ערכי המדדים והמאפיינים שמוחזרים מהשאילתה, כמו הפורמט שבו הערכים צריכים להיות או התווית שצריך להוסיף לכל ציר.
  • ‫data היא התגובה של מפתח/ערך שהוחזרה מהשאילתה.
  • ‫pivots מתאר את המאפיין שלפיו השאילתה מסובבת.
  • totalsהפניות של לוקרסכומי שורות לשימוש בוויזואליזציות מבוססות טבלאות.

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

import React from 'react'
import { Table } from '@looker/visualizations'

export const CustomVis = ({ config, fields, data, pivots }) => {
  return <Table config={config} data={data} fields={fields} pivots={pivots} />
}

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

שלב 4: שינוי הנתונים הנורמליים

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

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

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


import React from 'react'
import { Table, Sparkline } from '@looker/visualizations'

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'

const nestSparklines = (data) => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData: SDKRecord[] = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={75}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

כדי ליצור את הפונקציה:

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

שלב 5: מוסיפים את הנתונים שעברו טרנספורמציה אל CustomVis

עכשיו משנים את הנתונים באמצעות הפונקציה החדשה שלנו, ומקצים את הפלט למשתנה חדש בשם nestedData:


export const CustomVis =({
  fields,
  data,
  config,
  pivots,
}) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      config={config}
      data={nestedData}
      pivots={pivots}
    />
  )
}

שלב 6: יוצרים את ההדמיה המותאמת אישית

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

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

הקוד המלא שנדרש כדי להציג את התצוגה החזותית הזו הוא:


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

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'
const ROW_HEIGHT = 75

const nestSparklines = data => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={ROW_HEIGHT}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

const CustomVis = ({ fields, data, pivots, config }) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      config={config}
      height={500}
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      data={nestedData}
      pivots={pivots}
      defaultRowHeight={ROW_HEIGHT}
    />
  )
}

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

השלבים הבאים