Personnaliser des visuels de tableau de bord en temps réel

Les tableaux de bord en temps réel sont une collection de vignettes qui présentent une représentation visuelle prise en charge par une requête KQL (Langage de requête Kusto) sous-jacente. Cet article explique comment modifier les visualisations et les requêtes d'une tuile du tableau de bord en temps réel. Il fournit également une vue d’ensemble des propriétés de personnalisation spécifiques à chaque type de visualisation.

Tableaux de bord en temps réel prennent en charge toutes les visualisations que vous pouvez créer dans le contexte de l’opérateur de rendu, ainsi que les visuels spécifiques aux tableaux de bord.

Tip

Vous pouvez intégrer des visuels de tableau de bord en temps réel dans votre propre application web en utilisant Fabric Embedded.

Prérequis

Personnaliser une vignette de tableau de bord

Pour apporter des modifications à votre tableau de bord :

  1. Dans le menu supérieur, sélectionnez Affichage et basculez sur le mode Édition.

  2. Sur la vignette que vous souhaitez personnaliser, sélectionnez l’icône Modifier . Modifiez la requête sous-jacente ou les propriétés de visualisation.

  3. Sélectionnez Appliquer les modifications pour enregistrer vos modifications et revenir au tableau de bord.

Propriétés de personnalisation

Le tableau suivant décrit les propriétés de personnalisation disponibles, classées par ordre alphabétique par section et spécifie les visuels qui prennent en charge chaque propriété.

Section Propriété Description Types d’éléments visuels
Couleurs Palette de couleurs Détermine l’ensemble de couleurs à utiliser pour le carte thermique. Carte thermique
Mise en forme conditionnelle Afficher ou Masquer Option bascule pour désactiver ou activer la mise en forme conditionnelle. Pour plus d’informations, consultez Appliquer la mise en forme conditionnelle. Graphique d’anomalie, graphique de zone, graphique à barres, graphique à colonnes, KPI, multi-statistiques, graphique de dispersion, tableau, graphique temporel
Données Colonnes Y Colonnes qui fournissent des données pour l’axe vertical. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, graphique en nuage de points, graphique temporel
Colonne X Colonne qui fournit des données pour l’axe horizontal. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, graphique en nuage de points, graphique temporel
Colonnes de séries Colonnes utilisées pour catégoriser les données en différentes séries. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, graphique en nuage de points, graphique temporel
Colonne Catégorie Colonne qui détermine les catégories de données. Graphique en entonnoir, Carte thermique, Graphique à secteurs
Colonne Étiquette Affecte des étiquettes à chaque emplacement à l’aide de la colonne désignée. Statistiques multiples
Colonne de valeur Colonne qui fournit des données pour la visualisation. Graphique en entonnoir, KPI, statistiques multiples
Valeur Colonne numérique qui sert de variable primaire pour la carte thermique. Carte thermique
Colonne numérique Colonne qui fournit la valeur numérique de la catégorie de données. Graphique à secteurs
Définir l’emplacement par Détermine la méthode utilisée pour définir l’emplacement : Déduire, Latitude et longitude ou Point géographique. Carte
Couleurs des séries de données Palette de couleurs Personnalise les couleurs présentées dans la visualisation. Graphique d’anomalies, Graphique en zone, Graphique à barres, Graphique en colonnes, Graphique linéaire, Graphique en secteurs, Graphique en nuage de points, Graphique temporel, Graphique de série temporelle
Options d’affichage Trier par Comment classer les résultats dans le graphique : Nom, Taille ou Aucun. Graphique à secteurs
N supérieur Option permettant d’afficher uniquement les sections des n premières valeurs du graphique. Graphique à secteurs
Général Orientation de l’affichage Détermine l’orientation de l’affichage : Horizontal ou Vertical. Statistiques multiples
Taille du texte Détermine la taille du texte : Recommandé, Petit ou Grand. Statistiques multiples, Stat
Format visuel Détermine le format du graphique. Pour les graphiques en aires, les graphiques à barres et les diagrammes en colonnes, le format peut être standard, empilé ou empilé 100 %. Pour les graphiques à secteurs, le format peut être camembert ou anneau. Graphique en aires, graphique à barres, histogramme, graphique en secteurs
Disposition Configurations d’emplacement Personnalise le layout de grille avec des options allant de 1 colonne par 1 ligne (1 emplacement) à 5 colonnes par 5 lignes (25 emplacements). Statistiques multiples
Légende Afficher ou Masquer Masque ou affiche une légende permettant d'expliquer les séries de données dans le graphique. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Taille Afficher ou Masquer Active ou désactive le redimensionnement des points de carte. Carte
Colonne de taille Colonne utilisée pour déterminer la taille du point de carte. Carte
URLs Appliquer le lien sur la colonne Lorsque cette option est activée, la sélection d’une valeur dans cette colonne dirige vers l’URL spécifiée dans la colonne URL. Tableau
Colonne URL Colonne qui contient des valeurs d’URL. Tableau
Axe X Étiquette Définit une étiquette personnalisée pour l’axe horizontal. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Valeur de ligne verticale Spécifie une valeur sur l’axe horizontal pour les lignes de référence verticale. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Échelle de l’axe X Ajuste l’échelle de l’axe horizontal en linéaire ou logarithmique. Graphique d’anomalies, graphique en aires, histogramme, multi-statistiques, diagramme de dispersion, tableau, graphique chronologique
Axe des Y Étiquette Définit une étiquette personnalisée pour l’axe vertical. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Valeur maximale Définit la valeur maximale sur l’axe vertical. Graphique des anomalies, graphique de surface, graphique à barres, graphique à colonnes, KPI. Multi stats, diagramme de dispersion, graphique temporel
Valeur minimale Définit la valeur minimale sur l’axe vertical. Graphique d’anomalie, graphique d’aires, graphique à barres, tableau de colonnes, KPI, multi-statistiques, diagramme de dispersion, graphique temporel
Lignes de référence Marque une valeur sur le graphique comme ligne de référence pour une orientation visuelle. Graphique d’anomalie, graphique d’aires, graphique à barres, tableau de colonnes, KPI, multi-statistiques, diagramme de dispersion, graphique temporel

Couleurs des séries de données

En utilisant des couleurs de série de données, vous contrôlez la façon dont les couleurs sont appliquées à vos visuels. Au lieu de s’appuyer sur des attributions automatiques de couleurs, attribuez des couleurs spécifiques à chaque série de données pour transmettre la signification et maintenir la cohérence entre vos tableaux de bord.

En utilisant des couleurs de série de données, vous pouvez :

  • Affectez des couleurs directement à chaque série de données.

  • Remplacez les valeurs par défaut du système par des choix intentionnels.

  • Maintenir la cohérence des couleurs entre les visuels et les tableaux de bord.

Cette fonctionnalité est prise en charge pour les types de visuel suivants : graphique d’anomalies, graphique en aires, graphique à barres, graphique en colonnes, graphique en courbes, graphique en secteurs, graphique en nuage de points, graphique temporel et visuel de série temporelle.

Pour configurer les couleurs des séries de données :

  1. Dans le menu supérieur, sélectionnez Affichage et basculez sur le mode Édition.

  2. Sélectionnez l’icône Modifier sur le visuel que vous souhaitez personnaliser.

  3. Dans l’onglet Visuel du volet mise en forme, développez la section Couleurs de la série .

  4. Sélectionnez une couleur pour chaque série de données dans votre visuel.

  5. Sélectionnez Appliquer les modifications pour enregistrer vos paramètres.

Capture d’écran de la section Couleurs de la série sous l’onglet Visuel.

Lorsque vous attribuez des couleurs intentionnellement, les visionneuses peuvent interpréter des visuels en un clin d’œil sans avoir à lire des légendes ou des étiquettes. Envisagez d’utiliser des couleurs qui s’alignent sur les normes de votre organisation ou qui transmettent naturellement la signification de chaque série, comme le rouge pour les états critiques ou le vert pour les métriques saines.

Visualisation des KPI

Une tuile KPI affiche une seule valeur numérique basée sur une requête comme indicateur visuel. Cela vous aide à évaluer rapidement l’état de santé ou l’état d’un indicateur. Utilisez des tuiles KPI pour surveiller des situations où vous devez répondre à des questions telles que : « Cette valeur est-elle saine ou problématique ? » « Est-ce au-dessus ou en dessous d’un objectif de base ? »

Modes d’affichage

Les tuiles KPI prennent en charge quatre modes d’affichage :

Mode Description Idéal pour
Jauge Un arc de 180° avec une aiguille pointant vers la valeur actuelle Tableaux de bord de surveillance classiques
Bar Une barre horizontale remplie pour refléter la valeur actuelle Dispositions horizontales compactes
Donut Un anneau de progression complet à 360° Disposition carrée des carreaux
Nombre Un grand nombre formaté avec une couleur seuil Tableaux de bord denses

Ajoutez une tuile KPI

  1. Dans votre tableau de bord, passez en mode édition .

  2. Dans la barre de menu du haut, sélectionnez Ajouter un visuel puis sélectionnez KPI.

    Capture d’écran du menu visuel Ajouter avec KPI sélectionné.

  3. Configurez les paramètres des KPI :

    • Type visuel : Choisissez entre Barre, Donut, Jauge et Numéro.
    • Données : Sélectionnez le champ numérique de votre requête pour l’afficher.
    • Format de valeur : Choisissez Auto, décimales, séparateur de mille ou notation compacte (par exemple, 1,2K).
    • Mise en forme conditionnelle : Fixez des seuils pour définir les plages saines, d’avertissement et critiques pour vos KPI. Vous pouvez aussi choisir si des valeurs plus élevées ou plus basses sont considérées comme pires.
    • Ligne de référence : Optionnellement, ajoutez une ligne de référence de référence pour indiquer une valeur cible ou attendue.

    Capture d’écran du volet des paramètres KPI avec options pour le type visuel, les données, le format de valeur, la mise en forme conditionnelle et la ligne de référence.

  4. Sélectionnez Terminé pour ajouter la tuile au tableau de bord.

  5. Sélectionnez le bouton Enregistrer pour sauvegarder le tableau de bord.

Tip

Utilisez Copilot pour créer et configurer des tuiles KPI à partir du langage naturel. Par exemple, essayez des invites comme « Afficher l’utilisation du CPU comme un indicateur avec des seuils à 70 et 90 » ou « Créez un KPI pour le taux d’erreur avec une base de 5%».

États de seuil des KPI

Les tuiles KPI affichent l’un des trois états seuils basés sur la valeur actuelle et votre configuration de seuil :

State Couleur par défaut Description
Bien 🟢 Vert La valeur se situe dans la plage normale.
Avertissement 🟡 Jaune La valeur approche d’un niveau critique.
Essentiel 🔴 Rouge La valeur se situe dans la plage problématique.

Vous pouvez configurer la direction du seuil. Définissez Plus élevé = pire pour des métriques telles que le taux d’erreur ou la latence, ou Plus faible = pire pour des métriques telles que le débit ou la disponibilité. Pour garantir l’accessibilité, les états seuils utilisent également des remplissages de motifs (rayures ou points) en plus de la couleur, afin qu’ils soient reconnaissables pour les utilisateurs daltoniens.

Détection des changements de KPI

Les tuiles KPI utilisent des mises à jour pilotées par les événements plutôt qu’une interrogation périodique. Lorsque la source de données reçoit de nouvelles données, la valeur du KPI se met à jour automatiquement avec une animation de transition fluide de 300 ms. Si de nouvelles données ne sont pas reçues dans les 60 secondes (configurables dans les paramètres de la tuile), une superposition de données obsolète s’affiche avec l’horodatage de la dernière mise à jour.

Dimensionnement adaptatif

Les tuiles KPI adaptent leur disposition en fonction de la taille des tuiles :

Taille de la vignette Éléments rendus
Petit (2×2 à 3×3) Valeur et couleur du seuil uniquement.
Moyenne (4×4 à 6×6) Valor, étiquette, unité, couleur seuil et marqueur de base.
Grand format (7×7 et plus) Rendu complet avec bandes de seuil, coches et étiquettes d’échelle.