Notez que vous consultez la documentation Looker. Pour accéder à la documentation sur Looker Studio, consultez la page https://support.google.com/looker-studio.

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 vignette de texte Markdown. Toutefois, les images des vignettes de texte sont statiques et ne seront pas mises à jour en fonction des résultats. Comment faire si vous souhaitez qu'une image de tableau de bord change de façon dynamique en fonction d'une valeur de filtre sélectionnée par l'utilisateur ?

Cette page des bonnes pratiques montre comment créer une image de tableau de bord dynamique en utilisant Liquid et le 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, qui représente les États dans un ensemble de données d'e-commerce fictif:

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

Supposons que vous souhaitiez afficher l'image du drapeau d'un état sur un tableau de bord qui sera mis à 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 de tableau de bord dynamique, vous devez suivre trois étapes:

Créez une dimension d'image dans LookML.
Créez une vignette de tableau de bord avec image dynamique.
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 en LookML:

Tout d'abord, accédez au projet et affichez le fichier contenant la dimension à laquelle vous souhaitez ajouter des images. Ensuite, créez une dimension basée sur ce champ, spécifiquement pour l'utilisation de l'affichage des images.

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

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

      dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% dynamic 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">
              {% dynamic 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">
              {% dynamic endif %} ;;
      }

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 indiqué dans le post destiné à la communauté Comment ajouter des images aux visualisations.

Vous pouvez ensuite créer une vignette de tableau de bord pour la dimension image.

Étape 2: Créez une vignette de tableau de bord "Image dynamique"

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

Créez votre exploration en fonction des critères suivants:

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

Votre exploration affiche le résultat de la première image dans la visualisation à valeur unique affichée dans le panneau Visualisation. L'image à afficher 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 carte.

Étape 3: Ajoutez des filtres du tableau de bord et apportez la touche finale

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

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

Ouvrez la fenêtre "Ajouter un filtre".
Sélectionnez le champ à utiliser comme filtre. Le champ de filtre doit correspondre à la dimension sur laquelle est basée la dimension de l'image. Dans cet exemple, le champ du filtre sera state.
Sélectionnez la tuile d'image de l'étape 2 de l'onglet Tiles to Update (Cartes à mettre à jour).
Sélectionnez la dimension d'origine (l'state dans ce cas) dans le menu déroulant state intégré.
Personnalisez le filtre comme vous le souhaitez. Si vous sélectionnez l'option de contrôle avancée, veillez à désélectionner l'option Autoriser plusieurs valeurs de filtre, qui est automatiquement activée pour l'option de contrôle Avancé.

La vignette 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 le drapeau de l'État et les données correspondantes:

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