Menggunakan komponen visualisasi dan properti kueri untuk merender visualisasi sederhana

Menggunakan properti query dari komponen visualisasi Query adalah cara paling sederhana untuk merender visualisasi yang dapat disematkan dengan komponen visualisasi Looker. Penggunaan properti query (bukan properti dashboard) menawarkan manfaat berikut:

  • Anda hanya perlu membuat kueri di Looker; tidak perlu membuat dasbor.
  • Nilai yang diterima query (Query.client_id atau ID kueri) tidak dapat diubah; kecuali jika model dasarnya berubah, tidak ada perubahan pada instance Looker yang akan memengaruhi visualisasi tersemat.

Jika Anda ingin membuat visualisasi yang dapat disematkan yang merespons perubahan dalam UI Looker, sehingga dapat diperbarui oleh pengguna Looker selain developer aplikasi, ikuti petunjuk di halaman dokumentasi Menggunakan komponen visualisasi dan ID dasbor untuk merender visualisasi sederhana.

Untuk merender visualisasi yang dapat disematkan menggunakan komponen visualisasi Looker dan properti query, pastikan penyiapan Anda memenuhi persyaratan, lalu lakukan langkah-langkah berikut:

  1. Buat kueri di Explore dan salin nilai Query.client_id.
  2. Sematkan kueri ke dalam aplikasi React.
  3. Tambahkan komponen Visualization.
  4. Sesuaikan setelan dengan properti config.

Persyaratan

Sebelum memulai, ada beberapa elemen yang diperlukan:

  • Anda harus memiliki akses ke instance Looker.
  • Baik Anda mem-build dalam framework ekstensi atau aplikasi React mandiri, Anda harus melakukan autentikasi dengan Looker API dan memiliki akses ke objek Looker SDK. Baca autentikasi Looker API atau framework ekstensi kami untuk mengetahui informasi selengkapnya.
  • Pastikan Anda telah menginstal paket NPM Komponen Visualisasi Looker dan paket NPM @looker/components-data. Informasi tentang cara menginstal dan menggunakan paket komponen visualisasi dapat ditemukan dalam dokumen README, yang tersedia di GitHub dan NPM.

Langkah 1: Buat kueri di Explore dan salin nilai Query.client_id

Gunakan Explore untuk membuat kueri dalam UI Looker. Menambahkan visualisasi yang didukung ke Explore, dan secara opsional, mengonfigurasi setelannya di menu Settings visualisasi.

Temukan properti URL qid di kolom URL browser. Nilai alfanumerik yang ditetapkan untuk properti tersebut adalah Query.client_id.

Misalnya, jika URL-nya adalah https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, maka Query.client_id adalah evomfl66xHx1jZk2Hzvv1R.

Query.client_id adalah string unik yang mewakili setelan visualisasi dan kueri. Jika Anda mengubah apa pun dalam kueri atau setelan, Query.client_id akan berubah.

Salin Query.client_id untuk digunakan di langkah berikut.

Langkah 2: Sematkan kueri ke dalam aplikasi React

Sekarang Anda dapat mengambil Query.client_id dan menyematkannya ke dalam aplikasi React.

Di bawah ini adalah kode untuk aplikasi React fiktif. Contoh ini dibuat dalam framework ekstensi Looker, dan objek Looker SDK telah diambil dari penyedia konteks ekstensi.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

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

  return null
}

Untuk memulai, kita akan menggunakan komponen DataProvider dan Query. DataProvider menyimpan referensi SDK dalam konteks, dan Query mengirim permintaan jaringan dan memformat rendering respons.

Selain itu, Anda harus memberikan dua hal:

  • Objek SDK. Objek SDK ditarik dari konteks ekstensi.
  • Query.client_id. Query.client_id ditetapkan ke properti query.
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 (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

Langkah 3: Tambahkan komponen Visualization

Selanjutnya, tambahkan komponen Visualization, yang menafsirkan setelan data dan konfigurasi yang ditampilkan oleh Query untuk merender diagram yang diharapkan.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Langkah ini menghasilkan visualisasi yang terlihat seperti contoh berikut:

Visualisasi grafik garis.

Langkah 4: Sesuaikan setelan dengan properti config

Gunakan properti config dari komponen Query untuk mengganti setelan visualisasi yang ditampilkan dari SDK. Properti ini dapat mengubah fitur yang didukung, mulai dari jenis visualisasi hingga detail cara setiap deret data dirender.

Pada kode contoh di bawah, properti config mengubah jenis diagram menjadi sparkline dan menetapkan warna baru ke rangkaian data.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Langkah sebelumnya merender garis percik oranye ini:

Visualisasi garis percik.

Untuk daftar lengkap sub-properti yang tersedia di properti config, buka Dokumentasi referensi tabel properti Kueri dan Visualisasi.

Langkah berikutnya