Come utilizzare lo Strumento per la creazione di visualizzazioni personalizzate

Lo strumento Custom Visualization Builder (CVB) è un'area di test che offre agli sviluppatori un ambiente per creare e testare la visualizzazione personalizzata prima di aggiungerla a Looker. Ecco un esempio di come utilizzare questo strumento.

Il CVB ha due lati:

1. Il lato sinistro, dove scriverai il codice JavaScript della visualizzazione
2. Il lato destro, anch'esso diviso in due sezioni:
   1. La sezione in alto contiene le seguenti schede:
      1. Risposta alla query: puoi aggiungere il formato JSON della risposta alla query.
      2. Dati non elaborati. Devi inserire qui un array dei dati restituiti da Looker.
      3. Dipendenze, che è anche una scheda obbligatoria, quindi devi inserire un array di stringhe con i link CDN di tutte le dipendenze necessarie per la visualizzazione.
   2. La sezione inferiore in cui viene visualizzata la visualizzazione risultante.

Supponiamo che tu voglia creare la seguente visualizzazione utilizzando la libreria Chart.js:

L'oggetto di visualizzazione ha due proprietà obbligatorie: la funzione create e updateAsync. Questo tutorial si concentrerà sulla seconda, una funzione che viene chiamata ogni volta che lo stato della visualizzazione potrebbe dover essere modificato. Verrà sempre chiamato dopo create e può essere chiamato più volte.

Passaggio 1: estrai e prepara i dati

I dati verranno passati alla funzione updateAsync utilizzando il primo parametro, convenzionalmente denominato data. Il codice seguente esegue un ciclo per ogni elemento di questo oggetto data e inserisce i valori dei dati in un array actual_data e le etichette in un array data_labels. Questi due array verranno utilizzati in seguito per disegnare la visualizzazione.

const data_labels = []
const actual_data = []

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

Passaggio 2: aggiungi la visualizzazione alla pagina

Chart.js ha bisogno di un canvas per eseguire il rendering della visualizzazione nella pagina. Devi creare un elemento canvas con un id a tua scelta (per questo tutorial viene utilizzato myChart), quindi aggiungere questo canvas all'elemento div utilizzato dal CVB per eseguire il rendering della visualizzazione. Questo div ha un attributo id denominato vis.

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

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

Passaggio 3: disegna la visualizzazione sulla pagina

Ora che nella pagina è presente un elemento canvas con ID myChart, puoi scegliere come target questo elemento e disegnare la visualizzazione come segue:

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()

È importante chiamare la funzione doneRendering alla fine per indicare che la visualizzazione è stata completamente visualizzata. Questa chiamata è particolarmente importante se la visualizzazione deve eseguire chiamate asincrone o deve essere visualizzata come PDF.

Il codice finale sarà il seguente:

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);

Dati di Looker

Di seguito sono riportati i dati restituiti da Looker che puoi fornire nella scheda DATI NON ELABORATI del 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"}]

Dipendenze

Ecco la dipendenza necessaria per visualizzare questa visualizzazione:

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

Risposta alla query

Puoi estrarre la risposta alla query in Looker effettuando una chiamata API all'endpoint Get Query.

Passaggio finale

Una volta che il codice funziona e la visualizzazione viene visualizzata come previsto, puoi seguire i passaggi descritti nella documentazione per inviare la visualizzazione a Looker.