Menggunakan komponen visualisasi dan properti kueri untuk merender visualisasi sederhana

Menggunakan properti query dari komponen visualisasi Query adalah cara termudah 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; Anda tidak perlu membuat dasbor.
  • Nilai yang diterima query (Query.client_id atau ID kueri) tidak dapat diubah; kecuali jika model pokoknya 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 Eksplorasi dan salin nilai Query.client_id.
  2. Menyemat 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 di framework ekstensi atau aplikasi React mandiri Anda sendiri, Anda harus mengautentikasi dengan API Looker dan memiliki akses ke objek Looker SDK. Baca tentang 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 Jelajahi dan salin nilai Query.client_id

Gunakan Jelajah untuk membuat kueri dalam UI Looker. Tambahkan visualisasi yang didukung ke Jelajahi dan, secara opsional, konfigurasikan setelannya di menu Setelan visualisasi.

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

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

Query.client_id adalah string unik yang mewakili kueri dan setelan visualisasi. 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.

Kode berikut adalah untuk aplikasi React hipotetis. Contoh ini dibuat di 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 diambil 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 data dan setelan 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 apa pun yang didukung, mulai dari jenis visualisasi hingga detail cara setiap deret data dirender.

Dalam contoh kode berikut, properti config mengubah jenis diagram menjadi sparkline dan menetapkan warna baru ke deret 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 mengetahui daftar lengkap sub-properti yang tersedia di properti config, buka dokumentasi referensi tabel properti Visualisasi dan Kueri.

Langkah berikutnya