Créer une image de tableau de bord dynamique avec Liquid et HTML

Vous pouvez ajouter des images aux tableaux de bord Looker en codant en dur l'URL d'une image dans une carte de texte Markdown. Toutefois, les images des cartes de texte sont statiques et ne s'actualisent pas en fonction des résultats. Que faire si vous souhaitez que l'image d'un tableau de bord change de manière dynamique en fonction d'une valeur de filtre sélectionnée par l'utilisateur ?

Cette page de bonnes pratiques explique comment créer une image de tableau de bord dynamique à l'aide de Liquid et du paramètre html.

La solution

La solution suivante est basée sur un ensemble de données d'e-commerce qui inclut un champ appelé users.state, représentant les états dans un ensemble de données d'e-commerce hypothétique: 

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

Imaginons que vous souhaitiez afficher l'image du drapeau d'un État sur un tableau de bord qui se met à jour en fonction de l'État par lequel un utilisateur choisit de filtrer les résultats du tableau de bord.

Pour créer l'image du tableau de bord dynamique, vous devez suivre trois étapes:

  1. Créez une dimension d'image dans LookML.
  2. Créer une carte de tableau de bord d'image dynamique
  3. Ajoutez des filtres de tableau de bord et apportez les touches finales.

Étape 1: Créer une dimension d'image dans LookML

Pour créer une dimension d'image dans LookML:

  1. Accédez d'abord au projet et au fichier de vue contenant la dimension à laquelle vous souhaitez ajouter des images. Créez ensuite une dimension basée sur ce champ, spécifiquement pour afficher les images.

  2. Ajoutez un paramètre html pour définir une instruction conditionnelle {% if %} Liquid avec la variable value, pour chaque valeur pour laquelle vous souhaitez afficher une image.

    Par exemple, la dimension state_flag_image suivante établit une condition pour afficher les images spécifiées (avec des balises html <img> ) lorsque la valeur de state est "California", "New York", "Colorado" ou "Illinois". Pour tous les autres états, vous pouvez afficher une icône "Aucune image disponible" : 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% endif %} ;;
      }
  3. Créez une condition de valeur pour chaque valeur pour laquelle vous souhaitez afficher une image. Vous pouvez également créer un champ d'image dynamique à l'aide de la variable Liquid value, comme décrit dans le post de la communauté Ajouter des images aux visualisations.

Vous pouvez ensuite créer une carte de tableau de bord pour la dimension "Image".

Étape 2: Créer une carte de tableau de bord d'image dynamique

Maintenant que la dimension d'image (state_flag_image) a été créée, vous pouvez créer une exploration qui deviendra la carte du tableau de bord d'images dynamiques.

Créez votre exploration en utilisant les critères suivants:

  • Ajoutez un filtre pour la dimension d'origine (state dans ce cas). Définissez le filtre sur n'importe quelle valeur (l'indicateur d'état affichera l'image "Aucune image disponible" dans ce cas, car aucune valeur de filtre spécifique n'est sélectionnée). Cette valeur de filtre est mise à jour en fonction de ce que l'utilisateur sélectionne pour le filtre du tableau de bord. 
  • Sélectionnez la dimension de l'image (dans ce cas, state_flag_image) et toutes les autres dimensions qui peuvent être nécessaires à la requête qui détermine l'image (par exemple, si vous souhaitez prendre en compte une date, vous pouvez l'inclure, etc.).
  • Définissez la limite de lignes sur une ligne.
  • Choisissez un type de visualisation à valeur unique et masquez toutes les autres colonnes, à l'exception de la dimension Image (state_flag_image). 

Votre exploration affichera le premier résultat d'image dans la visualisation à valeur unique affichée dans le panneau Visualisation. L'image affichée change en fonction de la valeur de filtre sélectionnée par l'utilisateur dans le tableau de bord final:

Enregistrez l'exploration dans un tableau de bord en tant que vignette.

Étape 3: Ajoutez des filtres de tableau de bord et apportez les touches finales

Vous devez maintenant ajouter des filtres au tableau de bord. Les filtres du tableau de bord mettront à jour le filtre dans l'exploration pour modifier l'image affichée en fonction de la sélection de l'utilisateur.

Dans le mode Édition du tableau de bord, créez le filtre:

  • Ouvrez la fenêtre Ajouter un filtre.
  • Sélectionnez le champ à utiliser comme critère de filtrage. Le champ de filtre doit être la dimension sur laquelle la dimension de l'image est basée. Dans cet exemple, le champ du filtre sera state (état).
  • Sélectionnez la vignette d'image de l'étape 2 dans l'onglet Vignettes à mettre à jour.
  • Sélectionnez la dimension d'origine (état dans ce cas) dans le menu déroulant Champ à filtrer intégré.
    • Sélectionnez les autres cartes à mettre à jour si nécessaire.
  • Personnalisez le filtre comme vous le souhaitez. Si vous sélectionnez l'option de contrôle Avancé, veillez à désélectionner l'option Autoriser les valeurs de filtre multiples, qui est automatiquement activée pour l'option de contrôle Avancé.

La carte d'image est maintenant mise à jour avec la sélection du filtre utilisateur.

Lorsqu'un utilisateur choisit de filtrer par "Californie", le tableau de bord affiche l'emblème de l'État et les données correspondantes:

Lorsqu'un utilisateur choisit de filtrer par "Colorado", le tableau de bord affiche l'icône de l'État et les données correspondantes: