Composants · data

Graphiques & KPI

Graphiques SVG sans dépendance, colorés uniquement par les tokens chart-1 → chart-6 (recalculés en mode sombre). Chaque graphique embarque une table de données accessible : le graphique ne porte jamais seul l’information.

KpiCard
Sparkline
BarChart
LineChart
DonutChart
ChartLegend
ChartDataTable
chartSeriesColors

Indicateurs clés

KpiCard avec Sparkline

Quand l’utiliser : Rangée d’indicateurs clés en tête de tableau de bord : valeur principale formatée, variation (couleur selon le sens métier), tendance, lien vers le détail. Sur mobile, les KPI s’empilent.

Chiffre d’affaires du mois

102 600 500 F CFA

−62,8 %vs mois précédent

Production

634.7 t

−2,7 %vs mois précédent

Rendement usinage

61 %

−0,4 %pts vs septembreObjectif 62 %

Heures d’arrêt machines

31,5 h

+303,8 %vs mois précédent

Créances clients

220 715 555 F CFA

dont 21 712 120 F CFA échues

Stock paddy

629,9 t

Couverture : 28 jours d’usinage

Marge brute

—

Données comptables non clôturées

invertDelta pour les indicateurs où une baisse est bonne (heures d’arrêt, retards). loading affiche un squelette.

Afficher le code

<KpiCard
  label="Chiffre d’affaires du mois"
  value={<MoneyText value="186400000" currency="XOF" />}
  delta={0.089} icon={<Banknote />} href="/reports/sales"
  sparkline={<Sparkline data={[142, 151, 148, 160, 158, 171, 186]} label="Tendance sur 7 mois" />}
/>
<KpiCard label="Heures d’arrêt" value="14,5 h" delta={-0.34} invertDelta />

Sparkline

Quand l’utiliser : Tendance compacte sans axe, dans une carte KPI ou une cellule de tableau. Avec label, elle est annoncée ; sans, elle est décorative.

color="chart-1"

color="chart-2"

color="success"

color="warning"

color="danger"

color="info"

width={160} height={40}

Afficher le code

<Sparkline data={series} />                        // aire, chart-1
<Sparkline data={series} variant="line" color="success" width={120} height={32} />

Graphiques

BarChart

Quand l’utiliser : Comparer des catégories (sites, produits, mois). Plusieurs séries = barres groupées ; horizontal pour des libellés longs ou un classement.

Ventes par mois et par famille (millions de F CFA)
Mois	Riz blanc	Brisures	Son et balles
Avr.	118 M	16 M	8 M
Mai	126 M	17 M	8 M
Juin	121 M	18 M	9 M
Juil.	133 M	18 M	9 M
Août	130 M	19 M	9 M
Sept.	141 M	20 M	10 M
Oct.	152 M	22 M	12 M

Chiffre d’affaires par client — octobre (millions de F CFA)
Client	CA
Grossiste Démo Kossodo	39,8 M F CFA
Alimentation Démo Sahel	28,1 M F CFA
Distribution Céréales Démo	17 M F CFA
Comptoir Démo du Centre	6,8 M F CFA
Supérette Démo Gounghin	1,1 M F CFA

Afficher le code

<BarChart title="Ventes par mois (M F CFA)" labels={months}
  series={[{ name: 'Riz blanc', values: [...] }, { name: 'Brisures', values: [...] }]}
  valueFormatter={(v) => `${v} M`} />
<BarChart orientation="horizontal" title="Top clients" labels={clients} series={[{ name: 'CA', values }]} />

LineChart

Quand l’utiliser : Évolution dans le temps d’une ou plusieurs grandeurs comparables (rendement vs objectif, production par site). area pour insister sur le volume.

Rendement usinage vs objectif
Mois	Rendement	Objectif
Avr.	61,4 %	62 %
Mai	61 %	62 %
Juin	61,2 %	62 %
Juil.	59,8 %	62 %
Août	61,9 %	62 %
Sept.	60,6 %	62 %
Oct.	61,8 %	62 %

Production mensuelle par site (tonnes)
Mois	Usine de Di	Atelier Bobo (sous-traitance)
Avr.	480 t	80 t
Mai	492 t	83 t
Juin	505 t	85 t
Juil.	498 t	86 t
Août	510 t	88 t
Sept.	522 t	90 t
Oct.	548 t	94 t

Afficher le code

<LineChart title="Rendement usinage" labels={months} area showPoints
  series={[{ name: 'Rendement', values }, { name: 'Objectif', values: target, color: 'chart-6' }]}
  valueFormatter={(v) => formatPercent(v)} />

DonutChart

Quand l’utiliser : Répartition d’un total en peu de parts (≤ 6) : mix produits, ventilation des créances. Au-delà, préférer un BarChart horizontal.

Répartition des ventes d’octobre (millions de F CFA)
Famille	Valeur	Part
Riz 50 kg	98,4 M	52,8 %
Riz 25 kg	41,2 M	22,1 %
Riz 5 kg	12,6 M	6,8 %
Brisures	22,1 M	11,9 %
Son et balles	12,1 M	6,5 %

Créances clients par ancienneté
Catégorie	Valeur	Part
Non échues	73 500 000 F CFA	77,5 %
1 à 30 jours	14 200 000 F CFA	15 %
Plus de 30 jours	7 100 000 F CFA	7,5 %

Afficher le code

<DonutChart title="Répartition des ventes" data={[{ label: 'Riz 50 kg', value: 98 }, …]}
  centerLabel="Total" centerValue="186 M" valueFormatter={(v) => `${v} M`} />

DonutChart — table de données visible

Quand l’utiliser : Quand les valeurs exactes comptent autant que la forme (rapport imprimé, comité, export) : showDataTable affiche sous l’anneau la table de données, sinon réservée aux lecteurs d’écran.

Charges d’octobre par nature
Nature	Montant	Part
Achats de paddy	412 000 000 F CFA	81,3 %
Personnel	58 300 000 F CFA	11,5 %
Énergie	21 700 000 F CFA	4,3 %
Transport	14 900 000 F CFA	2,9 %

Afficher le code

<DonutChart title="Charges d’octobre par nature" data={…} showDataTable
  categoryHeader="Nature" valueHeader="Montant" valueFormatter={(v) => formatMoney(v, 'XOF')} />

ChartLegend, ChartDataTable et palette

Quand l’utiliser : Briques internes des graphiques, exportées pour composer une visualisation sur mesure : légende cohérente et table de données accessible (sr-only ou visible).

Stock de paddy par site
Site	Paddy reçu	Paddy usiné
Usine de Di	412 850 kg	318 400 kg
Dépôt Bobo-Dioulasso	186 300 kg	—

Afficher le code

<ChartLegend items={chartSeriesColors.map((c, i) => ({ label: `Série ${i + 1}`, color: c }))} />
<ChartDataTable caption="…" categoryHeader="Site" seriesNames={['Paddy reçu']} rows={[{ label: 'Di', values: ['412 850 kg'] }]} />