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 ReactVisualization
— Menerima data yang ditampilkan olehQuery
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
- Menggunakan komponen visualisasi dan properti
dashboard
untuk merender visualisasi sederhana - Menggunakan komponen visualisasi dan properti
query
untuk merender visualisasi sederhana - Menggunakan komponen visualisasi untuk merender visualisasi kustom
- Menggunakan komponen visualisasi untuk membuat visualisasi kustom
- Tabel properti Kueri dan Visualisasi