---
suivi: 1668
date: 2026-09-23
sujet: Barre KPI — jauges à seuil, hiérarchie à gauche
chantier: Foncier / Faisabilité
type: feature
statut: poussé
hash: af757faa
fichiers:
    - resources/js/utils/seuilsIndicateursEtudeFi.js
    - resources/js/Components/Foncier/ScenarioKpiBar.vue
    - resources/js/Pages/Foncier/Scenarios/Show.vue
    - tests/Unit/ScenarioKpiBarJauges1668SourceTest.php
    - tests/Unit/ScenarioKpiBarLisere1658SourceTest.php
    - tests/Unit/ScenarioKpiBarCompacte1663SourceTest.php
    - tests/Unit/ScenarioSeuilsCouleurBarreKpi1654SourceTest.php
    - tests/Unit/ScenarioBarreKpiEtUnites1640SourceTest.php
    - database/data/journal_mises_a_jour_post_2026_06_12.php
    - public/build/
    - docs/suivi/SUIVI_1668_barre_kpi_jauges.md
---

# SUIVI #1668 — barre KPI jauges

## PROMPT ENVOYÉ

Lot PUREMENT VISUEL. Barre d'indicateurs du scénario : résultat
consolidé en grand à gauche, bénéfice brut dessous ; trois jauges
à quatre segments + curseur pour les indicateurs à seuil. Aucun
libellé qualitatif. Bornes et couleurs = source unique
`seuilsIndicateursEtudeFi.js`. AppShell intouché. #1667 en
attente : rebase origin/main avant Vite.

## FICHES LUES

- **#1663 LEÇON** — `flex-1` étire ; `flex-wrap` sans
  `overflow-x-hidden`. Conservé : Teleport, ancres, Export PDF /
  Enregistrer. Abandonné : valeur 18 px égale, liseré 3 px.
  Hauteur après #1663 ≈ 78 px.
- **#1658 LEÇON** — fond blanc, plus de repli. Conservé. Abandonné :
  filet latéral 3 px et fonds pâles (`CLASSES_PALIER_LISERE.fond`)
  — la couleur passe par la valeur et la jauge. `CLASSES_PALIER_LISERE`
  reste la source des teintes de segments (`.filet`).
- **#1654 LEÇON** — une seule source de seuils ; 0 → palier null.
  Conservé. Ajouté dans CE fichier : `segmentsJauge`,
  `libellesBornesJauge`, `positionCurseurJauge`, `lectureJauge`.
- **#1652** — estompage `opacity-50` étendu à la jauge et au curseur.
- **#1640 / #1648 / #1659** — Teleport, Enregistrer, Export PDF
  intouchés. Show.vue : seulement `seuilCode` + `brut` sur les trois
  KPI à seuil (même `eTot`).

Anti-collision : dernier numéro poussé = **#1666**. **#1667** journal
en attente d'arbitrage (fichier journal touché ici aussi) → rebase
avant build. **#1668 est libre.**

## SYNTHÈSE

### Structure

1. Gauche — résultat consolidé 26 px gras marine ; bénéfice brut
   en 12 px dessous (libellé gris, montant à droite).
2. Filet vertical 1 px entre ce bloc et les jauges (familles
   distinctes). Entre les trois jauges : espacement seul.
3. Chaque jauge : libellé 10 px → valeur 20 px colorée → piste
   4 segments → bornes sous les séparations. Pas de mot « Bon »
   / « Excellent ».

### Convention du curseur

Quatre segments d'égale largeur visuelle (25 % chacun).
Segment = palier de `palierSeuilIndicateur` (inclusif bas,
exclusif haut). Dans le segment, progression linéaire entre
ses deux bornes. Premier segment : 0 → 1re borne.

Dernier segment ouvert : **plafond d'affichage = 2 × la dernière
borne** (30 k → 60 k, 15 % → 30 %, 25 % → 50 %). Justification :
amplitude de lecture égale à tout l'intervalle 0 → dernier seuil,
pour qu'une valeur juste au-dessus du dernier palier (V1 18,01 %
et 30,6 %) reste près du début du 4e segment, et qu'une valeur
très haute se tasse au bord droit sans sortir. `overflow-hidden`
sur la piste.

0 / absent : jauge gris `#E5E7EB`, pas de curseur.

### Hauteur zone collante

| | Rangée KPI | Ancres | Total |
|---|---|---|---|
| Avant (#1663) | ≈ 40 px | ≈ 38 px | **≈ 78 px** |
| Après (#1668) | ≈ 58 px (26+bénéfice / jauge+bornes) | inchangée | **≈ 96 px** |

**+18 px.** Les jauges et les bornes chiffrées l'imposent ; padding
KPI réduit `py-1` → `py-0.5` pour limiter. Pas d'ascenseur
horizontal : `flex-wrap`, min-width 9,5 rem par jauge.

### Show.vue

Ajout `seuilCode` + `brut: eTot(...)` sur les trois KPI à seuil.
Valeurs affichées toujours `euro()` / `fmtPct()` — identiques
au centime. Sans `peut_prix` : tableau vide, ni jauge ni couleur.

## DÉPLOIEMENT-TEST

```
git pull origin main
php artisan optimize:clear
php artisan view:clear
php artisan journal:sync
```

Pas de migrate. `route:clear` inutile.

## LEÇON

Une jauge à paliers d'amplitudes inégales et dernier palier
ouvert ne peut pas placer le curseur « en % du max » : il faut
d'abord le segment (même fonction que la couleur), puis une
convention de plafond pour l'ouvert. 2 × dernière borne évite
de coller V1 au bord droit (plafond = amplitude du palier
précédent aurait saturé 18,01 % dès 18 %). Les bornes sous la
jauge se lisent dans `bareme.bornes` : les réécrire dans le Vue
créerait une deuxième source, interdite depuis #1654.