g2/enervision
Watch
8
1
Fork
You've already forked enervision
 0
Code Issues 9 Pull requests Projects 1 Releases Packages Wiki Activity Actions

[Front] Tableau de bord — les trois écrans branchés sur l'API #24

New issue
Closed
opened 2026-09-01 09:26:54 +00:00 by florian · 2 comments
florian commented 2026-09-01 09:26:54 +00:00
Member
Copy link

Exigence couverte

EF-11

Épreuve servie

EC01 — Architecture

Charge estimée

3 j.h

Ce qu'on veut obtenir

Le tableau de bord de la fenêtre : trois écrans — parc, site, qualité — qui
consomment l'API de #94, plus l'écran de connexion déjà livré (#25). C'est la
preuve visible du bout-en-bout pour le jury.

Critères d'acceptation

  • Écran parc : les sept sites, consommation agrégée, profil horaire, compte d'alertes, fraîcheur par site.
  • Écran site : série de mesures, prévision H+1 et sa référence, recommandations, traçabilité d'une valeur jusqu'à la lecture bronze.
  • Écran qualité : disponibilité par site, part de points imputés, journal de collecte, alertes.
  • La valeur brute et la méthode d'imputation restent lisibles à côté de la valeur retenue ; les points imputés se distinguent sur la courbe (EF-04).
  • Seuls les sites autorisés apparaissent ; un 401 renvoie à la connexion (ENF-01, ENF-02). Aucune donnée en dur dans les composants.
  • RGAA : pas de distinction par la couleur seule, navigation clavier, contraste AA, axe-core sans violation critique ; rendu correct à 360, 768 et 1280 px.

Comment on le vérifie

Tests tests de composants (API bouchonnée) ; tests/e2e/ pour le parcours des trois écrans
Commande le serveur de développement du front sur l'API de #94
Preuve captures des trois écrans, en commentaire de ce ticket

Hors périmètre

  • L'API et le jeu de fixtures : #94.
  • L'écran de prévisions dédié : #118 (Portée/Post-jury).
  • Pages admin / contact / RGPD / profil : #16, #19, #20, #21 (Portée/Post-jury).
  • L'écran de connexion, déjà livré : #25.
### Exigence couverte EF-11 ### Épreuve servie EC01 — Architecture ### Charge estimée 3 j.h ### Ce qu'on veut obtenir Le tableau de bord de la fenêtre : trois écrans — parc, site, qualité — qui consomment l'API de #94, plus l'écran de connexion déjà livré (#25). C'est la preuve visible du bout-en-bout pour le jury. ### Critères d'acceptation - [x] Écran parc : les sept sites, consommation agrégée, profil horaire, compte d'alertes, fraîcheur par site. - [ ] Écran site : série de mesures, prévision H+1 et sa référence, recommandations, traçabilité d'une valeur jusqu'à la lecture bronze. - [ ] Écran qualité : disponibilité par site, part de points imputés, journal de collecte, alertes. - [ ] La valeur brute et la méthode d'imputation restent lisibles à côté de la valeur retenue ; les points imputés se distinguent sur la courbe (EF-04). - [ ] Seuls les sites autorisés apparaissent ; un 401 renvoie à la connexion (ENF-01, ENF-02). Aucune donnée en dur dans les composants. - [ ] RGAA : pas de distinction par la couleur seule, navigation clavier, contraste AA, axe-core sans violation critique ; rendu correct à 360, 768 et 1280 px. ### Comment on le vérifie Tests tests de composants (API bouchonnée) ; tests/e2e/ pour le parcours des trois écrans Commande le serveur de développement du front sur l'API de #94 Preuve captures des trois écrans, en commentaire de ce ticket ### Hors périmètre - L'API et le jeu de fixtures : #94. - L'écran de prévisions dédié : #118 (Portée/Post-jury). - Pages admin / contact / RGPD / profil : #16, #19, #20, #21 (Portée/Post-jury). - L'écran de connexion, déjà livré : #25.
image.png
17 KiB
01-ecran-parc.jpg
77 KiB
02-ecran-parc-tableau.jpg
72 KiB
03-ecran-site.jpg
58 KiB
04-tracabilite-ef04.jpg
64 KiB
05-ecran-qualite.jpg
52 KiB
06-alertes.jpg
61 KiB
07-journal-de-collecte.jpg
31 KiB
08-points-reconstitues-ef04.jpg
54 KiB
image.png 01-ecran-parc.jpg 02-ecran-parc-tableau.jpg 03-ecran-site.jpg 04-tracabilite-ef04.jpg 05-ecran-qualite.jpg 06-alertes.jpg 07-journal-de-collecte.jpg 08-points-reconstitues-ef04.jpg
florian added this to the EnerVision project 2026-09-01 09:26:54 +00:00
olivier self-assigned this 2026-09-01 13:26:16 +00:00
gabriel added the due date 2026-09-11 2026-09-03 09:35:53 +00:00
gabriel removed the due date 2026-09-11 2026-09-03 09:40:40 +00:00
marvin self-assigned this 2026-09-03 11:20:46 +00:00
gabriel added the due date 2026-09-09 2026-09-03 12:40:58 +00:00
gabriel changed title from [Front] Dashboard - Page de consultation des graphs to [Front] Tableau de bord — les trois écrans branchés sur l'API 2026-09-03 13:56:50 +00:00
gabriel commented 2026-09-03 13:57:59 +00:00
Member
Copy link

Recadré : le ticket portait « page de graphs » sans exigence rattachée. Il porte maintenant EF-11 — les trois écrans (parc, site, qualité) branchés sur l'API de #94. L'écran de prévisions dédié est #118. Répartition Marvin/Olivier : #94 = API + fixtures (Marvin), #24 = les trois écrans (Olivier).

Recadré : le ticket portait « page de graphs » sans exigence rattachée. Il porte maintenant EF-11 — les trois écrans (parc, site, qualité) branchés sur l'API de #94. L'écran de prévisions dédié est #118. Répartition Marvin/Olivier : #94 = API + fixtures (Marvin), #24 = les trois écrans (Olivier).
marvin commented 2026-09-04 14:40:04 +00:00
Member
Copy link

Captures des écrans, en preuve

Prises sur le tableau de bord réel (npm run dev), branché sur le jeu de
démonstration engendré depuis les fixtures de l'API — les valeurs affichées
sont donc exactement celles que /v1/… rend.

Écran Parc

Les quatre indicateurs de tête, la comparaison des sept sites sur 7 jours avec
sa ligne de moyenne, et le sélecteur qui sert de légende.

Le bandeau rouge sous le graphique est l'état demandé par la maquette : Bureau
Bordeaux Centre a une sonde muette, sa série sort en 503, et les six autres
restent tracées. C'est la raison d'être d'un appel par site.

Écran Parc

Le tableau sous le graphique porte chaque valeur que le survol révèle — la vue
table qu'exige toute visualisation. Les quatre paliers du glossaire y sont tous
exercés (normal, vigilance, tension, surcharge), et le site muet affiche « — »
plutôt qu'un zéro : un capteur qui ne répond pas n'est pas un site au repos.

Tableau des sites

Écran Site

Usine Nantes Rezé, à 96,2 % de charge : palier de surcharge, marge négative, et
le dépassement prévu vers 17:22 (EF-08). La courbe porte sa référence de
comparaison en pointillé (EF-07) et la prévision H+1 sous le graphique.

Écran Site

Traçabilité d'une valeur jusqu'à la lecture bronze (EF-04)

Un clic sur une barre ouvre la provenance du point : valeur affichée, valeur
lue en bronze, méthode de reconstitution et qualité conclue par le pipeline.
Ici les deux valeurs coïncident et la méthode est « mesure directe » — le cas
d'une valeur non reconstituée.

Traçabilité

Sur un site qui a des trous, les points reconstitués se distinguent en
permanence sur la courbe, pas seulement au survol : Centre Commercial Lille,
02 h et 03 h en teinte claire, avec la légende « mesuré / reconstitué (EF-04) ».

Points reconstitués

Écran Qualité

Disponibilité moyenne face à sa cible, part de points reconstitués, et les
sites sous la cible nommés plutôt que comptés. Le tableau va du pire au
meilleur — un écran de qualité montre d'abord ce qui ne va pas — et « sous la
cible » se lit en toutes lettres à côté de la puce, jamais par la couleur seule.

Écran Qualité

Les alertes, ouvertes d'abord et la plus sévère en tête. Chacune porte sa
sévérité en toutes lettres, son type, son origine et l'exigence qu'elle
sert — c'est ce qui permet de remonter d'une alerte à la règle qui l'a
voulue. La résolue reste visible, en retrait.

Alertes

Journal de collecte

Ouvert depuis la disponibilité d'un site, sur la fiche comme dans le tableau
ci-dessus : c'est ce chiffre-là qu'il explique. Trois jours, et pour chacun ce
qui était attendu, ce qui a manqué, et la ventilation des relevés retenus par
méthode de reconstitution (ADR 0006).

Journal de collecte

Où en est le ticket

Critère
Écran parc fait
Écran site fait
Écran qualité fait
Valeur brute et méthode lisibles, points imputés distingués (EF-04) fait
Seuls les sites autorisés apparaissent (ENF-02) non tenu, voir plus bas
Un 401 renvoie à la connexion (ENF-01) fait — modale de reprise, qui recharge l'écran une fois la session reprise
RGAA — pas de couleur seule, clavier, contraste AA fait
RGAA — axe-core sans violation critique reste à faire
Rendu à 360, 768 et 1280 px reste à vérifier

ENF-02 ne se corrige pas côté front. dashboard/autorisation.py rend les
sept sites à tout utilisateur authentifié, et le dit franchement en
commentaire : l'exigence attend une table associant identité, rôle et sites
autorisés, qui n'existe dans aucune migration. Le filtrage est déjà isolé dans
cette seule fonction — le jour où la table arrive, c'est le seul endroit à
changer. À ouvrir comme ticket à part.

Comment reproduire ces captures

cd services/dashboard
npm ci
VITE_AUTH_MOCK=1 npm run dev        # $env:VITE_AUTH_MOCK = '1' sous PowerShell

Aucune API ni PostgreSQL à lancer. Se connecter avec un des comptes de
démonstration (marvin.g2@enervision.fr / mdp-44).

Le jeu de données est engendré depuis les fixtures de l'API, pas écrit à la
main : les fonctions de dashboard/repository.py reçoivent une connexion et
l'ignorent, on les appelle donc à vide et on sérialise par les schémas
Pydantic. Procédure de régénération dans
docs/runbooks/donnees-de-demonstration.md. Ni ce jeu ni son module n'entrent
dans le paquet de production — tests/unit/paquet-de-production.test.js
construit pour de vrai et le vérifie.

Demandes de fusion
#139 écran Parc en revue
#140 écran Site en revue
#156 écran Qualité ouverte
#155 alertes et journal de collecte ouverte

À fusionner dans cet ordre. Le jeu de démonstration est sur
marvin/24-demo-donnees, empilée sur #155.

🤖 Generated with Claude Code

## Captures des écrans, en preuve Prises sur le tableau de bord réel (`npm run dev`), branché sur le jeu de démonstration engendré depuis les fixtures de l'API — les valeurs affichées sont donc **exactement** celles que `/v1/…` rend. ### Écran Parc Les quatre indicateurs de tête, la comparaison des sept sites sur 7 jours avec sa ligne de moyenne, et le sélecteur qui sert de légende. Le bandeau rouge sous le graphique est l'état demandé par la maquette : **Bureau Bordeaux Centre a une sonde muette**, sa série sort en 503, et les six autres restent tracées. C'est la raison d'être d'un appel par site. ![Écran Parc](/attachments/4b960ec8-1679-4c78-bf61-ac3340594090) Le tableau sous le graphique porte chaque valeur que le survol révèle — la vue table qu'exige toute visualisation. Les quatre paliers du glossaire y sont tous exercés (normal, vigilance, tension, surcharge), et le site muet affiche « — » plutôt qu'un zéro : un capteur qui ne répond pas n'est pas un site au repos. ![Tableau des sites](/attachments/99e5783a-eb43-4a38-aa1b-a55ca9f8b8d3) ### Écran Site Usine Nantes Rezé, à 96,2 % de charge : palier de surcharge, marge négative, et le **dépassement prévu vers 17:22** (EF-08). La courbe porte sa référence de comparaison en pointillé (EF-07) et la prévision H+1 sous le graphique. ![Écran Site](/attachments/8255a115-a844-4df2-9e29-adf7bf9435fd) ### Traçabilité d'une valeur jusqu'à la lecture bronze (EF-04) Un clic sur une barre ouvre la provenance du point : valeur affichée, **valeur lue en bronze**, méthode de reconstitution et qualité conclue par le pipeline. Ici les deux valeurs coïncident et la méthode est « mesure directe » — le cas d'une valeur non reconstituée. ![Traçabilité](/attachments/7ba53eec-4c35-4c62-b0e4-62f18034e875) Sur un site qui a des trous, les points reconstitués se distinguent **en permanence** sur la courbe, pas seulement au survol : Centre Commercial Lille, 02 h et 03 h en teinte claire, avec la légende « mesuré / reconstitué (EF-04) ». ![Points reconstitués](/attachments/5437b626-1592-44a2-9a4a-d457a5436daf) ### Écran Qualité Disponibilité moyenne face à sa cible, part de points reconstitués, et les sites sous la cible **nommés** plutôt que comptés. Le tableau va du pire au meilleur — un écran de qualité montre d'abord ce qui ne va pas — et « sous la cible » se lit en toutes lettres à côté de la puce, jamais par la couleur seule. ![Écran Qualité](/attachments/7274a0f8-c41b-4ec3-bba5-d96620f9b6cf) Les alertes, ouvertes d'abord et la plus sévère en tête. Chacune porte sa sévérité en toutes lettres, son type, son origine et **l'exigence qu'elle sert** — c'est ce qui permet de remonter d'une alerte à la règle qui l'a voulue. La résolue reste visible, en retrait. ![Alertes](/attachments/43dd9c71-a81f-4424-a748-40c4d6516efa) ### Journal de collecte Ouvert depuis la disponibilité d'un site, sur la fiche comme dans le tableau ci-dessus : c'est ce chiffre-là qu'il explique. Trois jours, et pour chacun ce qui était attendu, ce qui a manqué, et la ventilation des relevés retenus par méthode de reconstitution (ADR 0006). ![Journal de collecte](/attachments/03a4cc87-6924-468e-b5be-8df26cfd702c) --- ## Où en est le ticket | Critère | | |---|---| | Écran parc | fait | | Écran site | fait | | Écran qualité | fait | | Valeur brute et méthode lisibles, points imputés distingués (EF-04) | fait | | Seuls les sites autorisés apparaissent (ENF-02) | **non tenu**, voir plus bas | | Un 401 renvoie à la connexion (ENF-01) | fait — modale de reprise, qui recharge l'écran une fois la session reprise | | RGAA — pas de couleur seule, clavier, contraste AA | fait | | RGAA — axe-core sans violation critique | **reste à faire** | | Rendu à 360, 768 et 1280 px | **reste à vérifier** | **ENF-02 ne se corrige pas côté front.** `dashboard/autorisation.py` rend les sept sites à tout utilisateur authentifié, et le dit franchement en commentaire : l'exigence attend une table associant identité, rôle et sites autorisés, qui n'existe dans aucune migration. Le filtrage est déjà isolé dans cette seule fonction — le jour où la table arrive, c'est le seul endroit à changer. À ouvrir comme ticket à part. ## Comment reproduire ces captures ```bash cd services/dashboard npm ci VITE_AUTH_MOCK=1 npm run dev # $env:VITE_AUTH_MOCK = '1' sous PowerShell ``` Aucune API ni PostgreSQL à lancer. Se connecter avec un des comptes de démonstration (`marvin.g2@enervision.fr` / `mdp-44`). Le jeu de données est **engendré depuis les fixtures de l'API**, pas écrit à la main : les fonctions de `dashboard/repository.py` reçoivent une connexion et l'ignorent, on les appelle donc à vide et on sérialise par les schémas Pydantic. Procédure de régénération dans `docs/runbooks/donnees-de-demonstration.md`. Ni ce jeu ni son module n'entrent dans le paquet de production — `tests/unit/paquet-de-production.test.js` construit pour de vrai et le vérifie. ## Demandes de fusion | | | | |---|---|---| | #139 | écran Parc | en revue | | #140 | écran Site | en revue | | #156 | écran Qualité | ouverte | | #155 | alertes et journal de collecte | ouverte | À fusionner dans cet ordre. Le jeu de démonstration est sur `marvin/24-demo-donnees`, empilée sur #155. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
develop
main
lenaic/heure-locale
justine/72-garde-terraform
justine/69-stockage-archive-azure
lenaic/44-manuels-echec
olivier/44-runbook-reentrainement
justine/37-inference-prevision-servie
lenaic/176-montages-fichiers
gabriel/112-dashboard-chaine-donnee
lenaic/bancs-faux-negatif
lenaic/172-sauvegarde-observable
olivier/36-entrainement-modele
marvin/24-demo-donnees
marvin/25-connexion-session
lenaic/148-chaine-tableau-de-bord
olivier/148-chaine-tableau-de-bord
marvin/94-api-mock-et-tableau-de-bord
lenaic/0-dossier-architecture
lenaic/outillage-skills
No results found.
Labels
Clear labels   
Compat/Breaking
Breaking change that won't be backward compatible

  
EC01
Preuve pour l'épreuve Architecture

  
EC02
Preuve pour l'épreuve Management

  
EC03
Preuve pour l'épreuve CI/CD

  
EC04
Preuve pour l'épreuve Cloud

  
EC05
Preuve pour l'épreuve Data et BI

  
EC06
Preuve pour l'épreuve IA

  
Kind/BDD
BDD

  
Kind/Back
Back

  
Kind/Bug
Something is not working

  
Kind/CICD
CICD

  
Kind/Cloud
Cloud

  
Kind/Contenu
Contenu

  
Kind/Data
Data

  
Kind/Documentation
Documentation changes

  
Kind/Enhancement
Improve existing functionality

  
Kind/Feature
New functionality

  
Kind/Front
Front

  
Kind/IA
IA

  
Kind/Infra
Serveur, déploiement, chaîne, supervision

  
Kind/Monitoring
Monitoring

  
Kind/Security
This is security issue

  
Kind/Testing
Issue or pull request related to testing

  
Portée/Post-jury
Périmètre documenté, hors de la fenêtre du 11/09. Repris après le jury. Rien nest supprimé.

  
Priority
Critical
 The priority is critical

  
Priority
High
 The priority is high

  
Priority
Low
 The priority is low

  
Priority
Medium
 The priority is medium

  
Reviewed
Confirmed
 Issue has been confirmed

  
Reviewed
Duplicate
 This issue or pull request already exists

  
Reviewed
Invalid
 Invalid issue

  
Reviewed
Won't Fix
 This issue won't be fixed

  
Status
Abandoned
 Somebody has started to work on this but abandoned work

  
Status
Blocked
 Something is blocking this issue or pull request

  
Status
Need More Info
 Feedback is required to reproduce issue or to continue work

  
ops/alerte
Alerte d'exploitation (relais Grafana, #42)

No labels
Compat/Breaking
EC01
EC02
EC03
EC04
EC05
EC06
Kind/BDD
Kind/Back
Kind/Bug
Kind/CICD
Kind/Cloud
Kind/Contenu
Kind/Data
Kind/Documentation
Kind/Enhancement
Kind/Feature
Kind/Front
Kind/IA
Kind/Infra
Kind/Monitoring
Kind/Security
Kind/Testing
Portée/Post-jury
Priority
Critical
Priority
High
Priority
Low
Priority
Medium
Reviewed
Confirmed
Reviewed
Duplicate
Reviewed
Invalid
Reviewed
Won't Fix
Status
Abandoned
Status
Blocked
Status
Need More Info
ops/alerte
Milestone
Clear milestone
No items
Projects
Clear projects
No items
No project
EnerVision
Assignees
Clear assignees
No assignees
olivier
marvin
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".
2026-09-09
Depends on
#38 [EF-10] API REST et mandataire
g2/enervision
Reference
g2/enervision#24
No description provided.