Exploitez tout le potentiel des visualisations Looker: personnalisation de la mise en forme conditionnelle

Remarque:Cette page fait partie du livre de recettes Looker: exploiter au mieux les visualisations Looker.

Conseil:À partir de Looker 24.0, vous pouvez utiliser l'éditeur de configuration de graphique pour mettre en forme des valeurs à l'aide de règles plus robustes et dans des visualisations autres que les calculs de table.

La mise en évidence visuelle des valeurs qui répondent (ou ne répondent pas) à certaines conditions permet aux utilisateurs d'identifier rapidement les tendances des données. Ce modèle est souvent appelé mise en forme conditionnelle dans Excel ou d'autres applications de tableur.

Par exemple, cette visualisation sous forme de tableau, tirée de la section Utiliser la mise en forme conditionnelle directement dans les paramètres de visualisation de cette page, aide les utilisateurs à identifier les endroits où la croissance du nombre d'utilisateurs peut être positive ou négative:

Looker prend en charge la mise en forme conditionnelle dans les visualisations de différentes manières:

• Avec des calculs de table et des emoji Cette approche est idéale lorsque les conditions qui déterminent la mise en forme doivent être créées directement dans une exploration Looker. Reportez-vous à la page des bonnes pratiques Mise en forme conditionnelle utilisant des calculs de table pour découvrir comment appliquer une mise en forme personnalisée aux visualisations avec des calculs de table.
• Avec des options intégrées dans les paramètres de visualisation du texte et des tableaux
• Avec le paramètre LookML html. C'est la solution idéale pour mettre en forme les valeurs lorsque les conditions qui entravent le formatage sont cohérentes dans l'analyse pour un champ donné.

Ce livre de recettes fournit des tutoriels pour les deux dernières options:

• Utiliser la mise en forme conditionnelle directement dans les paramètres de visualisation
• Utiliser la mise en forme conditionnelle avec le paramètre LookML html

Conseil :Veillez à tenir compte du contraste des couleurs pour l'accessibilité de votre contenu.

Mise en forme conditionnelle avec paramètres de visualisation

Les paramètres de visualisation vous permettent d'appliquer une mise en forme conditionnelle dans les tableaux, les visualisations à valeur unique et les visualisations à enregistrement unique.

Cette section explique comment utiliser la mise en forme conditionnelle dans les tableaux à l'aide des paramètres de visualisation disponibles dans le menu Modifier de la visualisation.

Reportez-vous à la recette Présenter de nombreuses informations avec une visualisation à valeur unique du Livre de recettes Looker : exploiter au mieux les visualisations pour obtenir un guide par étapes sur la mise en forme conditionnelle dans les visualisations à valeur unique.

Composants

• Requête d'exploration
• Visualisation des tables

Prérequis

La création d'une visualisation de table avec mise en forme conditionnelle nécessite les éléments suivants:

• Autorisations de création d'explorations et bonne connaissance de l'exploration des données
• Autorisations permettant de créer des calculs de table ou des champs personnalisés, si nécessaire pour votre cas d'utilisation
• une bonne connaissance des paramètres de visualisation des tables ;
• Autorisations d'enregistrer du contenu (si vous souhaitez enregistrer la visualisation sous forme de présentation ou de tableau de bord)

Exemple

Une équipe marketing souhaite voir le nombre de nouveaux utilisateurs chaque mois, segmenté par tranche d'âge, afin de mieux comprendre la réponse aux appels marketing lancés chaque mois.

La visualisation de table par défaut peut être difficile à analyser pour certains utilisateurs. Vous pouvez utiliser la mise en forme conditionnelle dans les paramètres de visualisation pour comparer les valeurs avec des objectifs ou définir des règles, ce qui aidera les utilisateurs à comprendre plus clairement les données.

Pour cet exemple, l'équipe marketing souhaite comparer les valeurs du tableau aux conditions suivantes:

• Croissance positive (vert) : mois et tranches d'âge avec au moins 50 nouveaux utilisateurs
• Croissance moyenne (jaune) : mois et tranches d'âge avec entre 25 et 50 nouveaux utilisateurs
• Faible croissance (rouge) : mois et tranches d'âge comportant 25 nouveaux utilisateurs ou moins

Pour appliquer une mise en forme conditionnelle à une visualisation de table avec les paramètres du menu Modifier de la visualisation, procédez comme suit:

1. Ouvrez le menu Modifier dans la barre Visualisation.
2. Dans l'onglet Trace, sélectionnez les options de style de tableau de votre choix. Vous pouvez par exemple choisir le thème du tableau à l'aide du menu déroulant Thème du tableau ou choisir d'afficher ou non les numéros de ligne en activant ou en désactivant l'option Afficher les numéros de ligne.
3. Dans l'onglet Trace, sélectionnez l'option Cell Visualization (Visualisation de cellules) pour la désactiver. L'option Visualisation des cellules doit être désactivée pour appliquer une mise en forme conditionnelle aux valeurs de la table.
4. Dans l'onglet Mise en forme, cochez le bouton Activer la mise en forme conditionnelle pour activer la mise en forme conditionnelle et accéder aux paramètres de mise en forme conditionnelle.
   • Vous pouvez également choisir une palette de couleurs dans le menu déroulant Collection de la section Couleurs de l'onglet Mise en forme. Vous pouvez également personnaliser la taille des lignes en pixels dans le champ Ligne, et l'alignement du texte de l'en-tête de colonne, la taille de la police et la couleur dans le champ En-tête de la section Personnalisations au-dessus des paramètres de mise en forme conditionnelle.
   • Dans cet exemple, l'option Inclure les valeurs nulles comme zéro est sélectionnée pour inclure toutes les valeurs nulles telles que zéro.
5. Créez vos règles de mise en forme conditionnelle. Vous pouvez sélectionner le bouton Ajouter une règle pour ajouter autant de règles de mise en forme conditionnelle que vous le souhaitez.
   • Dans la liste déroulante Appliquer à, sélectionnez les valeurs que vous souhaitez appliquer à la règle.

6. Dans la liste déroulante Format, sélectionnez le format que vous souhaitez appliquer à la règle. * Vous pouvez choisir de conserver le format par défaut sur l'échelle. Les valeurs seront mises en surbrillance sur un dégradé en fonction de la palette de couleurs et des paramètres de valeur de votre choix. Pour en savoir plus sur le code couleur sur une échelle, consultez la section Mise en forme conditionnelle de la page de documentation sur les options des graphiques de tableaux.

   • Définissez les valeurs de couleur de l'arrière-plan, couleur de police et style de police de chaque règle. Assurez-vous de tenir compte du contraste des couleurs pour l'accessibilité de votre contenu.

   • Pour cet exemple, trois règles sont créées:

     • Option Format Si la valeur est supérieure à 49, avec une option Couleur de l'arrière-plan verte sélectionnée.
     • Option Mettre en forme Si la valeur est comprise entre 24 et 50, avec une option Couleur de l'arrière-plan jaune sélectionnée
     • Option Format Si la valeur est inférieure à 25, avec une option Couleur de l'arrière-plan rouge sélectionnée.
     Conseil :La plage n'inclut pas les valeurs spécifiées.

La visualisation qui en résulte affiche le nombre d'utilisateurs dans chaque colonne de tranche d'âge en fonction des critères spécifiés par l'équipe marketing:

• Croissance positive (vert) : mois et tranches d'âge avec au moins 50 nouveaux utilisateurs
• Croissance moyenne (jaune) : mois et tranches d'âge avec entre 25 et 50 nouveaux utilisateurs
• Faible croissance (rouge) : mois et tranches d'âge comportant 25 nouveaux utilisateurs ou moins

Mise en forme conditionnelle en LookML avec le paramètre html

En plus d'utiliser les paramètres de visualisation du menu Modifier, vous pouvez coder en dur la mise en forme conditionnelle directement dans le code LookML d'un champ. Cette approche est utile pour une mise en forme conditionnelle cohérente dans l'analyse d'un champ donné, car elle évite d'avoir à reconfigurer les paramètres de visualisation des rapports individuels.

Attention :La mise en forme HTML ne s'affiche que dans les visualisations de tableau, de tableaux (anciens) 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 interface, mais il sera accessible dans les Looks et les explorations.

Composants

• Variables Liquid : les variables Liquid affichent les valeurs des champs en combinaison avec la mise en forme HTML spécifiée.
• Paramètre html : le style HTML codé dans le paramètre html d'un champ s'affiche dans la table de données de l'exploration ainsi que dans la visualisation.
• Visualisation des tableaux : les utilisateurs verront la mise en forme conditionnelle dans la visualisation.

Prérequis

Le codage de la mise en forme conditionnelle en dur dans le paramètre html nécessite les éléments suivants:

• Ce rôle permet de créer des explorations.
• Autorisations pour développer LookML et bonne connaissance du développement SQL et LookML.
• Connaissances de base de l'utilisation de Liquid dans Looker et du codage HTML. Pour obtenir des informations générales, consultez la section Utilisation des variables Liquid dans le paramètre html de la page de documentation de html.
• Autorisations d'enregistrer du contenu (si vous souhaitez enregistrer la visualisation sous forme de présentation ou de tableau de bord)

Exemple

Imaginons que vous disposiez d'un champ dans vos données appelé status, qui indique l'état de chaque commande. Voici les valeurs possibles pour status:

• "annulé"
• "terminée"
• "pending"

Pour mettre en évidence l'état de la commande auprès des utilisateurs qui consultent des rapports incluant le champ État, vous pouvez ajouter une couleur d'arrière-plan unique afin de mettre en évidence chaque état.

Pour coder une mise en forme conditionnelle dans un champ LookML:

dimension: status {
  type: string
  sql: ${TABLE}.status ;;
  html:
    {% if value == 'complete' %}
      <p style="color: black; background-color: lightgreen;">{{ value }}</p>
    {% elsif value == 'pending' %}
      <p style="color: black; background-color: orange;">{{ value }}</p>
    {% else %}
      <p style="color: white; background-color: red;">{{ value }}</p>
    {% endif %}
  ;;
  description: "The current status of an existing order."
}

1. En mode Développement, accédez au champ LookML auquel vous souhaitez ajouter une mise en forme conditionnelle.
   • Vous pouvez accéder directement à la définition LookML d'un champ à partir d'une exploration.
2. Ajoutez un paramètre html au champ. Dans ce cas, le champ est status.
3. Dans le paramètre html, créez une expression avec la syntaxe de balise Liquid qui définit des conditions pour des valeurs spécifiques du champ.
   • Cet exemple utilise la variable Liquid value pour générer la valeur du champ. Veillez à utiliser _rendered_value pour afficher les valeurs des champs qui utilisent la mise en forme des valeurs Looker.
   • Assurez-vous de tenir compte du contraste des couleurs pour l'accessibilité de votre contenu.
   • Vous pouvez ajouter n'importe quel autre style HTML compatible avec Looker. Pour obtenir des exemples supplémentaires, consultez la page de documentation sur le paramètre html.
4. Enregistrez, validez et transférez votre code en production après avoir vérifié qu'il fonctionne comme prévu.

Les résultats affichent les valeurs Status (État) en rouge, vert ou orange (selon l'état) dans tout rapport Looker incluant ce champ.

Les couleurs d'arrière-plan s'affichent également pour d'autres graphiques. Par exemple, un graphique à colonnes pour une requête qui regroupe le nombre de commandes par état des commandes affiche les couleurs d'arrière-plan codées pour chaque valeur de l'état des commandes.

Style supplémentaire

Vous pouvez utiliser la même syntaxe que dans l'exemple précédent pour ajouter des icônes ou des images en fonction des valeurs de champ. Dans l'exemple suivant, une coche rouge "X" s'affiche pour l'état de la commande "Annulée", une coche verte pour l'état de la commande "terminée" et une icône en forme d'horloge pour l'état de la commande "en attente":

    dimension: status {
      type: string
      sql: ${TABLE}.status ;;
      html:
        {% if value == 'complete' %}
          <p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" height=20 width=20>{{ rvalue }}</p>
        {% elsif value == 'pending' %}
          <p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" height=20 width=20>{{ value }}</p>
        {% else %}
           <p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" height=20 width=20>{{ value }}</p>
        {% endif %}
      ;;
      description: "The current status of an existing order."
    }

Il en résulte des valeurs Status (État) accompagnées d'une icône en forme de X rouge, d'une coche verte ou d'une icône en forme d'horloge à côté de la valeur (en fonction de l'état) dans tout rapport Looker incluant ce champ.

Étapes suivantes

Une fois que vous avez créé votre visualisation de table avec une mise en forme conditionnelle, vous pouvez la partager avec d'autres personnes:

• Enregistrer une exploration en tant que Look
• Ajouter l'exploration à un tableau de bord
• Partager l'exploration avec une URL