Membuat gambar dasbor dinamis dengan Liquid dan HTML

Anda dapat menambahkan gambar ke dasbor Looker dengan melakukan hard code pada URL gambar di kartu teks Markdown. Namun, gambar dalam kartu teks bersifat statis dan tidak akan diperbarui berdasarkan hasil. Bagaimana jika Anda ingin gambar dasbor berubah secara dinamis berdasarkan nilai filter yang dipilih pengguna?

Halaman Praktik Terbaik ini menunjukkan cara mendapatkan gambar dasbor dinamis menggunakan Liquid dan parameter html.

Solusi

Solusi berikut didasarkan pada set data e-commerce yang menyertakan kolom bernama users.state, yang mewakili status dalam set data e-commerce hipotetis: 

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

Misalnya, Anda ingin menampilkan gambar bendera negara bagian di dasbor yang akan diperbarui berdasarkan status yang dipilih pengguna untuk memfilter hasil dasbor.

Ada tiga langkah yang perlu Anda selesaikan untuk membuat gambar dasbor dinamis:

  1. Buat dimensi gambar di LookML.
  2. Buat kartu dasbor gambar dinamis.
  3. Tambahkan filter dasbor dan sentuhan akhir.

Langkah 1: Buat dimensi gambar di LookML

Untuk membuat dimensi gambar di LookML:

  1. Pertama, buka project dan lihat file yang berisi dimensi yang ingin Anda tambahkan gambar. Kemudian, buat dimensi baru berdasarkan kolom tersebut, khususnya untuk penggunaan menampilkan gambar.

  2. Tambahkan parameter html untuk menentukan pernyataan kondisional {% if %} Liquid dengan variabel value, untuk setiap nilai yang ingin Anda tampilkan gambarnya.

    Misalnya, dimensi state_flag_image berikut menetapkan kondisi untuk menampilkan gambar yang ditentukan (dengan tag html <img> ) jika nilai state adalah "California", "New York", "Colorado", atau "Illinois". Untuk semua status lainnya, Anda dapat menampilkan ikon "tidak ada gambar yang tersedia": 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% endif %} ;;
      }
  3. Buat kondisi nilai untuk setiap nilai yang ingin Anda tampilkan gambarnya. Atau, Anda dapat membuat kolom gambar dinamis menggunakan variabel Liquid value, seperti yang dijelaskan dalam Postingan komunitas Cara menambahkan gambar ke visualisasi.

Selanjutnya, Anda dapat membuat kartu dasbor untuk dimensi gambar.

Langkah 2: Buat kartu dasbor gambar dinamis

Setelah dimensi gambar (state_flag_image) dibuat, Anda dapat membuat Jelajah yang akan menjadi kartu dasbor gambar dinamis.

Buat Jelajah dengan kriteria berikut:

  • Tambahkan filter untuk dimensi asli (dalam hal ini, state). Tetapkan filter untuk nilai apa pun (tanda status akan menampilkan gambar "tidak ada gambar yang tersedia" dalam hal ini, karena tidak ada nilai filter tertentu yang dipilih). Nilai filter ini akan diperbarui sesuai dengan yang dipilih pengguna untuk filter dasbor. 
  • Pilih dimensi gambar (dalam hal ini, state_flag_image) dan dimensi lain yang mungkin diperlukan untuk kueri yang menentukan gambar (misalnya, jika Anda ingin mempertimbangkan tanggal, Anda dapat menyertakan tanggal, dll.).
  • Ubah batas baris menjadi satu baris.
  • Ubah jenis visualisasi ke visualisasi nilai tunggal dan sembunyikan kolom lain kecuali dimensi gambar (state_flag_image). 

Jelajah akan menampilkan hasil gambar pertama dalam visualisasi nilai tunggal yang dirender di panel Visualisasi. Gambar tampilan akan berubah berdasarkan nilai filter yang dipilih pengguna di dasbor akhir:

Simpan Jelajah ke dasbor sebagai kartu.

Langkah 3: Menambahkan filter dasbor dan sentuhan akhir

Sekarang, Anda perlu menambahkan filter dasbor ke dasbor. Filter di dasbor akan memperbarui filter di Jelajahi untuk mengubah gambar yang ditampilkan berdasarkan pilihan pengguna.

Dari mode edit dasbor, buat filter:

  • Buka jendela Tambahkan filter
  • Pilih kolom yang akan difilter. Kolom filter harus berupa dimensi yang menjadi dasar dimensi gambar. Dalam contoh ini, kolom untuk filter adalah state.
  • Pilih kartu gambar dari Langkah 2 di tab Kartu yang Akan Diupdate.
  • Pilih dimensi asli (state dalam hal ini) di menu drop-down Kolom untuk Difilter inline.
    • Pilih kartu lain untuk diperbarui sesuai keinginan.
  • Sesuaikan filter sesuai keinginan. Jika Anda memilih Lanjutan opsi kontrol pastikan untuk membatalkan pilihan opsi Izinkan beberapa nilai filter, yang otomatis diaktifkan untuk opsi kontrol Lanjutan.

Sekarang, kartu gambar akan diperbarui dengan pilihan filter pengguna.

Saat pengguna memilih untuk memfilter menurut "California", dasbor akan menampilkan bendera negara bagian dan data untuk negara bagian California:

Saat pengguna memilih untuk memfilter menurut "Colorado", dasbor akan menampilkan bendera negara bagian dan data untuk negara bagian Colorado: