Cómo usar el Creador de visualizaciones personalizadas

El Creador de visualizaciones personalizadas (CVB) es un campo de pruebas que les brinda a los desarrolladores un entorno para compilar y probar sus visualizaciones personalizadas antes de agregarlas a Looker. Este es un ejemplo de cómo puedes usar esta herramienta.

El CVB tiene dos lados:

1. El lado izquierdo, en el que escribirás el código de JavaScript de tu visualización
2. El lado derecho, que también se divide en dos secciones:
   1. La sección superior tiene las siguientes pestañas:
      1. Query Response: Aquí puedes agregar el formato JSON de la respuesta de tu consulta.
      2. Datos sin procesar. Aquí debes ingresar un array de los datos que devuelve Looker.
      3. Dependencias, que también es una pestaña obligatoria, por lo que debes ingresar un array de cadenas con los vínculos de CDN de todas las dependencias que necesita tu visualización.
   2. Es la sección inferior en la que se muestra la visualización resultante.

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

El objeto de visualización tiene dos propiedades obligatorias: create y la función updateAsync. En este instructivo, nos enfocaremos en la última, que es una función a la que se llama cada vez que es posible que debas cambiar el estado de tu visualización. Siempre se llamará después de create y es posible que se llame varias veces.

Paso 1: Extrae y prepara los datos

Los datos se pasarán a la función updateAsync mediante su primer parámetro, llamado convencionalmente data. El siguiente código recorre cada elemento de este objeto data y envía los valores de datos a un array actual_data y las etiquetas a un array 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: Agrega 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 (se usa myChart para este instructivo) y, luego, adjuntar este canvas al elemento div que usa el CVB para renderizar la visualización. Este div tiene un atributo 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 un ID de myChart, puedes segmentar 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 renderizó por completo. Esto es muy importante si tu visualización debe realizar llamadas asíncronas o debe renderizarse como un PDF.

El código final se ve así:

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 muestra Looker y que puedes proporcionar en la pestaña DATOS SIN PROCESAR 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"}]

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"]

Respuesta de la consulta

Para extraer la respuesta de la consulta en Looker, realiza una llamada a la API al extremo Get Query.

Paso final

Una vez que el código funcione y la visualización se renderice como se espera, puedes seguir los pasos que se describen en la documentación para enviar tu visualización a Looker.