Cara menggunakan Pembuat Visualisasi Kustom

Pembuat Visualisasi Kustom (CVB) adalah tempat bermain yang memberi developer lingkungan untuk mem-build dan menguji visualisasi kustom mereka sebelum menambahkannya ke Looker. Berikut adalah contoh cara menggunakan alat ini.

CVB memiliki dua sisi:

1. Sisi kiri tempat Anda akan menulis kode JavaScript visualisasi
2. Sisi kanan yang juga dibagi menjadi dua bagian:
   1. Bagian atas memiliki tab berikut:
      1. Respons Kueri: tempat Anda dapat menambahkan format JSON respons kueri.
      2. Data Mentah. Anda harus memasukkan array data yang ditampilkan oleh Looker di sini.
      3. Dependensi yang juga merupakan tab wajib sehingga Anda perlu memasukkan array string dengan link CDN dari semua dependensi yang diperlukan visualisasi Anda.
   2. Bagian bawah tempat visualisasi yang dihasilkan ditampilkan.

Misalnya, Anda ingin membuat visualisasi berikut menggunakan library Chart.js:

Objek visualisasi memiliki dua properti yang diperlukan: fungsi create dan updateAsync. Tutorial ini akan berfokus pada fungsi yang dipanggil setiap kali status visualisasi Anda mungkin perlu diubah. Fungsi ini akan selalu dipanggil setelah create, dan dapat dipanggil beberapa kali.

Langkah 1: Ekstrak dan siapkan data

Data akan diteruskan ke fungsi updateAsync menggunakan parameter pertamanya, yang secara konvensional diberi nama data. Kode berikut melakukan loop melalui setiap elemen objek data ini dan mendorong nilai data ke dalam array actual_data dan label ke dalam array data_labels. Kedua array ini akan digunakan nanti untuk menggambar visualisasi.

const data_labels = []
const actual_data = []

data.forEach((d)=>{
     data_labels.push(d["Products Category"])
     actual_data.push(d["Products Count"])
})

Langkah 2: Tambahkan visualisasi ke halaman

Chart.js memerlukan canvas untuk merender visualisasi ke halaman. Anda perlu membuat elemen canvas dengan id pilihan Anda (myChart digunakan untuk tutorial ini), lalu menambahkan canvas ini ke elemen div yang digunakan CVB untuk merender visualisasi. div ini memiliki atribut ID bernama vis.

const vizCanvas = document.createElement('canvas')
vizCanvas.setAttribute("id", "myChart")

const vizDiv = document.getElementById("vis")
vizDiv.appendChild(vizCanvas)

Langkah 3: Gambar visualisasi di halaman

Setelah memiliki elemen canvas di halaman dengan ID myChart, Anda dapat menargetkan elemen ini dan menggambar visualisasi seperti ini:

const ctx = document.getElementById("myChart")
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data_labels,
    datasets: [{
      label: 'Top 5 Product Category',
      data: actual_data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

doneRendering()

Penting untuk memanggil fungsi doneRendering pada akhirnya untuk menunjukkan bahwa visualisasi dirender sepenuhnya. Hal ini sangat penting untuk dipanggil jika visualisasi Anda perlu melakukan panggilan asinkron atau perlu dirender sebagai PDF.

Kode akhir terlihat seperti ini:

const visObject = {
    create: function(element, config){
        element.innerHTML = "";
    },

    updateAsync: function (data, element, config, queryResponse, details, doneRendering) {
        const data_labels = []
        const actual_data = []

        data.forEach((d)=>{
            data_labels.push(d["Products Category"])
            actual_data.push(d["Products Count"])
        })

        const vizCanvas = document.createElement('canvas')
        vizCanvas.setAttribute("id", "myChart")

        const vizDiv = document.getElementById("vis")
        vizDiv.appendChild(vizCanvas)

        const ctx = document.getElementById("myChart")
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data_labels,
                datasets: [{
                    label: 'Top 5 Product Category',
                    data: actual_data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });

        doneRendering()
    }
};

looker.plugins.visualizations.add(visObject);

Data dari Looker

Berikut data yang ditampilkan oleh Looker yang dapat Anda berikan di tab RAW DATA di CVB:

[{"Products Category":"Jumpsuits & Rompers","Products Count":"162"},
{"Products Category":"Suits","Products Count":"184"},
{"Products Category":"Skirts","Products Count":"364"},
{"Products Category":"Plus","Products Count":"439"},
{"Products Category":"Blazers & Jackets","Products Count":"551"}]

Dependensi

Berikut adalah dependensi yang diperlukan untuk merender visualisasi ini:

["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"]

Respons Kueri

Anda dapat mengekstrak respons kueri di Looker dengan melakukan panggilan API ke endpoint Get Query.

Langkah Terakhir

Setelah kode berfungsi dan visualisasi dirender seperti yang diharapkan, Anda dapat mengikuti langkah-langkah yang diuraikan dalam dokumentasi untuk mengirimkan visualisasi ke Looker.