Cómo usar el creador de visualizaciones personalizadas

El compilador de visualizaciones personalizadas (CVB) es un espacio de pruebas que ofrece a los desarrolladores un entorno para crear y probar sus visualizaciones personalizadas antes de añadirlas a Looker. A continuación, te mostramos un ejemplo de cómo puedes usar esta herramienta.

El CVB tiene dos caras:

1. La parte izquierda, donde escribirás el código JavaScript de tu visualización
2. La parte derecha, que también se divide en dos secciones:
   1. La sección superior tiene las siguientes pestañas:
      1. Respuesta de la consulta: aquí puedes añadir el formato JSON de la respuesta de tu consulta.
      2. Datos en bruto. Aquí debes introducir una matriz de los datos devueltos por Looker.
      3. Dependencias: esta pestaña también es obligatoria, por lo que debe introducir una matriz de cadenas con los enlaces CDN de todas las dependencias que necesite su visualización.
   2. La sección inferior donde se muestra la visualización resultante.

Supongamos que quieres crear la siguiente visualización con la biblioteca Chart.js:

El objeto de visualización tiene dos propiedades obligatorias: la función create y la función updateAsync. En este tutorial nos centraremos en esta última, que es una función que se llama cada vez que puede ser necesario cambiar el estado de la visualización. Siempre se llamará después de create y se puede llamar muchas veces.

Paso 1: Extraer y preparar los datos

Los datos se transferirán a la función updateAsync mediante su primer parámetro, que se denomina data por convención. El siguiente código recorre en bucle cada elemento de este objeto data e inserta los valores de datos en una matriz actual_data y las etiquetas en una matriz data_labels. Estos dos arrays se usarán más adelante para dibujar la visualización.

const data_labels = []
const actual_data = []

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

Paso 2: Añade la visualización a la página

Chart.js necesita un canvas para renderizar la visualización en la página. Debes crear un elemento canvas con un id de tu elección (en este tutorial se usa myChart) y, a continuación, añadir este elemento canvas al elemento div que usa CVB para renderizar la visualización. Este div tiene un atributo de ID llamado vis.

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

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

Paso 3: Dibuja la visualización en la página

Ahora que tienes un elemento canvas en la página con el ID myChart, puedes orientar los anuncios a este elemento y dibujar la visualización de la siguiente manera:

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

Es importante llamar a la función doneRendering al final para indicar que la visualización se ha renderizado por completo. Es especialmente importante llamar a esta función si tu visualización necesita realizar llamadas asíncronas o renderizarse como PDF.

El código final es el siguiente:

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

Datos de Looker

Estos son los datos que devuelve Looker y que puedes proporcionar en la pestaña DATOS SIN PROCESAR de la 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"}]

Dependencias

Esta es la dependencia necesaria para renderizar esta visualización:

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

Query Response

Puedes extraer la respuesta de la consulta en Looker haciendo una llamada a la API al endpoint Get Query.

Paso final

Una vez que el código funcione y la visualización se renderice según lo esperado, puedes seguir los pasos que se indican en la documentación para enviar tu visualización a Looker.