Menggunakan komponen visualisasi dan properti dasbor untuk merender visualisasi sederhana

Menggunakan properti dashboard dari komponen visualisasi Query memungkinkan Anda merender visualisasi yang dapat disematkan yang dapat merespons perubahan pada UI Looker. Penggunaan properti dashboard (bukan properti query) menawarkan manfaat berikut:

  • Visualisasi dapat diperbarui oleh setiap pengguna Looker yang memiliki akses edit ke dasbor.
  • Pembaruan pada visualisasi tersemat tidak memerlukan perubahan apa pun pada ekstensi yang di-deploy atau aplikasi React.

Jika Anda ingin membuat visualisasi yang dapat disematkan dan tidak merespons perubahan dalam UI Looker, ikuti petunjuk di halaman dokumentasi Menggunakan komponen visualisasi dan properti query untuk merender visualisasi sederhana.

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

  1. Buat kueri dan tambahkan ke dasbor.
  2. Sematkan kueri ke dalam aplikasi React menggunakan ID dasbor.
  3. Ubah visualisasi jika perlu.

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: Bangun kueri dan tambahkan ke dasbor

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

Buat dasbor baru menggunakan kueri ini. Atau, Anda dapat menambahkan kueri ke dasbor kosong yang telah dibuat.

Komponen Query akan selalu memuat visualisasi dari kartu pertama yang ditambahkan secara kronologis ke dasbor terkait, di mana pun kartu tersebut muncul di tata letak dasbor. Karena alasan ini, sebaiknya hanya gunakan dasbor satu ubin sebagai referensi kueri.

Komponen Query hanya akan menampilkan visualisasi kartu. Tindakan ini tidak akan menampilkan judul ubin, judul dasbor, atau elemen dasbor lainnya. Filter dasbor apa pun yang diterapkan ke kartu tidak akan memengaruhi visualisasi tersemat.

Setelah dasbor Anda dibuat, lihat dasbor tersebut.

ID dasbor numerik muncul di URL dasbor setelah dashboards/. Salin ID ini untuk digunakan di langkah berikutnya.

Properti dashboard dari komponen Query hanya menerima ID numerik. Metode ini tidak menerima ID string dasbor LookML.

Langkah 2: Sematkan kueri ke aplikasi React menggunakan ID dasbor

Sekarang, Anda dapat menyematkan kueri ke aplikasi React dengan meneruskan ID dasbor di properti dashboard dari komponen Query:

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)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Langkah 3: Ubah visualisasi jika diperlukan

Sekarang, setiap pengguna Looker yang memiliki akses edit ke dasbor bebas melakukan perubahan pada visualisasi yang disematkan di dalam dasbor Anda, dan perubahan tersebut akan muncul dalam aplikasi React tanpa memerlukan perubahan pada kode.

Untuk akses edit, pengguna harus memiliki tingkat akses Kelola Akses, Edit untuk folder tempat dasbor berada, akses model ke model yang menjadi dasar kueri, dan izin Looker yang sesuai untuk mengedit dasbor.

Ada dua cara untuk memodifikasi visualisasi tersemat:

  • Mengedit ubin kueri di dasbor, atau
  • Tambahkan ubin kueri baru ke dasbor dan hapus ubin asli.

Untuk mengedit kotak kueri, ikuti petunjuk untuk mengedit ubin di halaman dokumentasi Mengedit dasbor yang ditentukan pengguna, dan simpan perubahan untuk keluar dari mode edit di dasbor.

Untuk menambahkan kartu baru dan menghapus yang asli, ikuti petunjuk untuk menambahkan kartu kueri guna menambahkan kartu baru. Kemudian, ikuti petunjuk untuk menghapus ubin untuk menghapus visualisasi yang tidak diinginkan. Agar perubahan Anda diterapkan, pastikan hanya ada satu kotak di dasbor, lalu simpan perubahan untuk keluar dari mode edit di dasbor.

Setelah mengubah dan menyimpan dasbor, perubahan visualisasi akan muncul di ekstensi atau aplikasi React tanpa memerlukan perubahan pada kode.

Langkah berikutnya