Komponen visualisasi Looker

Komponen visualisasi Looker adalah rangkaian komponen berbasis React yang tersedia di paket @looker/visualizations open source.

Komponen visualisasi menerima nilai Query.client_id atau ID kueri dari Jelajah Looker atau ID dasbor dari dasbor Looker dan merender visualisasi sisi klien tanpa iframe.

Komponen ini dapat digunakan secara siap pakai, disesuaikan, atau diperlakukan sebagai pemformat data murni untuk meneruskan data yang dibersihkan dari Looker Explore untuk memfasilitasi pembuatan visualisasi yang disesuaikan sendiri.

Komponen visualisasi Looker dirancang untuk digunakan di lingkungan React yang telah diautentikasi dengan API Looker menggunakan TypeScript/JavaScript SDK. Langkah tersebut ditangani secara otomatis saat Anda membuat dengan framework ekstensi Looker.

Membuat visualisasi dengan komponen visualisasi Looker

Rangkaian komponen visualisasi Looker menyediakan dua komponen tingkat tinggi untuk menggunakan data Anda:

  • Query — Menangani pengambilan data dan memuat respons ke dalam konteks React
  • Visualization — Menerima data yang ditampilkan oleh Query dan menggunakan adaptor konfigurasi untuk merender diagram yang telah disesuaikan dengan tepat di halaman

Saat ini, data dapat dirender sebagai jenis diagram berikut:

  • Garis
  • Area
  • {i>Scatter <i}(Sebar)
  • Garis percik
  • Nilai tunggal
  • Batang
  • Kolom
  • Tabel
  • Pie

Jenis diagram lainnya sedang dalam pengembangan.

Agar dapat melihat tabel properti untuk setiap jenis diagram, buka halaman dokumentasi Tabel properti kueri dan visualisasi.

Guna melihat opsi konfigurasi yang tersedia untuk setiap jenis diagram, lihat playground visualisasi di Portal Developer Looker.

Mengapa menggunakan komponen visualisasi?

Komponen visualisasi meningkatkan dan menyederhanakan proses rendering visualisasi dari Looker dalam aplikasi, menghemat waktu developer, dan memberi developer lebih banyak opsi untuk menyesuaikan dan memperluas visualisasi dari Looker.

  • Penyematan yang lebih baik — Komponen visualisasi memungkinkan developer menyematkan visualisasi Looker di aplikasi tanpa iframe. Hal ini dapat meningkatkan performa, pemantauan, dan kemampuan untuk melakukan penyesuaian.
  • Integrasi yang mudah — Komponen visualisasi dapat digabungkan dengan komponen lain dari @looker/components untuk membuat komposisi dan pengalaman front-end yang benar-benar baru.
  • Penyesuaian — Lebih mudah untuk menyesuaikan visualisasi tersemat saat menggunakan komponen visualisasi daripada saat menggunakan iframe. Selain itu, dengan komponen visualisasi, developer dapat membuat aplikasi yang sangat disesuaikan dengan jauh lebih cepat, tanpa harus membuat lapisan visualisasi dari awal.
  • Penyederhanaan — Komponen visualisasi meningkatkan portabilitas visualisasi Looker dan menyederhanakan interaksi dengan Looker API.

Menginstal komponen visualisasi

Untuk memulai, tambahkan paket NPM Komponen Visualisasi Looker:

  • NPM: npm install @looker/visualizations
  • YARN: yarn add @looker/visualizations

Anda juga perlu memenuhi beberapa dependensi pembanding — Looker/komponen, React, dan Komponen Bergaya:

  • NPM: npm install @looker/components react react-dom styled-components
  • YARN: yarn add @looker/components react react-dom styled-components

Informasi tentang cara menginstal dan menggunakan paket komponen visualisasi dapat ditemukan dalam dokumen README, yang tersedia di GitHub dan NPM.

Langkah berikutnya