Livre de recettes pour tirer le meilleur parti des visualisations Looker: personnalisation des info-bulles

Remarque : Cette page fait partie du livre de recettes Looker : Tirer le meilleur parti des visualisations Looker.

Conseil : À partir de Looker 24.0, vous pouvez utiliser l'éditeur de configuration de graphique pour personnaliser davantage le style et la couleur des info-bulles.

Conseil : À partir de Looker 26.4, le paramètre Custom Tooltips (Info-bulles personnalisées) vous permet de configurer des info-bulles dans l'éditeur de visualisation Explore à l'aide d'une combinaison de paramètres d'interface utilisateur et d'un éditeur HTML compatible avec les modèles Liquid. En savoir plus sur les info-bulles personnalisées.

Par défaut, l'info-bulle de visualisation affiche la valeur des dimensions et des mesures sélectionnées, et peut aider les utilisateurs à comprendre la signification d'un point de données unique.

Par exemple, une info-bulle pour une visualisation de carte basée sur la marge brute totale regroupée par État affiche les valeurs des deux champs lorsqu'un utilisateur pointe sur l'État de Californie.

Toutefois, que faire si vous souhaitez inclure des champs autres que ceux par défaut dans l'info-bulle afin que les utilisateurs puissent obtenir plus d'informations ou de contexte sur un point de données sans avoir à chercher ailleurs ?

Vous pouvez personnaliser l'info-bulle pour afficher les valeurs de plusieurs champs spécifiés, y compris ceux qui ne figurent pas dans la requête Explore.

Attention : Le formatage HTML ne s'affiche que dans les visualisations de graphique de tableau, de tableau (hérité) et à valeur unique, ainsi que dans les info-bulles de visualisation lorsque plusieurs champs sont combinés. Tout contenu interactif placé dans l'info-bulle d'un graphique de carte avec le paramètre html ne sera pas accessible sur les tableaux de bord qui utilisent la nouvelle expérience de tableau de bord, bien qu'il le soit sur les Looks et les explorations.

Composants

• Variables Liquid : les variables Liquid affichent les valeurs d'autres champs en plus de la requête Explore existante.
• html paramètre : les champs définis dans le paramètre html d'une mesure s'affichent dans l'info-bulle lorsqu'un utilisateur pointe sur une visualisation.
• Visualisation : l'info-bulle s'affiche lorsqu'un utilisateur pointe sur un point de données dans certains types de visualisation.
  • Graphiques cartésiens
  • Graphiques à secteurs ou en anneau
  • Graphiques de progression
  • Graphiques de carte

Prérequis

Pour personnaliser l'info-bulle, vous devez disposer des éléments suivants :

• Autorisations pour créer des explorations et autorisations pour développer LookML.
• Connaissances en développement SQL et LookML.
• Connaissances de base sur l'utilisation de Liquid dans Looker et le codage HTML. Pour obtenir les informations de base nécessaires, consultez la section Utiliser des variables Liquid dans le paramètre html de la page de documentation html.
• Autorisations pour enregistrer du contenu (si vous souhaitez enregistrer la visualisation en tant que Look ou tableau de bord)

Points à prendre en compte pour la personnalisation des info-bulles

Il est important de tenir compte des points suivants lorsque vous personnalisez une info-bulle :

• Les valeurs du paramètre html deviennent l'axe des y d'une visualisation.
• La valeur que vous souhaitez afficher sur l'axe des y doit être celle du paramètre sql de la mesure.
• Lorsque vous utilisez une mesure mise en forme (une mesure de type: percent_of_total ou une mesure avec un paramètre value_format_name ou value_format), veillez à utiliser la syntaxe Liquid pour la valeur affichée {{ field_name._rendered_value }} (où field_name est le nom réel de la mesure ou de la dimension).

Exemple

Remarque : L'exemple de cette section s'appuie sur l'exemple de carte Marge brute totale regroupée par État présenté plus haut sur cette page.

Par défaut, l'info-bulle des points de données de la visualisation inclut les valeurs de la marge brute totale et de l'État. Toutefois, que faire si vous souhaitez fournir aux utilisateurs des informations supplémentaires qui ne sont pas indiquées sur la carte ni incluses dans la requête Explore ? Que faire si vous souhaitez inclure la valeur d'un champ appelé Pourcentage de la marge brute totale au lieu de l'État ? L'inclusion du pourcentage de la marge brute totale aidera les utilisateurs à comprendre comment la valeur de la marge brute totale d'un point de données individuel se compare à la marge brute totale de l'ensemble de données.

Pour personnaliser l'info-bulle, procédez comme suit :

measure: total_gross_margin {
  type: sum
  value_format_name: decimal_2
  sql: ${gross_margin} ;;
  html: {{ rendered_value }} | {{percent_of_gross_margin._rendered_value }} of total ;;
}

1. En mode Développement, accédez à la définition LookML du champ que vous souhaitez personnaliser.

   Vous pouvez accéder directement à la définition LookML d'un champ à partir d'une exploration.

2. Déterminez les champs et les valeurs que vous souhaitez inclure dans l'info-bulle en plus du champ d'origine. Par exemple, Pourcentage de la marge brute totale.

3. Ajoutez un paramètre html à la mesure d'origine référencée dans la requête Explore et affichée dans l'info-bulle. Dans ce cas, la mesure qui se trouve actuellement dans la requête Explore et qui est affichée dans l'info-bulle est la marge brute totale.

4. Dans le paramètre html, créez une expression avec des variables Liquid qui ajoute les champs supplémentaires à la valeur de la mesure existante.

   • Cet exemple utilise la variable Liquid _rendered_value pour afficher les valeurs mises en forme par Looker. Par exemple, total_gross_margin utilise la mise en forme Looker pour deux décimales, et percent_of_total_gross_margin utilise la mise en forme Looker pour un pourcentage avec deux décimales.
   • Vous pouvez utiliser une barre verticale (|) pour séparer les valeurs de différents champs.
   • Vous pouvez également ajouter d'autres mots qui pourraient clarifier la signification des autres valeurs affichées dans l'info-bulle. Dans ce cas, of total est ajouté pour clarifier la signification de la valeur en pourcentage.

5. Enregistrez, validez et transmettez votre code en production après avoir vérifié qu'il fonctionne comme prévu.

Remarque : L’entrée du paramètre html n’a d’incidence que sur la façon dont la valeur est affichée aux utilisateurs. Elle ne modifie pas la valeur sous-jacente dans la base de données.

L'info-bulle affiche désormais deux valeurs lorsqu'un utilisateur pointe sur un point de données avec l'info-bulle : la valeur total_gross_margin du point de données et la valeur percent_of_total_gross_margin correspondante.

Étapes suivantes

Une fois que vous avez créé votre visualisation avec une info-bulle personnalisée, vous pouvez la partager avec d'autres utilisateurs :

• Enregistrez votre exploration en tant que Look.
• Ajoutez l'exploration à un tableau de bord.
• Partagez l'exploration avec une URL.