Cookbook mendapatkan hasil maksimal dari visualisasi Looker: Penyesuaian tooltip

Catatan: Halaman ini adalah bagian dari buku resep Looker: Memanfaatkan visualisasi Looker secara maksimal.

Tips: Mulai Looker 24.0, Anda dapat menggunakan Editor Konfigurasi Diagram untuk menyesuaikan lebih lanjut gaya dan warna tooltip.

Tips: Mulai Looker 26.0, fitur Labs Tooltip Kustom memungkinkan Anda mengonfigurasi tooltip dalam editor visualisasi Jelajah menggunakan kombinasi setelan UI dan editor HTML yang mendukung template Liquid.

Tooltip visualisasi menampilkan nilai dimensi dan ukuran yang dipilih secara default dan dapat membantu pengguna memahami signifikansi satu titik data.

Misalnya, tooltip untuk visualisasi peta yang didasarkan pada Total Margin Kotor yang dikelompokkan menurut Negara Bagian akan menampilkan nilai untuk kedua kolom saat pengguna mengarahkan kursor ke negara bagian California.

Namun, bagaimana jika Anda ingin menyertakan kolom selain kolom default dalam tooltip sehingga pengguna bisa mendapatkan informasi atau konteks lebih lanjut tentang titik data tanpa perlu mencari di tempat lain?

Anda dapat menyesuaikan tooltip untuk menampilkan nilai dari beberapa kolom yang ditentukan — termasuk kolom yang tidak ada dalam kueri Jelajah.

Perhatian: Pemformatan HTML hanya dirender dalam visualisasi diagram tabel, tabel (lama), dan nilai tunggal serta dalam tooltip visualisasi saat beberapa kolom digabungkan. Konten interaktif apa pun yang ditempatkan di tooltip diagram peta' dengan parameter html tidak akan dapat diakses di dasbor yang menggunakan pengalaman dasbor baru, meskipun konten tersebut akan dapat diakses di Look dan Jelajah.

Produk

• Variabel Liquid — Variabel Liquid merender nilai kolom lain bersama dengan kueri Jelajah yang ada.
• Parameter html — Kolom yang ditentukan dalam parameter html suatu ukuran akan dirender di tooltip saat pengguna mengarahkan kursor ke visualisasi.
• Visualisasi — Tooltip akan muncul saat pengguna mengarahkan kursor ke titik data dalam jenis visualisasi tertentu.
  • Diagram Kartesius
  • Diagram pai atau donat
  • Diagram progres
  • Diagram peta

Prasyarat

Penyesuaian tooltip memerlukan hal berikut:

• Izin untuk membuat Eksplorasi dan izin untuk mengembangkan LookML.
• Pengetahuan tentang pengembangan SQL dan LookML.
• Pengetahuan dasar tentang penggunaan Liquid di Looker dan coding HTML. Buka bagian Menggunakan variabel Liquid dalam parameter html di halaman dokumentasi html untuk mendapatkan informasi latar belakang yang diperlukan.
• Izin untuk menyimpan konten (jika Anda ingin menyimpan visualisasi sebagai Look atau dasbor)

Pertimbangan untuk penyesuaian tooltip

Penting untuk mempertimbangkan hal berikut saat Anda menyesuaikan tooltip:

• Nilai dalam parameter html menjadi sumbu y visualisasi.
• Nilai yang ingin Anda tampilkan pada sumbu y harus berupa nilai dalam parameter sql dari ukuran.
• Saat Anda menggunakan ukuran yang diformat (ukuran type: percent_of_total atau ukuran dengan parameter value_format_name atau value_format), pastikan untuk menggunakan sintaksis Liquid untuk nilai {{ field_name._rendered_value }} yang dirender (dengan field_name adalah nama sebenarnya dari ukuran atau dimensi).

Contoh

Catatan: Contoh di bagian ini mengekstrapolasi contoh peta Total Margin Kotor yang dikelompokkan menurut Negara Bagian yang diperkenalkan sebelumnya di halaman ini.

Secara default, tooltip untuk titik data visualisasi akan menyertakan nilai untuk Total Margin Kotor dan Negara Bagian. Namun, bagaimana jika Anda ingin memberikan informasi tambahan kepada pengguna yang tidak ditunjukkan di peta atau disertakan dalam kueri Jelajahi? Bagaimana jika Anda ingin menyertakan nilai untuk kolom yang disebut Persen Total Margin Kotor, bukan Negara Bagian? Menyertakan Persen Total Margin Kotor akan membantu pengguna memahami perbandingan nilai Total Margin Kotor untuk setiap titik data dengan total margin kotor di seluruh set data.

Untuk menyesuaikan tooltip, ikuti langkah-langkah berikut:

measure: total_gross_margin {
  type: sum
  value_format_name: decimal_2
  sql: ${gross_margin} ;;
  html: {{ rendered_value }} | {{percent_of_gross_margin._rendered_value }} of total ;;
}

1. Di Mode Pengembangan, buka definisi LookML untuk kolom yang ingin Anda sesuaikan.

   Anda dapat membuka langsung definisi LookML kolom dari Eksplorasi.

2. Tentukan kolom dan nilai yang ingin Anda sertakan dalam tooltip selain kolom asli. Misalnya, Persen Margin Kotor dari Total.

3. Tambahkan parameter html ke ukuran asli yang dirujuk dalam kueri Jelajah dan ditampilkan di tooltip. Dalam hal ini, ukuran yang saat ini ada dalam kueri Eksplorasi dan ditampilkan di tooltip adalah Total Margin Kotor.

4. Dalam parameter html, buat ekspresi dengan variabel Liquid yang menambahkan kolom tambahan ke nilai ukuran yang ada.

   • Contoh ini menggunakan variabel Liquid _rendered_value untuk menampilkan nilai yang diformat Looker. Misalnya, total_gross_margin menggunakan pemformatan Looker untuk dua desimal, dan percent_of_total_gross_margin menggunakan pemformatan Looker untuk persentase dengan dua desimal.
   • Anda dapat menggunakan karakter pipa,|, untuk memisahkan nilai untuk kolom yang berbeda.
   • Anda juga dapat menambahkan kata lain yang dapat memperjelas arti nilai lain yang dirender di tooltip. Dalam hal ini, of total ditambahkan untuk mengklarifikasi arti nilai persentase.

5. Simpan, validasi, dan kirim kode Anda ke produksi setelah memverifikasi bahwa kode tersebut berfungsi seperti yang diharapkan.

Catatan: Input parameter html hanya memengaruhi cara nilai dirender kepada pengguna. Tindakan ini tidak mengubah nilai pokok dalam database.

Tooltip kini akan menampilkan dua nilai saat pengguna mengarahkan kursor ke titik data dengan tooltip: nilai total_gross_margin titik data, dan nilai percent_of_total_gross_margin yang sesuai.

Langkah berikutnya

Setelah membuat visualisasi dengan tooltip yang disesuaikan, Anda dapat membagikannya kepada orang lain:

• Menyimpan Eksplorasi sebagai Look
• Menambahkan Eksplorasi ke dasbor
• Membagikan Jelajah dengan URL