Skip to content

Paramètres / Mise en forme — Couleurs par domaine et catalogue de visuels

Spécification technique pour Heriade Rapport. Introduit un écran de configuration centralisée de la mise en forme visuelle, remplaçant le choix de couleur objet par objet dans les wizards KPI et Pastille par une logique de couleur par domaine, cohérente sur l'ensemble de l'application.

1. Objectif

Remplacer un choix de couleur ad hoc à chaque création de KPI/Pastille par une tendance de couleur par domaine, définie une fois dans Paramètres, et appliquée automatiquement partout. Un utilisateur qui parcourt un TDB doit pouvoir reconnaître à la couleur qu'un bloc vient de Finance, RH, ou Métier, sans avoir à lire son titre.

2. Couleur par domaine — modèle

ts
interface ParametreCouleurDomaine {
  domain: 'finance' | 'rh' | 'metiers' | 'transverse'   // 'transverse' toujours présent, non supprimable
  couleur: string          // référence à une variable --primary-* ou à la palette étendue du thème
}
  • Un domaine par entrée, dérivé des domaines déjà définis dans la Modélisation (docs/meta-modele-dimensions.md) — si un client ajoute un nouveau domaine, une nouvelle ligne de couleur apparaît automatiquement dans cet écran, à configurer.
  • Transverse est une entrée à part entière, toujours présente : c'est la couleur utilisée quand un KPI ou une Pastille ne peut pas être rattaché à un domaine unique (cf. section 3).

3. Règle de dérivation automatique de la couleur

Un KPI ou une Pastille n'a plus de champ de couleur éditable individuellement. Sa couleur se déduit automatiquement du domaine de sa mesure :

Si la mesure (KPI : numérateur : dénominateur confondus / Pastille : mesure) 
   provient d'un seul domaine
      → couleur = ParametreCouleurDomaine correspondant à ce domaine

Sinon (mesure combinant plusieurs domaines, ex. numérateur Finance + 
       dénominateur Référentiel/Saisie qui n'est rattaché à aucun domaine métier)
      → couleur = ParametreCouleurDomaine("transverse")

Dans les wizards KPI (docs/spec-bibliotheque-kpi.md, étape Visuel) et Pastille (docs/spec-bibliotheque-widgets-restitution.md), le champ couleurAccent éditable est supprimé et remplacé par un aperçu en lecture seule de la couleur dérivée, avec un lien "Modifier dans Paramètres / Mise en forme" — modifier cette couleur y est possible, mais l'effet est global (tous les KPI/Pastilles du domaine changent), jamais local à un seul objet.

4. Pastille — position et style du titre

Ajout au modèle PastilleDefinition (docs/spec-bibliotheque-widgets-restitution.md) :

ts
interface PastilleDefinition {
  // ... champs existants (mesure, comparaison, unité)
  titre: {
    position: 'haut' | 'centre' | 'bas'   // défaut : 'haut'
    poids: 'normal' | 'gras'                // défaut : 'normal'
    taille: 'petit' | 'normal' | 'grand'    // défaut : 'normal'
  }
  visuel: {
    type: string              // cf. catalogue élargi, section 6
    // couleurAccent supprimé (section 3) — dérivé automatiquement du domaine
  }
}

Le défaut position: 'haut' corrige le comportement attendu par défaut (le titre doit être visible en premier, au-dessus de la valeur) — jusqu'ici non garanti explicitement dans la spec initiale.

5. Étape Visuel des wizards — mise à jour

Dans les deux wizards (KPI et Pastille), l'étape Visuel devient :

  1. Choix du type de visuel (catalogue élargi, section 6)
  2. Pour Pastille uniquement : position du titre, poids, taille (section 4)
  3. Aperçu en lecture seule de la couleur (dérivée du domaine, section 3), avec lien vers Paramètres si l'utilisateur veut la changer

Plus de sélecteur de couleur libre dans le wizard lui-même.

6. Catalogue élargi de visuels

KPI (complète docs/spec-bibliotheque-kpi.md, section 7)

TypeDescription
Jauge circulaire (défaut)Arc de progression, valeur au centre
Barre de progressionBande horizontale, compacte
Valeur seuleChiffre avec couleur de seuil, sans représentation graphique
Anneau (donut)Variante de la jauge circulaire, cercle complet plutôt qu'un arc
Jauge horizontale à seuils marquésBande horizontale avec repères visuels aux seuils bon/alerte, façon thermomètre
Valeur avec flèche de tendanceChiffre + icône flèche (hausse/baisse) par rapport à la période précédente

Pastille (complète docs/spec-bibliotheque-widgets-restitution.md, section 2)

TypeDescription
Valeur seule (défaut)Chiffre seul
Valeur avec tendanceChiffre + HSparkline
Valeur avec comparaisonChiffre + delta coloré vs Budget/N-1
Valeur avec icôneChiffre + icône représentant la nature de la mesure (ex. effectifs, trésorerie)
Valeur avec barre de progressionChiffre + mini barre sous la valeur, montrant l'avancement vers un objectif
Carte comparativeDeux valeurs côte à côte (ex. Réel vs Budget), sans nécessiter un second bloc séparé

Ce catalogue reste ouvert à extension — chaque nouveau type doit respecter la règle de couleur dérivée du domaine (section 3), jamais une couleur codée en dur dans le type de visuel lui-même.

6bis. Allègement visuel de l'écran — liste compacte plutôt que cartes

Constat sur l'implémentation actuelle : chaque entrée de couleur (thèmes, couleur principale, couleurs par domaine, couleurs par phase) est présentée comme une carte à poids visuel plein (bordure, padding généreux, swatch carré ~44px, code hex en police mono à poids égal avec le nom, bouton "Réinit." bordé pleine taille) — répété 7 fois ou plus sur l'écran, ce qui crée une impression de lourdeur par accumulation, pas par un défaut isolé.

Principe retenu : liste compacte à lignes fines, pas de carte par élément.

  • Les entrées d'un même groupe (Couleurs par domaine, Couleurs par phase) sont regroupées dans un seul conteneur bordé, avec des séparateurs fins (0.5px) entre lignes plutôt qu'une bordure complète par élément.
  • Le swatch de couleur devient un point cliquable de ~18px (cercle), pas un carré de ~44px — il ouvre un popover de sélection au clic plutôt que d'occuper un espace fixe important.
  • Le nom du domaine/phase reste en poids normal, taille standard ; le code hex passe en --text-muted, taille réduite, aligné à droite — hiérarchie claire entre l'information principale et secondaire, au lieu d'un poids égal entre les deux.
  • Le bouton "Réinit." devient une icône ghost (flèche de rafraîchissement, ti-refresh), sans bordure ni libellé texte — le texte répété "Réinit." sur chaque ligne contribue significativement au bruit visuel de l'écran actuel.
  • L'entrée non réinitialisable (Transverse, cf. section 2) n'affiche aucun bouton désactivé visible — elle disparaît simplement de la colonne d'action, plus net qu'un bouton grisé.

Ce même principe de liste compacte s'applique aux sections Thèmes et Couleur principale, qui gagnent à être regroupées dans une présentation similaire plutôt que de rester des cartes séparées à poids plein — la section Options des pastilles (deux cases à cocher + un curseur) reste inchangée, son poids visuel actuel est déjà raisonnable.

7. Phasage suggéré

  1. Étape 1 : écran Paramètres / Mise en forme avec les couleurs par domaine (section 2), et bascule des wizards KPI/Pastille vers la couleur dérivée en lecture seule (section 3) — corrige la dette introduite par le champ couleurAccent éditable ajouté précédemment.
  2. Étape 1bis : allègement visuel de l'écran (section 6bis) — remplacement des cartes par des listes compactes. Peut être menée en même temps que l'étape 1 si l'écran est encore en cours de construction, ou en correctif rapide si l'étape 1 est déjà livrée avec le style actuel (cartes).
  3. Étape 2 : ajout des champs de position/style du titre pour Pastille (section 4), avec le correctif de position par défaut.
  4. Étape 3 : extension progressive du catalogue de visuels (section 6) — pas besoin de livrer les 6 types de chaque catalogue d'un coup, peut s'étaler selon les retours d'usage réels.

8. Point de vigilance

Modifier la couleur d'un domaine dans Paramètres a un effet rétroactif sur tous les KPI et Pastilles de ce domaine, sur tous les TDB où ils sont insérés. C'est le comportement voulu (cohérence transverse), mais il doit être communiqué clairement à l'utilisateur au moment du changement (ex. "cette couleur s'applique à N KPI et M pastilles existants") pour éviter la surprise d'un TDB qui change d'aspect sans qu'on ait touché à ce TDB précis.