Carte de statistique (stat_card)
Carte de statistique (stat_card)
frappe.ui.stat_card affiche un indicateur : un libellé, une valeur en grand, puis une tendance ou une légende. La page appelante fournit la valeur déjà calculée. Contrairement à une Carte numérique (Number Card), la carte n'est liée à aucun document et ne lance aucune requête.
Le composant est disponible dans le desk. Il renvoie un élément jQuery.
frappe.ui.bar_list et frappe.ui.donut n'existent plus. Pour des barres horizontales ou un anneau, utilisez frappe.ui.chart (type bar avec barOptions.horizontal, ou type donut). Voir Graphiques.Afficher une carte
const $card = frappe.ui.stat_card({
label: __("Net Sales"),
value: format_currency(120000),
delta: { value: 12, suffix: __("since last year") },
});
$(page.body).append($card);
La carte affiche « 120 000,00 € » et, en dessous, une flèche verte « +12% since last year ».
Options
| Option | Type | Rôle |
|---|---|---|
label | string | Titre court au-dessus de la valeur. Affiché comme texte. |
value | string, number, Element ou jQuery | Valeur principale, déjà formatée. Avec null ou sans valeur, la carte affiche « — » et « Aucune donnée ». La valeur 0 est une valeur valide. |
delta | Object | Ligne de tendance sous la valeur. Elle remplace caption. |
caption | string, Element ou jQuery | Ligne grisée sous la valeur. |
dot | string | Couleur CSS ou jeton de couleur d'une pastille avant le libellé. Elle relie la carte à une série d'un graphique. |
icon | string | Icône Lucide avant le libellé. Ignorée si dot est fourni. |
loading | boolean | Affiche des squelettes de chargement à la place de la valeur. Le libellé reste visible. |
onclick | function | Rend la carte cliquable : clic, touche Entrée ou Espace. |
css_class | string | Classes CSS supplémentaires sur l'élément racine. |
Objet delta
| Clé | Type | Rôle |
|---|---|---|
value | number | Variation en pourcentage, avec son signe : 12.5 ou -4. |
positive_is_good | boolean | true par défaut. Mettez false quand une hausse est mauvaise (retards, résiliations) : une hausse s'affiche alors en rouge. |
suffix | string | Texte grisé après le pourcentage, par exemple « depuis l'an dernier ». |
Une variation nulle affiche « 0% » en ton neutre. La valeur est arrondie à une décimale.
États de la carte
| État | Condition | Affichage |
|---|---|---|
| Chargement | loading: true | Libellé et squelettes. L'attribut aria-busy vaut true. |
| Vide | value vaut null ou est absent | « — » et « Aucune donnée ». |
| Données | value est fourni | Valeur, puis delta ou caption. |
Afficher un groupe de cartes
frappe.ui.stat_cards construit un groupe à partir d'une liste d'options.
frappe.ui.stat_cards({
layout: "grid",
items: [
{ label: __("Devis ouverts"), value: 14, icon: "file-text" },
{
label: __("Factures en retard"),
value: 3,
delta: { value: 50, positive_is_good: false, suffix: __("vs mois dernier") },
},
{ label: __("Chiffre d'affaires"), loading: true },
],
});
Exemple fictif. La deuxième carte affiche « +50% » en rouge, car positive_is_good vaut false.
layout | Disposition |
|---|---|
grid (défaut) | Grille de cartes de même hauteur, avec retour à la ligne. |
stack | Une seule colonne. |
Prévisualiser le composant
La page Component Explorer (/desk/component-explorer) montre la carte avec des données d'exemple. Voir Explorer les composants de Dodock.