Partager via


Renderer de barre composite

Les Classeurs Azure permettent de rendre des données à l’aide de la barre composite. Cette barre est constituée de plusieurs barres.

L’image suivante montre la barre composite pour l’état de la base de données. Elle montre le nombre de serveurs en ligne, hors connexion et en état de récupération.

Capture d’écran montrant la barre composite pour l’état de la base de données.

Le renderer de barre composite est pris en charge pour les visualisations de grille, de vignette et de graphique.

Ajouter le renderer de barre composite

  1. Commutez le classeur en mode édition en sélectionnant Modifier.

  2. Sélectionnez Ajouter>Ajouter un requête.

  3. Définissez la Source de données sur JSON, et la Visualisation sur Grid.

  4. Ajoutez les données JSON suivantes :

    [
        {"sub":"X", "server": "A", "online": 20, "recovering": 3, "offline": 4, "total": 27},
        {"sub":"X", "server": "B", "online": 15, "recovering": 8, "offline": 5, "total": 28},
        {"sub":"Y", "server": "C", "online": 25, "recovering": 4, "offline": 5, "total": 34},
        {"sub":"Y", "server": "D", "online": 18, "recovering": 6, "offline": 9, "total": 33}
    ]
    
  5. Exécute la requête.

  6. Sélectionnez Paramètres de colonne pour ouvrir le volet des paramètres.

  7. Sous Colonnes, sélectionnez total. Pour le Renderer de colonne, sélectionnez Composite Bar.

  8. Sous Paramètres de barre composite, définissez les paramètres suivants :

    Nom de la colonne Couleur
    online Vert
    récupération Jaune
    hors connexion Rouge (vif)
  9. Pour Étiquette, entrez ["online"] of ["total"] are healthy.

  10. Dans les paramètres de colonne pour les états en ligne, hors connexion et récupération, vous pouvez définir le Renderer de colonne sur Hidden (facultatif).

  11. Sélectionnez l’onglet Étiquettes et mettez à jour l’étiquette pour la colonne du total en la définissant sur Database Status (facultatif).

  12. Sélectionnez Appliquer.

Les paramètres de la barre composite ressemblent à la capture d’écran suivante :

Capture d’écran montrant les paramètres de colonne de barre composite avec les paramètres précédents.

La barre composite avec les paramètres précédents :

Capture d’écran montrant la barre composite.

Paramètres de la barre composite

Sélectionnez le nom de la colonne et la couleur correspondante pour rendre cette colonne dans cette couleur dans le cadre d’une barre composite. Vous pouvez insérer et supprimer des lignes et les déplacer vers le haut ou vers le bas.

Etiquette

L’étiquette de la barre composite s’affiche en haut de la barre composite. Vous pouvez utiliser un mélange de texte statique, de colonnes et de paramètres. Si le champ Étiquette est vide, la valeur des colonnes actuelles est affichée en tant qu’étiquette. Dans l’exemple précédent, si nous laissions le champ Étiquette vide, la valeur du total des colonnes s’afficherait.

Faites référence aux colonnes avec ["columnName"].

Faites référence aux paramètres avec {paramName}.

Le nom de la colonne et le nom du paramètre respectent tous deux la casse. Vous pouvez également créer un lien à partir des étiquettes en sélectionnant Définir cet élément comme lien, puis en ajoutant des paramètres de lien.

Agrégation

Les agrégations sont utiles pour les visualisations Arborescence/Regrouper par. Les données d’une colonne pour la ligne de groupe sont déterminées par l’agrégation définie pour cette colonne. Il existe trois types d’agrégations applicables pour les barres composites : None, Sum et Inherit.

Pour ajouter des paramètres Regrouper par :

  1. Dans les paramètres de colonne, accédez à la colonne à laquelle vous souhaitez ajouter des paramètres.
  2. Dans Paramètres d’arborescence/Regrouper par, sous Type d’arborescence, sélectionnez Regrouper par.
  3. Sélectionnez le champ par lequel regrouper.Capture d’écran montrant les paramètres Regrouper par.

None

Le paramètre None pour l’agrégation signifie qu’aucun résultat n’est affiché pour cette colonne pour les lignes de groupe.

Capture d’écran montrant la barre composite avec le paramètre None pour l’agrégation.

Sum

Si l’agrégation est définie sur Sum, la colonne dans la ligne de groupe affiche la barre composite en utilisant la somme des colonnes utilisées pour l’afficher. L’étiquette utilisera également la somme des colonnes auxquelles elle fait référence.

Dans l’exemple suivant, l’agrégation maximale est définie pour les états en ligne, hors connexion et récupération, et l’agrégation pour la colonne du total est Sum.

Capture d’écran montrant la barre composite avec l’agrégation Sum.

Hériter

Si l’agrégation est définie sur Inherit, la colonne dans la ligne de groupe affiche la barre composite en utilisant l’agrégation définie par les utilisateurs pour les colonnes utilisées pour l’afficher. Les colonnes utilisées dans Étiquette utilisent également l’agrégation définie par l’utilisateur. Si le renderer de colonne actuel est une barre composite et si l’étiquette y fait référence (comme total dans l’exemple précédent), l’agrégation Sum est utilisée pour cette colonne.

Dans l’exemple suivant, l’agrégation maximale est définie pour les états en ligne, hors connexion et récupération, et l’agrégation pour la colonne du total est Inherit.

Capture d’écran montrant la barre composite avec l’agrégation Inherit.

Tri

Pour les visualisations de grilles, le tri des lignes de la colonne avec le renderer de barre composite repose sur la somme des colonnes utilisées pour afficher l’ordinateur de barre composite de manière dynamique. Dans les exemples précédents, la valeur utilisée pour le tri est la somme des colonnes des états en ligne, hors connexion et récupération pour cette ligne particulière.

Visualisations de vignettes

Pour créer un renderer de barre composite pour une visualisation de vignette :

  1. Sélectionnez Ajouter>Ajouter un requête.
  2. Modifiez la source de données en JSON. Entrez les données de l’exemple précédent.
  3. Remplacez Visualisation par Tiles.
  4. Exécute la requête.
  5. Sélectionnez Paramètres de la vignette.
  6. Sous Champs de la vignette, sélectionnez Gauche.
  7. Sous Paramètres du champ, définissez les paramètres suivants :
    1. Utiliser la colonne : server
    2. Renderer de colonne : Text
  8. Sous Champs de la vignette, sélectionnez Bas.
  9. Sous Paramètres du champ, définissez les paramètres suivants :
    1. Utiliser la colonne : total

    2. Renderer de colonne : Composite Bar

    3. Sous Paramètres de barre composite, définissez les paramètres suivants :

      Nom de la colonne Couleur
      online Vert
      récupération Jaune
      hors connexion Rouge (vif)
    4. Pour Étiquette, entrez ["online"] of ["total"] are healthy.

  10. Sélectionnez Appliquer.

Paramètres de barre composite pour les vignettes :

Capture d’écran montrant les paramètres de vignette de barre composite avec les paramètres précédents.

L’affichage de la barre composite pour les vignettes avec les paramètres précédents ressemblera à cet exemple :

Capture d’écran montrant les vignettes de la barre composite.

Visualisations de graphiques

Pour créer un renderer de barre composite pour la visualisation de graphique (de type clusters Hive) :

  1. Sélectionnez Ajouter>Ajouter un requête.
  2. Modifiez la Source de données en JSON. Entrez les données de l’exemple précédent.
  3. Remplacez Visualisation par Graphs.
  4. Exécute la requête.
  5. Sélectionnez Paramètres du graphe.
  6. Sous Paramètres du format de nœud, sélectionnez Contenu au centre.
  7. Sous Paramètres du champ, définissez les paramètres suivants :
    1. Utiliser la colonne : total

    2. Renderer de colonne : Composite Bar

    3. Sous Paramètres de barre composite, définissez les paramètres suivants :

      Nom de la colonne Couleur
      online Vert
      récupération Jaune
      hors connexion Rouge (vif)
    4. Pour Étiquette, entrez ["online"] of ["total"] are healthy.

  8. Sous Paramètres de disposition, définissez les paramètres suivants :
    1. Type de graphique : Hive Clusters
    2. ID nœud : server
    3. Champ Regrouper par : None
    4. Taille du nœud : 100
    5. Marge entre les hexagones : 5
    6. Type de coloration : None
  9. Sélectionnez Appliquer.

Paramètres de barre composite pour les graphiques :

Capture d’écran montrant les paramètres de graphique de barre composite avec les paramètres précédents.

L’affichage de barre composite pour un graphique avec les paramètres précédents ressemblera à l’exemple suivant :

Capture d’écran montrant des graphiques de barre composite avec des clusters Hive.

Étapes suivantes

Commencer à utiliser les Classeurs Azure