Graphiques
Un graphique enveloppe la requête nommée d'un connecteur dans une visualisation. Défini dans Paramètres → Graphiques, choisi par type — line, bar, column, area, pie, donut, scatter — et réutilisé comme panneau dans n'importe quel nombre de tableaux de bord.
Cette page couvre le constructeur de graphiques, chaque champ de l'éditeur et les options spécifiques à chaque type de graphique.
Vue d'ensemble
Modifier un graphique
Dans Paramètres → Graphiques → ➕ Nouveau graphique, l'éditeur s'ouvre avec le sélecteur Type en haut. Le choix d'un type déplie le formulaire vers les champs dont ce type a besoin.
Champs communs
| Champ | Effet |
|---|---|
| Type | Le type de graphique — voir Types ci-dessous. Changer le type adapte le reste du formulaire. |
| Titre / Sous-titre | Affichés au-dessus du graphique. Le sous-titre est facultatif. |
| Connecteur / Requête | La source de données. Listes déroulantes des connecteurs et de leurs requêtes de lecture nommées. |
| Paramètres | Tableau de valeurs fixes pour les paramètres de la requête — même forme qu'ailleurs. Prend en charge les tokens ${week.monday} / ${month.last} documentés dans Liaison des paramètres. |
| Hauteur | Hauteur CSS du graphique rendu. Par défaut 320px. |
| Légende | Bascule + position (bottom / right / top). Par défaut active, en bas. |
| Info-bulle | Bascule. Par défaut active. |
| Grille | Bascule. Par défaut active. |
| Intervalle de rafraîchissement | Secondes entre chaque cycle d'auto-rafraîchissement. 0 (par défaut) = manuel uniquement. |
Axe X
| Champ | Effet |
|---|---|
| Champ | Liste déroulante des colonnes que la requête retourne. |
| Libellé | Affiché sous le graphique. |
| Format | Format de date / nombre appliqué aux libellés des graduations. Les dates utilisent la syntaxe date-fns (yyyy-MM, dd/MM) ; les nombres utilisent la notation Intl.NumberFormat. |
| Intervalle de graduation | preserveStartEnd (par défaut) / auto / un entier "garder une graduation sur N". |
Séries
Les séries forment une liste triable. Chaque ligne expose :
| Champ | Effet |
|---|---|
| Champ | Colonne retournée par la requête. |
| Libellé | Libellé de la légende / info-bulle. |
| Couleur | Couleur Hex / CSS. Le framework choisit une palette quand le champ est vide. |
| Format | Format de nombre appliqué à l'info-bulle et aux libellés des points. |
| Axe | left (par défaut) / right. Utiliser right pour les graphiques à deux échelles (par ex. nombre + montant). |
| Point (line / area uniquement) | Bascule. Masquer les points pour un sparkline plus épuré. |
Types
| Type | Forme | Requête typique |
|---|---|---|
| Line | Une ligne par série, axe X horizontal. | Séries temporelles — x = date, séries = numériques. |
| Area | Identique à line, zone remplie en dessous. Bascule Empilé disponible. | Cumul ou composition dans le temps. |
| Bar | Barres verticales par graduation X. Bascules Empilé / Horizontal disponibles. | Comptages par période, classements top-N. |
| Column | Alias de bar — existe pour la convention "column = vertical, bar = horizontal". | |
| Pie / Donut | Une part par ligne ; le champ X étiquette chaque part, les séries les dimensionnent. | Part d'un total sur un petit ensemble de catégories. |
| Scatter | Deux axes numériques ; un point par ligne. Un Champ de taille facultatif en fait un graphique à bulles. | Corrélation entre deux mesures. |
Chaque bascule / champ spécifique au type apparaît dans l'éditeur uniquement quand ce type est sélectionné.
Options spécifiques au type
| Type | Champs supplémentaires |
|---|---|
| Line / Area | Lissé (interpolation monotone-cubique), Empilé (area uniquement), Gestion des valeurs nulles (Connect / Gap). |
| Bar / Column | Empilé, Taille des barres, Horizontal. |
| Pie / Donut | Rayon intérieur (donut uniquement), Rayon extérieur, Position du libellé (outside / inside / none), Palette. |
| Scatter | Champ de taille, Plage de taille ([min_px, max_px]). |
Grouper par
Le champ Grouper par (dans la section Séries de l'éditeur) transforme une colonne source en N séries parallèles sans lister chaque série à la main. Utile quand l'ensemble des valeurs n'est pas connu à l'avance — statuts de factures, commerciaux, …
| Champ | Effet |
|---|---|
| Champ de regroupement | Colonne dont les valeurs distinctes deviennent les séries. |
| Champ Y | Colonne dont le framework somme / prend la première valeur par groupe. |
| Palette | Tableau de couleurs utilisé pour les séries générées, dans l'ordre de première apparition. Repli sur la palette par défaut quand vide. |
Quand Grouper par est défini, la liste par série ci-dessus se réduit à un seul champ Y et une palette de couleurs — le framework pivote les lignes lui-même.
Aperçu
Le bouton Aperçu (en haut de l'éditeur) rend le graphique en ligne avec les réglages actuels. L'aperçu interroge la base de données en direct (ou le pool sur lequel le connecteur pointe) et affiche les données les plus récentes — utile pour confirmer un changement de couleur avant d'enregistrer.
Réutiliser un graphique
Un graphique enregistré est référencé par son identifiant depuis n'importe quel tableau de bord. Définir une fois, référencer partout — un changement de source de données sur le graphique se reflète dans chaque panneau de tableau de bord.
Dans le constructeur de tableau de bord, ajouter un panneau de graphique se résume à une liste déroulante Graphique de tous les graphiques de l'installation + un glisser-déposer Position sur la grille.
Permissions
Un graphique hérite de la permission de sa requête sous-jacente — un appelant qui ne peut pas exécuter sql:billing:monthly-invoice-counts ne voit pas le graphique dans un tableau de bord. Le framework retire le panneau en silence plutôt que d'afficher un placeholder 403, pour garder les tableaux de bord informatifs.
Sous le capot
Les définitions des graphiques sont enregistrées dans charts.toml. Les opérateurs ne modifient pas ce fichier à la main ; le constructeur de graphiques est l'interface de référence. Les opérateurs avancés peuvent recourir à l'onglet Raw TOML comme issue de secours.
Pour aller plus loin
- Tableaux de bord — comment un graphique se pose sur un panneau de tableau de bord.
- Liaison des paramètres — valeurs fixes, tokens, cascades.
- Concepts → Connecteurs — le connecteur qui alimente les données du graphique.