Composants statistiques (stat_card, bar_list, donut)

Introduction

Dokos met à disposition trois composants d'interface prêts à l'emploi, conçus pour afficher des indicateurs visuels directement dans les pages et formulaires, sans dépendre d'un document enregistré ni d'une requête serveur supplémentaire.

      
flowchart LR
    A[Page ou formulaire] --> B[Composant statistique]
    B --> C[stat_card : valeur unique]
    B --> D[bar_list : comparaison horizontale]
    B --> E[donut : répartition en anneau]

    

Ces composants sont utiles lorsque les valeurs à afficher sont déjà calculées par la page elle-même — par exemple un résumé des ventes d'un client ou une répartition des devis par statut.

Carte de statistique (stat_card)

La carte de statistique affiche une valeur unique accompagnée d'un libellé, d'une comparaison optionnelle et d'un trend visuel.

Cas d'usage typique

• Montant total des ventes du client sur l'année en cours
• Nombre de devis en cours
• Chiffre d'affaires mensuel avec évolution par rapport au mois précédent

États gérés

      
flowchart LR
    S1[État de chargement] --> S2[Affichage des données]
    S2 --> S3[État vide — aucun élément]

    

Le composant gère trois états :

• Chargement : un squelette d'attente s'affiche pendant que les données sont préparées.
• Données : la valeur, le libellé et l'éventuelle comparaison apparaissent dans les couleurs du thème actif.
• Vide : un message indique qu'aucune donnée n'est disponible.

Accessibilité

La carte de statistique prend en charge la navigation au clavier et s'adapte automatiquement au mode sombre ainsi qu'aux langues écrites de droite à gauche (arabe, hébreu).

Liste à barres (bar_list)

La liste à barres affiche une série de valeurs sous forme de barres horizontales, permettant de comparer rapidement des éléments entre eux.

Cas d'usage typique

• Top 10 des produits vendus par quantité
• Répartition des ventes par catégorie
• Comparaison des retards de paiement par fournisseur

Affichage des valeurs

Deux modes d'affichage sont disponibles :

• Valeurs permanentes : les montants sont toujours visibles à côté de chaque barre.
• Valeurs au survol (values_on_hover) : les montants n'apparaissent qu'au survol d'une ligne, ce qui allège la lecture quand la liste est longue.

Espacement des libellés

L'espace réservé aux libellés (à gauche des barres) peut être ajusté via le paramètre label_gutter. Cela permet d'aligner proprement les libellés longs ou, au contraire, de gagner de la place pour les barres lorsque les libellés sont courts.

Sens de lecture

Les barres s'orientent automatiquement de gauche à droite ou de droite à gauche selon la langue active, sans configuration manuelle.

Anneau (donut)

L'anneau affiche une répartition en pourcentages sous forme de segments circulaires, avec une valeur centrale et des tooltips riches au survol.

Cas d'usage typique

• Répartition des factures par statut (payées, impayées, en retard)
• Ventilation des dépenses par compte analytique
• Part des ventes par canal de distribution

Informations affichées au survol

Au survol d'un segment, le tooltip montre :

• Le libellé de la catégorie
• Le montant correspondant
• Le pourcentage représenté

Surbrillance depuis la légende

Le survol d'un élément de la légende met en surbrillance le segment correspondant dans l'anneau, facilitant l'identification visuelle.

Valeur centrale

La valeur affichée au centre de l'anneau est automatiquement centrée sur l'anneau et ajustée en fonction de la taille disponible.

Accessibilité

Comme les autres composants, l'anneau respecte le mode sombre, les couleurs du thème et la navigation au clavier.

Couleurs et thèmes

Les trois composants utilisent les couleurs de graphique définies dans l'espace de travail. Ces couleurs :

• S'adaptent automatiquement au mode clair et au mode sombre
• Suivent les jetons de couleur partagés entre les composants d'interface
• Garantissent une cohérence visuelle entre les indicateurs affichés dans différentes pages

      
flowchart TD
    T[Thème de l'espace de travail] --> C1[stat_card]
    T --> C2[bar_list]
    T --> C3[donut]
    C1 & C2 & C3 --> R[Cohérence visuelle garantie]

    

Chargement à la demande

Les composants ne sont pas chargés au démarrage de l'espace de travail. Ils sont chargés au moment de leur première utilisation, ce qui préserve la rapidité de navigation. Une fois chargés, ils restent disponibles pour les pages suivantes.

Où trouver ces composants ?

Ces composants sont mis à la disposition des développeurs et intégrateurs Dokos pour être intégrés dans des pages personnalisées, des tableaux de bord ou des formulaires. Ils sont utilisables directement depuis le code JavaScript de l'application.

Un explorateur de composants (component_explorer) est disponible dans l'espace de travail pour prévisualiser chaque composant avec des données d'exemple.

Comparaison avec les outils existants

Exemple concret

L'onglet Vue d'ensemble du client utilise les trois composants pour présenter un résumé synthétique :

      
flowchart TD
    CO[Onglet Vue d'ensemble du client] --> SC[stat_card : Total des ventes annuelles]
    CO --> BL[bar_list : Top 5 produits achetés]
    CO --> DN[donut : Répartition des factures par statut]

    

1. La carte de statistique affiche le total des ventes réalisées avec le client « Maison Verte SARL » sur l'année, ainsi que l'évolution par rapport à l'année précédente.
2. La liste à barres présente les cinq produits les plus achetés, classés par quantité, avec les montants visibles au survol pour ne pas surcharger la lecture.
3. L'anneau montre la répartition des factures du client : payées, impayées et en retard, avec le montant et le pourcentage de chaque catégorie au survol.

Cette organisation permet à un commercial de saisir en un coup d'œil la santé commerciale d'un client sans naviguer entre plusieurs pages.