Como usar o criador de visualizações personalizadas

O criador de visualizações personalizadas (CVB) é um espaço de testes que oferece aos programadores um ambiente para criar e testar a respetiva visualização personalizada antes de a adicionar ao Looker. Segue-se um exemplo de como pode usar esta ferramenta.

O CVB tem dois lados:

1. O lado esquerdo, onde vai escrever o código JavaScript da visualização
2. O lado direito, que também está dividido em duas secções:
   1. A secção superior tem os seguintes separadores:
      1. Resposta da consulta: onde pode adicionar o formato JSON da resposta da consulta.
      2. Dados não processados. Tem de introduzir aqui uma matriz dos dados devolvidos pelo Looker.
      3. Dependencies, que também é um separador obrigatório. Por isso, tem de introduzir uma matriz de strings com os links da RFC de todas as dependências de que a visualização precisa.
   2. A secção inferior onde é apresentada a visualização resultante.

Suponhamos que quer criar a seguinte visualização com a biblioteca Chart.js:

O objeto de visualização tem duas propriedades obrigatórias: a função create e a função updateAsync. Este tutorial vai focar-se na última opção, que é uma função chamada sempre que o estado da sua visualização pode ter de ser alterado. É sempre chamado após create e pode ser chamado várias vezes.

Passo 1: extraia e prepare os dados

Os dados são transmitidos para a função updateAsync através do respetivo primeiro parâmetro, convencionalmente denominado data. O código seguinte percorre cada elemento deste objeto data e envia os valores de dados para uma matriz actual_data e as etiquetas para uma matriz data_labels. Estes dois conjuntos serão usados mais tarde para desenhar a visualização.

const data_labels = []
const actual_data = []

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

Passo 2: anexe a visualização à página

O Chart.js precisa de um canvas para renderizar a visualização na página. Tem de criar um elemento canvas com um id à sua escolha (myChart é usado para este tutorial) e, em seguida, anexar este canvas ao elemento div que o CVB usa para renderizar a visualização. Este div tem um atributo id denominado vis.

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

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

Passo 3: desenhe a visualização na página

Agora que tem um elemento canvas na página com um ID de myChart, pode segmentar este elemento e desenhar a visualização da seguinte forma:

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 chamar a função doneRendering no final para indicar que a visualização foi totalmente renderizada. Isto é especialmente importante se a visualização precisar de fazer chamadas assíncronas ou ser renderizada como um PDF.

O código final tem o seguinte aspeto:

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

Dados do Looker

Seguem-se os dados devolvidos pelo Looker que pode fornecer no separador DADOS NÃO PROCESSADOS do 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"}]

Dependências

Segue-se a dependência necessária para renderizar esta visualização:

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

Resposta da consulta

Pode extrair a resposta da consulta no Looker fazendo uma chamada API ao ponto final Get Query.

Passo final

Assim que o código estiver a funcionar e a visualização for renderizada conforme esperado, pode seguir os passos descritos na documentação para enviar a visualização para o Looker.