Métriques

Simple

Trois valeurs, les couleurs du thème par défaut.

Épaisseurs

xs, sm, md (défaut), lg, xl — et une taille responsive : fine sur mobile, épaisse à partir de lg. xl existe pour le bullet, dont la piste doit loger une mesure.

Labels cumulés

Les totaux courants au-dessus de la barre. Un label qui ne tient pas est retiré plutôt que superposé — réduis la fenêtre pour voir l'effet.

Marker

Un seuil pointé sur la barre, avec son tooltip. Il reprend la couleur du segment sur lequel il tombe.

Segments nommés et légende

Avec items, chaque segment porte un tooltip et la légende se replie sur plusieurs lignes quand la place manque.

Bullet

Avec measure, les segments deviennent des bandes qualitatives et la barre se lit comme un bullet graph : la mesure par-dessus, l'objectif en marqueur. Les bandes sont des teintes de base-content — elles se voient sur n'importe quelle surface et dans les deux thèmes, là où un base-200 disparaît sur une carte base-200. Les gaps disparaissent d'eux-mêmes, sinon la pointe de la mesure ne tomberait pas là où l'échelle le dit.

Couleur de la mesure

measure.color prend les trois mêmes formes que partout : un token du thème, une classe utilitaire toute faite (utile pour les teintes translucides), ou une couleur CSS libre qui passe en style inline. Par défaut primary, comme Sparkline et BarList — la mesure est la donnée, les bandes sont le fond.

Domaine explicite

max étend l'échelle au-delà des bandes — le reste du domaine reste visible en fond. max ne peut qu'étendre : réduire l'échelle sous la somme des bandes les ferait déborder de la piste.

Comparaison

L'argument de la forme : trois indicateurs sur la même échelle, comparables d'un coup d'œil. Trois jauges rondes prendraient dix fois la place sans s'aligner.

Couleurs libres

Un hex, un oklch, une variable CSS : tout ce qui n'est pas un token du thème passe en style inline. De quoi aligner la barre sur la palette d'un graphe voisin.

Cas limites

Somme nulle, valeurs décimales, et un segment à zéro qui ne casse pas les arrondis des extrémités.

Simple

Trié par ordre décroissant par défaut : une liste de barres est un classement.

Format et pourcentages

valueFormatter met en forme la valeur, showPercentage ajoute sa part du total. La colonne des valeurs reste alignée quoi qu'il arrive.

Hauteurs de ligne

sm, md (défaut), lg — et une hauteur responsive. Sur mobile, lg donne une cible tactile confortable.

Couleurs

Une couleur globale, ou une couleur par ligne pour faire ressortir ce qui compte. Les tokens du thème comme les couleurs CSS libres sont acceptés.

Échelle partagée

Sans max, chaque liste se normalise sur son propre maximum et deux listes ne sont pas comparables. Avec le même max, elles le deviennent.

Lignes cliquables et liens

onSelect transforme la ligne en bouton, href en lien — jamais les deux, un lien dans un bouton n'est ni valide ni atteignable au clavier.

Chargement et liste vide

loading affiche des squelettes pour que le panneau ne saute pas quand la donnée arrive : autant que la liste aura de lignes, ou le nombre que skeletonRows annonce — une liste qui attend sa première réponse n'a pas de données pour se mesurer. Une liste vide bascule sur EmptyState.

Entrée progressive des barres

reveal fait pousser chaque barre depuis zéro, avec revealStagger millisecondes de décalage d'une ligne à l'autre. Elle rejoue au montage, quand loading retombe à false — la forme d'un appel API — et à chaque changement de revealKey. Un simple changement de données ne la rejoue pas. Ignorée si le système demande moins d'animations.

Erreurs les plus fréquentes

Simple

90 jours de disponibilité. Chaque bloc porte son tooltip — en CSS pur, sans un seul composant React par case.

États

success, warning, error, info, neutral — et base-300 pour un bloc dont on ne sait rien. Ce sont des tokens du thème : aucune variante dark: à écrire.

Hauteurs

xs, sm, md (défaut), lg — et une hauteur responsive.

Bornes et résumé

Le patron des pages de statut : un résumé au-dessus, les bornes de la période en dessous. startLabel accepte une fonction, qui reçoit le nombre de blocs réellement affichés.

Légende

legend décrit ce que les couleurs veulent dire, sous les bornes. Les comptes sont calculés par l'appelant : la bande retire les blocs qui ne tiennent pas, un compte fait par le composant ne dirait pas clairement s'il parle de la période ou de l'écran.

Troncature responsive

Les mêmes 90 jours dans trois largeurs. Le composant mesure son conteneur — pas la fenêtre — et garde les blocs les plus récents qui tiennent à minBlockWidth. Réduis la fenêtre : la bande large en perd, les autres non.

Plafond explicite

maxBlocks plafonne en plus de ce qui tient, quand le nombre est connu d'avance. Ici 30, sur les mêmes 90 jours.

Couleurs libres

Comme partout dans metrics, une couleur CSS qui n'est pas un token passe en style inline.

Variantes

line (défaut), area et bar. Une seule prop : l'aire n'est que la ligne refermée sur sa base.

Hauteurs

xs, sm, md (défaut), lg — et une hauteur responsive. La largeur revient au conteneur, donc une classe suffit à la fixer.

Domaine

Par défaut le domaine est l'étendue des données : c'est la forme qui compte. Ancrer l'échelle à zéro l'aplatit — utile seulement pour comparer plusieurs séries, via min et max.

Remplissage

gradient (défaut), solid, none — sur la variante area uniquement.

Couleur et tendance

Un token du thème, une couleur CSS libre, ou colorByTrend qui prend la direction du trajet : vert si ça monte, rouge si ça descend, neutre si c'est plat.

Cas limites

Série vide, point unique, série plate, et des trous — qui restent des trous, sauf si connectNulls dit le contraire. Une mesure manquante n'est pas un zéro. Une valeur hors d'un domaine imposé s'écrase sur la borne plutôt que de sortir du cadre.

Recette : la tuile KPI

Aucun composant de plus : Card + Stats + Stat, dont figure accueille la sparkline. Le Delta du prochain lot ira dans description.

Simple

value est un ratio par défaut : 0.124 donne +12,4 %. La flèche dit le fait, la couleur dit si c'est une bonne nouvelle.

inverted : quand baisser est une bonne nouvelle

Un taux d'erreur, un churn, une latence, un coût. inverted échange les couleurs et jamais la flèche — la flèche décrit la donnée, elle ne la juge pas.

Badge ou texte

badge (défaut) pour une cellule de tableau, text pour se glisser sous un nombre sans l'alourdir.

Formats et localisation

percent lit un ratio, number lit la valeur telle quelle. Les nombres sont mis en forme dans la langue du LangProvider — bascule la langue de l'application pour voir le séparateur décimal suivre.

Bande neutre

neutralThreshold : en deçà, ce n'est pas une tendance mais du bruit. À zéro par défaut, donc toute variation compte.

from / to

Le composant calcule la variation, avec la valeur de départ en valeur absolue au dénominateur — une métrique qui remonte d'un socle négatif ne doit pas ressortir en baisse. Partir de zéro n'a pas de ratio : la valeur est alors annoncée indisponible.

Valeur absente

Un tiret muet plutôt que rien : une tuile dont la donnée n'est pas encore arrivée garde sa mise en page.

La tuile KPI, complète

La sparkline dans figure, le delta dans description. Toujours aucun composant de plus.

Simple

Des parts nommées et chiffrées. Les couleurs sont des tokens du thème.

Formes de marqueur

dot (défaut) pour une surface pleine — segment, bloc — square, et line pour une courbe.

Orientation

En colonne, ou responsive : empilée sur mobile, en ligne à partir de md. Réduis la fenêtre pour voir le passage.

Tailles

xs, sm, md. Par défaut : xs sur mobile, sm à partir du breakpoint sm.

Sans valeur

Une légende de séries ne nomme que des couleurs : sans value, l'entrée affiche son nom seul plutôt qu'un zéro inventé. Chaque entrée peut porter un tooltip.

Plusieurs sparklines

Ce pour quoi le marqueur line existe : trois courbes dans une même tuile, identifiées par un trait de leur couleur.

Dans CategoryBar

C'est la même légende que showLegend affiche sous la barre. legendProps donne accès à marker, orientation et size.

Couleurs libres

Comme partout dans metrics, une couleur CSS qui n'est pas un token passe en style inline — de quoi aligner la légende sur la palette d'un graphe voisin.

Simple

La rampe dans l'ordre, du plus bas au plus haut. Les bandes sont franches parce que l'échelle l'est : un graphe quantitatif range ses valeurs en seaux, un dégradé lisse dirait le contraire.

Orientation

Debout, le petit bout est en bas — là où un lecteur l'attend. C'est ce que prennent les placements latéraux d'un graphe.

Tailles

xs, sm, md, comme MetricLegend — les deux se posent au même endroit sous les mêmes graphes et doivent se lire à la même taille.

Frontières des seaux

ticks imprime les bords, pas les bornes seules — éteint par défaut, parce que N seaux font N+1 chiffres et que ça se bouscule vite sous une barre de 224 px. Un nombre en montre au plus autant, en sautant des bords : chaque chiffre affiché reste une vraie frontière, quitte à ce que le dernier intervalle soit plus court.

Sans bornes

Sans min ni max, il ne reste que la rampe. Zéro est une borne comme une autre : c'est l'absence qui efface la ligne, pas la valeur nulle.

Couleurs libres

Comme partout dans metrics, un token du thème passe en classe et toute autre couleur CSS en style inline — de quoi aligner l'échelle sur la rampe du graphe voisin.