Tableaux de bord
Cette page documente l'architecture des tableaux de bord, les types de panneaux et la barre de filtres partagée. Le groupe Construire ne porte pas encore de sous-section dédiée aux tableaux de bord — cette page est le point d'entrée canonique pour le sujet.
Un tableau de bord est une page unique qui regroupe KPI, graphiques et tables autour d'un contexte commun — typiquement la période courante + un périmètre choisi (une société, une région, une équipe). Défini depuis Paramètres → Tableaux de bord avec une grille de mise en page en glisser-déposer ; chaque panneau choisit une source de données (une requête de connecteur ou un graphique enregistré), un type de panneau (indicateur / graphique / table) et s'affiche en conséquence.
Le tableau de bord est la surface naturelle pour les vues de direction ("comment se porte-t-on aujourd'hui ?") et pour les vues opérationnelles ("quels jobs s'exécutent, quels écrans ont le plus de refus"). Chaque panneau peut descendre vers un écran pré-filtré sur les lignes sous-jacentes.
Vue d'ensemble
La maquette montre la vue à l'exécution ; l'éditeur derrière est décrit ci-dessous.
Paramètres → Tableaux de bord
Le catalogue liste chaque tableau de bord de l'installation.
Cliquer sur + Nouveau tableau de bord ou sur n'importe quelle ligne pour ouvrir l'éditeur de tableau de bord.
L'éditeur de tableau de bord
Un éditeur à deux panneaux : grille de mise en page à gauche (glisser-déposer), éditeur de panneau à droite (configure le panneau sélectionné).
Champs généraux (haut de l'éditeur)
| Champ | Effet |
|---|---|
| Id | Identifiant — apparaît dans l'URL (/dashboards/<id>), le sélecteur de menu et le code de permission (dashboard:<id>). |
| Titre | Titre d'affichage localisé. |
| Application | Espace de noms d'application. Détermine l'espace de travail où le tableau de bord apparaît. |
| Description | Texte libre. Apparaît dans le sélecteur de menu. |
| Barre de filtres partagée | Liste optionnelle de paramètres présentés en haut du tableau de bord à l'exécution. Chaque panneau qui référence le même paramètre hérite de la valeur. |
| Page par défaut | Optionnel — la page d'accueil du tableau de bord dans la même application. Pose une icône "accueil" sur l'entrée de menu. |
Grille de mise en page
Une grille responsive à 12 colonnes. Chaque cellule est un panneau qui peut occuper de 1 à 12 colonnes de large et de 1 à 6 lignes de haut. L'opérateur glisse depuis une palette de types de panneau vers la grille :
| Contrôle | Effet |
|---|---|
| Glisser depuis la palette | Ajoute un nouveau panneau à la fin de la grille. |
| Poignées de redimensionnement | Glisser le bord d'un panneau pour redimensionner. S'aligne sur les colonnes. |
| Libellé de section | Optionnel. Ajoute un en-tête de section avant une rangée de panneaux — par exemple Vue commerciale, Santé opérationnelle. |
| Clic sur un panneau | Ouvre l'éditeur de panneau à droite. |
| ✕ sur un panneau | Le retire de la mise en page. |
| Aperçu | Rend le tableau de bord complet avec des données live — utile avant d'enregistrer. |
Types de panneau
Indicateur (KPI)
Un nombre unique avec un delta optionnel par rapport à une période précédente.
| Champ | Effet |
|---|---|
| Titre | Affiché au-dessus du nombre. |
| Connecteur / Requête | La source. La requête doit retourner au moins une ligne avec une colonne numérique. |
| Colonne valeur | Colonne dont la valeur de la première ligne est rendue comme nombre principal. |
| Format | Format numérique ("1 234", "1,2 K", "€ 12 345,00"). |
| Colonne delta | Optionnel. Un nombre signé rendu sous la valeur sous forme de chip coloré ▲ / ▼. |
| Sens du delta | Plus élevé est mieux / Plus bas est mieux — pilote la couleur. |
| Sparkline de tendance | Optionnel. Pointe sur une requête qui retourne une petite série temporelle ; rendu sous forme de sparkline à 10 points. |
Graphique
Emballe une définition de graphique.
| Champ | Effet |
|---|---|
| Graphique | Liste déroulante des graphiques définis sous Paramètres → Graphiques. |
| Surcharger les paramètres | Surcharges optionnelles par panneau des valeurs fixes du graphique. |
| Écran de drill-down | Optionnel. Cliquer sur un point de données ouvre l'écran désigné pré-filtré. |
Table
Une petite grille en lecture seule (typiquement 5 à 20 lignes). Utile pour les listes "top N" / "récents".
| Champ | Effet |
|---|---|
| Connecteur / Requête | La source. |
| Colonnes | Liste réordonnable de colonnes à afficher, avec largeurs et formats par colonne. |
| Limite de lignes | Par défaut 20. |
| Action au clic | Ouvrir le dialogue (utilise le dialogue de l'écran lié) / Ouvrir l'écran filtré / Aucune. |
Markdown
Bloc de texte statique, utile pour des annotations ou des explications contextuelles entre panneaux.
| Champ | Effet |
|---|---|
| Contenu | Source Markdown. |
| Fond | Aucun / Discret (par défaut) / Accentué. |
Grille (prévu)
Grille de style écran avec la barre d'outils de filtres complète. Sur la feuille de route.
La barre de filtres partagée
Le haut d'un tableau de bord montre une rangée de saisies dérivées de la Barre de filtres partagée déclarée en haut de l'éditeur. Chaque entrée :
| Champ | Effet |
|---|---|
| Nom | Nom interne du paramètre — les panneaux le référencent via ${dashboard.<nom>} dans leurs surcharges de paramètres. |
| Libellé | Affiché au-dessus de la saisie. |
| Type | string / date / daterange / lookup / enum. Pilote le widget. |
| Valeur par défaut | Valeur initiale. Les jetons de date (${today}, ${month.first}) sont acceptés. |
| Lookup | Quand Type vaut lookup, pointe sur une recherche du dictionnaire. |
Les opérateurs règlent le filtre une fois en haut du tableau de bord ; chaque panneau qui hérite du paramètre se ré-exécute avec la nouvelle valeur. C'est ce qui rend les tableaux de bord cohérents — une saisie, plusieurs panneaux mis à jour.
Drill-down
Chaque panneau peut déclarer un écran de drill-down — cliquer sur le panneau (ou sur un point de données précis sur les graphiques / tables) ouvre l'écran désigné pré-filtré sur les lignes sous-jacentes. Le framework gère le passage de paramètres automatiquement : le panneau sait ce qu'il a interrogé, l'écran accepte les mêmes noms de paramètres.
Pour un contrôle plus fin, le champ de drill-down accepte un Patron d'URL avec des placeholders :nom que le framework remplit depuis le contexte du clic.
Permissions
Un tableau de bord est verrouillé par dashboard:<id>. Chaque panneau hérite de la permission de la requête de connecteur sous-jacente — un utilisateur sans sql:billing:monthly-invoice-counts ne voit pas le panneau de graphique qui la référence. Le framework élague le panneau silencieusement plutôt que d'afficher un placeholder d'erreur, afin que les tableaux de bord restent cohérents même quand l'appelant n'a pas toutes les permissions.
L'onglet d'éditeur de tableaux de bord est verrouillé par settings:dashboards.
Conseils et bonnes pratiques
- Commencer par les indicateurs. La première rangée d'un tableau de bord doit comporter 3 à 4 panneaux d'indicateur — l'œil de l'opérateur s'y pose en premier.
- Regrouper avec des en-têtes de section. Deux rangées visuelles séparées par un Libellé de section se lisent bien mieux que six panneaux en mur.
- Garder moins de 12 panneaux par tableau de bord. Au-delà, la page défile et la valeur "tout en un coup d'œil" s'évapore. Découper en plusieurs tableaux de bord.
- Utiliser la barre de filtres partagée pour le temps. La plupart des tableaux de bord tournent autour d'une période ; présenter la plage de dates ici une fois et chaque panneau en hérite.
- Câbler les drill-downs. Un indicateur isolé vaut la moitié d'un indicateur qui ouvre l'écran pertinent.
- Utiliser le bouton Aperçu. Détecte "ce panneau n'a pas de données sur une installation fraîche" avant l'enregistrement.
Sous le capot
Les définitions de tableau de bord sont enregistrées dans liberty-apps/config/dashboards.toml et les graphiques sous-jacents dans charts.toml. Les opérateurs ne modifient pas ces fichiers à la main en exploitation normale ; l'éditeur de tableaux de bord est l'interface de référence, avec l'onglet TOML brut comme échappatoire pour les rares modifications qu'un manque de l'éditeur bloque.
Pour aller plus loin
- Graphiques — les définitions de graphique qu'un panneau Graphique référence.
- Écrans — les écrans qu'un drill-down ouvre.
- Liaison des paramètres — comment la barre de filtres partagée alimente chaque panneau.
- Menus — câbler le tableau de bord dans la barre latérale.