Como usar o Custom Visualization Builder

O Custom Visualization Builder (CVB) é um ambiente de testes que oferece aos desenvolvedores um ambiente para criar e testar a visualização personalizada antes de adicioná-la ao Looker. Confira um exemplo de como usar essa ferramenta.

O CVB tem dois lados:

1. O lado esquerdo, onde você vai escrever o código JavaScript da visualização.
2. O lado direito, que também é dividido em duas seções:
   1. A seção de cima tem as seguintes guias:
      1. Resposta da consulta: onde você pode adicionar o formato JSON da resposta da consulta.
      2. Dados brutos. Insira aqui uma matriz dos dados retornados pelo Looker.
      3. Dependências, que também é uma guia obrigatória, então você precisa inserir uma matriz de string com os links do CDN de todas as dependências necessárias para a visualização.
   2. A seção inferior em que a visualização resultante é mostrada.

Digamos que você queira criar a seguinte visualização usando a biblioteca Chart.js:

O objeto de visualização tem duas propriedades obrigatórias: create e a função updateAsync. Este tutorial vai se concentrar na segunda, que é uma função chamada sempre que o estado da visualização precisa mudar. Ele sempre será chamado depois de create e poderá ser chamado várias vezes.

Etapa 1: extrair e preparar os dados

Os dados serão transmitidos para a função updateAsync usando o primeiro parâmetro, convencionalmente chamado de data. O código a seguir percorre cada elemento desse objeto data e envia os valores de dados para uma matriz actual_data e os rótulos para uma matriz data_labels. Essas duas matrizes serão usadas 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"])
})

Etapa 2: anexar a visualização à página

O Chart.js precisa de um canvas para renderizar a visualização na página. Você precisa criar um elemento canvas com uma id de sua escolha (myChart é usado neste tutorial) e anexar esse canvas ao elemento div que o CVB usa para renderizar a visualização. Esse div tem um atributo id chamado vis.

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

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

Etapa 3: desenhar a visualização na página

Agora que você tem um elemento canvas na página com um ID de myChart, é possível segmentar esse elemento e desenhar a visualização assim:

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 renderizada por completo. Isso é especialmente importante se a visualização precisar realizar chamadas assíncronas ou precisar ser renderizada como um PDF.

O código final vai ficar assim:

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

Estes são os dados retornados pelo Looker que você pode fornecer na guia DADOS BRUTOS 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

Confira a dependência necessária para renderizar essa visualização:

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

Resposta da consulta

Para extrair a resposta da consulta no Looker, faça uma chamada de API para o endpoint Get Query.

Etapa final

Quando o código estiver funcionando e a visualização for renderizada conforme o esperado, siga as etapas descritas na documentação para enviar a visualização ao Looker.