Menggunakan komponen visualisasi untuk merender visualisasi kustom

Contoh ini merender visualisasi kustom yang bersifat lokal untuk aplikasi yang sedang dikembangkan, bukan visualisasi kustom yang tersedia dari Looker Marketplace.

Komponen visualisasi Looker memiliki sistem adaptor yang memungkinkan developer mengganti jenis diagram yang ada atau menambahkan opsi jenis diagram yang benar-benar baru.

Opsi ini dapat berguna dalam keadaan berikut:

  • Anda telah membuat visualisasi React kustom yang ingin digunakan dengan komponen Looker.
  • Anda ingin mengganti visualisasi Looker default yang ada dengan visualisasi yang dibuat di library yang berbeda.

Kemampuan untuk mengganti atau menambahkan diagram bisa sangat relevan jika Anda membuat aplikasi yang memungkinkan pengguna mengubah jenis visualisasi diagram selama sesi.

Latar belakang

Setelah merender kueri di antarmuka Jelajah Looker dan meneruskan Query.client_id-nya ke komponen visualisasi Looker, Anda dapat mengubah jenis diagram dengan memperbarui properti type properti config.

Setiap nilai yang diterima oleh properti type dipetakan ke komponen React tertentu. Jadi, jika type disetel ke line, komponen Line akan dirender; saat type disetel ke area, komponen Area akan dirender; dan seterusnya.

Properti chartTypeMap dari komponen Visualization memungkinkan Anda menambahkan entri baru ke, atau mengganti entri yang ada di, peta jenis/komponen yang mengaitkan setiap nilai type dengan komponen tertentu.

Persyaratan

Mirip dengan contoh Menggunakan komponen visualisasi dan properti query untuk merender visualisasi sederhana, Anda harus memulai dengan mengimpor komponen DataProvider dan memberikan instance SDK yang diautentikasi. Contoh berikut dibuat dalam framework ekstensi Looker, dan SDK berasal dari ExtensionContext.

Dalam DataProvider, Anda dapat merender komponen Query dan Visualization untuk meminta data dari Looker SDK dan merender visualisasi yang diharapkan dalam aplikasi Anda.

Penyiapannya adalah sebagai berikut (di properti query, ganti nilai dengan Query.client_id dari kueri Anda):

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>
    )
}

Menambahkan jenis diagram baru

Seperti contoh visualisasi sederhana, Anda dapat mengubah jenis diagram yang dirender dengan meneruskan config override ke komponen Query.

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

Dalam hal ini, type ditetapkan ke pie: diagram yang ditawarkan komponen Looker secara default. Tetapi bagaimana jika Anda ingin menggunakan bagan yang tidak ditawarkan secara {i>default<i}? Dalam situasi tersebut, Anda dapat menggunakan properti chartTypeMap dari Visualization untuk menambahkan atau mengganti komponen diagram di peta jenis/komponen di sistem adaptor.

Jika, misalnya, Anda ingin menambahkan diagram radar baru ke peta jenis/komponen, tambahkan diagram tersebut ke chartTypeMap seperti ini:

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>
    )
}

Kode ini melakukan hal-hal berikut:

  • Mengimpor komponen React MyCustomRadar
  • Menetapkan kunci radar ke properti config.type
  • Memperbarui properti chartTypeMap sehingga sistem pemetaan jenis mengetahui apa yang harus dirender untuk type dari radar

Beginilah caranya dirender di playground visualisasi Looker:

Peta radar ditampilkan di playground visualisasi.

Demikian pula, Anda dapat mengganti diagram yang ada jika ingin merender versi Anda sendiri. Pada contoh berikut, diagram garis komponen Looker default diganti dengan komponen diagram garis kustom:

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>
    )
}

Sekarang, setiap kali komponen Query menemukan kueri dengan jenis visualisasi yang ditetapkan ke line, komponen akan merender implementasi kustom sebagai pengganti default Looker.

Langkah berikutnya