Komponen visualisasi Looker

Komponen visualisasi Looker adalah serangkaian 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 langsung, disesuaikan, atau diperlakukan sebagai pemformat data murni untuk meneruskan data yang dibersihkan dari Jelajah Looker guna memfasilitasi pembuatan visualisasi kustom Anda 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 mem-build dengan framework ekstensi Looker.

Membuat visualisasi dengan komponen visualisasi Looker

Suite 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 disesuaikan dengan tepat di halaman

Saat ini, data dapat dirender sebagai jenis diagram berikut:

  • Garis
  • Area
  • Sebar
  • Sparkline
  • Satu nilai
  • Batang
  • Kolom
  • Tabel
  • Lingkaran

Jenis diagram lainnya sedang dalam pengembangan.

Untuk melihat tabel properti setiap jenis diagram, buka halaman dokumentasi Tabel properti Visualisasi dan Kueri.

Untuk melihat opsi konfigurasi yang tersedia untuk setiap jenis diagram, lihat tempat bermain visualisasi.

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 mereka dari Looker.

  • Penyematan yang ditingkatkan — Komponen visualisasi memungkinkan developer menyematkan visualisasi Looker dalam aplikasi tanpa iframe. Hal ini dapat meningkatkan performa, pemantauan, dan kemampuan untuk menyesuaikan.
  • Integrasi yang mudah — Komponen visualisasi kemudian dapat digabungkan dengan komponen lain dari @looker/components untuk membuat komposisi dan pengalaman frontend yang sepenuhnya baru.
  • Penyesuaian — Menyesuaikan visualisasi tersemat lebih mudah jika menggunakan komponen visualisasi daripada menggunakan iframe. Selain itu, dengan komponen visualisasi, developer dapat membuat aplikasi yang sangat disesuaikan dengan 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 harus memenuhi beberapa dependensi peer — Looker/komponen, React, dan Styled Components:

  • 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