Aller au contenu principal

Affichage financier

Problème​

Un montant financier doit être lisible en un coup d'œil, comparable verticalement dans une liste, et univoque sur son signe (+ / −) et sa devise.

Une erreur d'affichage (décimale mal placée, devise manquante) dans un outil de patrimoine détruit la confiance.

Règles absolues​

1. tabular-nums toujours​

Tout montant utilise .tabular-nums (= font-variant-numeric: tabular-nums + famille IBM Plex Mono). Voir Typographie.

2. Formatage via Intl.NumberFormat​

Jamais de concaténation manuelle. La source de vérité est la locale.

const fmt = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
fmt.format(1234.5); // "1 234,50 €"

3. Decimal côté serveur, number côté affichage​

  • Stockage + calculs : Decimal (Prisma) — voir ADR-001
  • Juste avant le rendu : .toNumber() puis Intl.NumberFormat
  • Jamais parseFloat sur un montant venant de la DB

4. Signe explicite et coloré​

ValeurSigneCouleur
Positif+ préfixé (si variation) ou rien (si solde)var(--color-positive)
Négatif− Unicode (U+2212, pas -)var(--color-negative)
Zéropas de signecouleur neutre

Composant : TrendBadge.

5. Devise​

  • Toujours affichée (€, $, £, CHF) — jamais de montant nu
  • Position selon locale (FR : suffixe avec espace insécable, EN : préfixe)

Variations temporelles​

Pour une variation 30 / 90 / 180 jours : afficher la variation absolue et le pourcentage, les deux colorés.

<span className="tabular-nums text-[var(--color-positive)]">
  +1 245,00 € (+3,2 %)
</span>

À ne pas faire​

  • Montant sans devise (« 1 234,50 » seul, ambigu)
  • Décimales tronquées (« 1 234 € » quand la donnée est 1 234,50 €)
  • Couleur rouge sur un solde nul
  • Utiliser un Float JS pour additionner des montants (perte de précision)

Voir aussi​