[EF-11] Tableau de bord : surveiller et comparer sur deux écrans

marvin commented

2026-09-08 08:51:17 +00:00

Member

Exigence couverte

EF-11, EF-08, EF-04

Épreuve servie

EC05 · Data, ETL et BI

Charge estimée

2,5 j.h

Ce qu'on veut obtenir

L'écran Parc porte aujourd'hui deux métiers qui n'ont ni le même rythme ni la même période : savoir où en est le parc à l'instant t, et comparer les sites sur la durée. D'où deux sélecteurs de période qui s'ignorent, une page de 2 064 px, et une rangée de pavés dont trois sur quatre sont à moitié vides. On sépare les deux métiers, et on encode dans la forme ce qui n'était jusqu'ici qu'écrit : le taux de charge d'un site, la sévérité d'une alerte, ce qui demande une décision maintenant.

Le ticket porte aussi les six défauts mécaniques relevés à la même revue. Ils n'engagent aucun arbitrage — une règle CSS que sa voisine annule, un dessin étiré, deux formats de nombre qui divergent — et il serait absurde de refondre les écrans sans les corriger au passage.

Les maquettes validées sont en commentaire.

Critères d'acceptation

L'écran Parc porte un seul contrôle de période, en tête de page, dont dépendent le profil horaire et les micro-courbes du tableau
La comparaison des sites vit sur sa propre route /comparaison, avec sa période 7 j / 30 j, son entrée de navigation, et sa légende en jetons qui montre les sept sites sans défilement interne
Chaque ligne du tableau des sites porte son taux de charge en jauge graduée aux trois seuils du glossaire, et les sites en surcharge, en tension ou à source muette sont listés sur l'écran Parc sans clic supplémentaire
Sur la fiche d'un site, le panneau de traçabilité s'ouvre au clic d'un point de la courbe et porte la valeur retenue, la valeur brute, la méthode et la qualité conclue
Les six défauts de la revue sont corrigés : cellules numériques alignées à droite dans les trois tableaux, graduations du profil rendues à leur taille déclarée quelle que soit la largeur, aucun débordement horizontal du document à 375 px, navigation atteignable sous 900 px, virgule décimale sur tout pourcentage affiché, aucun text-transform: capitalize sur un libellé français
Aucune route d'API nouvelle : la refonte se sert de /v1/parc/synthese, /v1/parc/mesures, /v1/sites, /v1/sites/{id}/mesures, /v1/sites/{id}/recommandations, /v1/sites/{id}/tracabilite, /v1/qualite/synthese et /v1/alertes

Comment on le vérifie

Tests      services/dashboard/tests/unit/ — GraphiquesView, ComparaisonView,
           TableauSites, TableauQualite, JournalCollecte, SiteView,
           TracabiliteDetail, ProfilHoraireParc, SyntheseParc, FicheSite,
           ListeAlertes, EnteteApplication
Commande   cd services/dashboard && npm run test:unit
Preuve     sortie Vitest, captures des quatre écrans, et capture à 375 px
           sans barre de défilement horizontale

Hors périmètre

Le regroupement des alertes à grand volume. L'instance réelle en annonce près de 1 700 ouvertes, dont 345 critiques : aucune liste de cartes ne tient à cette échelle, il faudra compter et regrouper côté API. Ticket distinct.
Le thème sombre.
Le ticket #53 (accent bleu ou cuivre, noir du bouton dérivé de l'encre) : la refonte suit les jetons tels qu'ils sont aujourd'hui.

### Exigence couverte EF-11, EF-08, EF-04 ### Épreuve servie EC05 · Data, ETL et BI ### Charge estimée 2,5 j.h ### Ce qu'on veut obtenir L'écran Parc porte aujourd'hui deux métiers qui n'ont ni le même rythme ni la même période : savoir où en est le parc à l'instant t, et comparer les sites sur la durée. D'où deux sélecteurs de période qui s'ignorent, une page de 2 064 px, et une rangée de pavés dont trois sur quatre sont à moitié vides. On sépare les deux métiers, et on encode dans la forme ce qui n'était jusqu'ici qu'écrit : le taux de charge d'un site, la sévérité d'une alerte, ce qui demande une décision maintenant. Le ticket porte aussi les six défauts mécaniques relevés à la même revue. Ils n'engagent aucun arbitrage — une règle CSS que sa voisine annule, un dessin étiré, deux formats de nombre qui divergent — et il serait absurde de refondre les écrans sans les corriger au passage. Les maquettes validées sont en commentaire. ### Critères d'acceptation - [ ] L'écran Parc porte un seul contrôle de période, en tête de page, dont dépendent le profil horaire et les micro-courbes du tableau - [ ] La comparaison des sites vit sur sa propre route `/comparaison`, avec sa période 7 j / 30 j, son entrée de navigation, et sa légende en jetons qui montre les sept sites sans défilement interne - [ ] Chaque ligne du tableau des sites porte son taux de charge en jauge graduée aux trois seuils du glossaire, et les sites en surcharge, en tension ou à source muette sont listés sur l'écran Parc sans clic supplémentaire - [ ] Sur la fiche d'un site, le panneau de traçabilité s'ouvre au clic d'un point de la courbe et porte la valeur retenue, la valeur brute, la méthode et la qualité conclue - [ ] Les six défauts de la revue sont corrigés : cellules numériques alignées à droite dans les trois tableaux, graduations du profil rendues à leur taille déclarée quelle que soit la largeur, aucun débordement horizontal du document à 375 px, navigation atteignable sous 900 px, virgule décimale sur tout pourcentage affiché, aucun `text-transform: capitalize` sur un libellé français - [ ] Aucune route d'API nouvelle : la refonte se sert de `/v1/parc/synthese`, `/v1/parc/mesures`, `/v1/sites`, `/v1/sites/{id}/mesures`, `/v1/sites/{id}/recommandations`, `/v1/sites/{id}/tracabilite`, `/v1/qualite/synthese` et `/v1/alertes` ### Comment on le vérifie ``` Tests services/dashboard/tests/unit/ — GraphiquesView, ComparaisonView, TableauSites, TableauQualite, JournalCollecte, SiteView, TracabiliteDetail, ProfilHoraireParc, SyntheseParc, FicheSite, ListeAlertes, EnteteApplication Commande cd services/dashboard && npm run test:unit Preuve sortie Vitest, captures des quatre écrans, et capture à 375 px sans barre de défilement horizontale ``` ### Hors périmètre - Le regroupement des alertes à grand volume. L'instance réelle en annonce près de 1 700 ouvertes, dont 345 critiques : aucune liste de cartes ne tient à cette échelle, il faudra compter et regrouper côté API. Ticket distinct. - Le thème sombre. - Le ticket #53 (accent bleu ou cuivre, noir du bouton dérivé de l'encre) : la refonte suit les jetons tels qu'ils sont aujourd'hui.

marvin added the

labels

2026-09-08 08:51:27 +00:00

marvin commented

2026-09-08 08:51:27 +00:00

Author

Member

Maquettes validées le 8 septembre 2026 :

Les quatre écrans (Parc, Comparer, Qualité, fiche de site) : https://claude.ai/code/artifact/541d5d7a-1be5-442c-96a6-57d3ca337ed9
La revue visuelle dont sortent les vingt-six constats numérotés : https://claude.ai/code/artifact/24c6663a-4d26-4245-997f-bf89cf29a1e8

Les six défauts mécaniques du cinquième critère correspondent aux constats 01, 02, 03, 04, 05 et 06 de la revue.

Maquettes validées le 8 septembre 2026 : - Les quatre écrans (Parc, Comparer, Qualité, fiche de site) : https://claude.ai/code/artifact/541d5d7a-1be5-442c-96a6-57d3ca337ed9 - La revue visuelle dont sortent les vingt-six constats numérotés : https://claude.ai/code/artifact/24c6663a-4d26-4245-997f-bf89cf29a1e8 Les six défauts mécaniques du cinquième critère correspondent aux constats 01, 02, 03, 04, 05 et 06 de la revue.

marvin changed title from ~~[EF-11] Tableau de bord : surveiller et comparer sur deux �crans~~ to [EF-11] Tableau de bord : surveiller et comparer sur deux écrans

2026-09-08 08:53:24 +00:00

marvin referenced this issue from a commit

2026-09-08 14:08:47 +00:00

dashboard: corrige les six défauts d'affichage de la revue visuelle (#184)

marvin referenced this issue from a commit

2026-09-08 14:08:47 +00:00

dashboard: sépare surveiller et comparer, encode ce qui n'était qu'écrit (#184)

marvin referenced this issue from a commit

2026-09-08 14:08:47 +00:00

dashboard: centre le contenu, et fait taire les vides qui mentent (#184)

marvin referenced this issue from a commit

2026-09-08 14:08:47 +00:00