Utiliser l'outil de création de visualisations personnalisées

L'outil de création de visualisations personnalisées (CVB) est un espace de test qui permet aux développeurs de créer et de tester leur visualisation personnalisée avant de l'ajouter à Looker. Voici un exemple d'utilisation de cet outil.

La CVB comporte deux côtés:

1. Côté gauche, où vous allez écrire le code JavaScript de votre visualisation
2. Le côté droit, qui est également divisé en deux sections :
   1. La section supérieure comporte les onglets suivants :
      1. Réponse à la requête: vous pouvez y ajouter le format JSON de votre réponse à la requête.
      2. Données brutes Vous devez saisir ici un tableau des données renvoyées par Looker.
      3. Dépendances, qui est également un onglet obligatoire. Vous devez donc saisir un tableau de chaînes contenant les liens CDN de toutes les dépendances dont votre visualisation a besoin.
   2. Section inférieure dans laquelle s'affiche la visualisation obtenue.

Supposons que vous souhaitiez créer la visualisation suivante à l'aide de la bibliothèque Chart.js:

L'objet de visualisation comporte deux propriétés obligatoires: la fonction create et la fonction updateAsync. Ce tutoriel se concentrera sur la seconde, qui est une fonction appelée chaque fois que l'état de votre visualisation peut nécessiter un changement. Il est toujours appelé après create et peut être appelé plusieurs fois.

Étape 1: Extraction et préparation des données

Les données seront transmises à la fonction updateAsync à l'aide de son premier paramètre, nommé conventionnellement data. Le code suivant parcourt chaque élément de cet objet data et insère les valeurs de données dans un tableau actual_data et les libellés dans un tableau data_labels. Ces deux tableaux seront utilisés ultérieurement pour dessiner la visualisation.

const data_labels = []
const actual_data = []

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

Étape 2: Ajoutez la visualisation à la page

Chart.js a besoin d'un canvas pour afficher la visualisation sur la page. Vous devez créer un élément canvas avec un id de votre choix (myChart est utilisé pour ce tutoriel), puis ajouter cet élément canvas à l'élément div que le CVB utilise pour afficher la visualisation. Cet élément div possède un attribut d'ID nommé vis.

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

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

Étape 3: Dessinez la visualisation sur la page

Maintenant que vous avez un élément canvas sur la page avec un ID de myChart, vous pouvez cibler cet élément et dessiner la visualisation comme suit:

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

Il est important d'appeler la fonction doneRendering à la fin pour indiquer que la visualisation est entièrement affichée. Cette méthode est particulièrement importante à appeler si votre visualisation doit effectuer des appels asynchrones ou être affichée au format PDF.

Le code final se présente comme suit:

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

Données de Looker

Voici les données renvoyées par Looker que vous pouvez fournir dans l'onglet DONNÉES BRUTES 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"}]

Dépendances

Voici la dépendance nécessaire pour afficher cette visualisation:

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

Réponse à la requête

Vous pouvez extraire la réponse de la requête dans Looker en effectuant un appel d'API au point de terminaison Get Query (Obtenir la requête).

Dernière étape

Une fois que votre code fonctionne et que la visualisation s'affiche comme prévu, vous pouvez suivre les étapes décrites dans la documentation pour envoyer votre visualisation à Looker.