Ajoute la matrice des risques au PDF d'annexes

betagouv · Oct 28, 2024 · be10acd · be10acd
1 parent ca32a87
commit be10acd
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 94 deletions.
diff --git a/src/adaptateurs/adaptateurPdf.js b/src/adaptateurs/adaptateurPdf.js
@@ -78,8 +78,7 @@ const genereAnnexes = async ({
   referentiel,
 }) => {
   try {
-    const risquesPresents =
-      Object.keys(donneesRisques.risquesParNiveauGravite).length > 0;
+    const risquesPresents = Object.keys(donneesRisques.risques).length > 0;
 
     const [description, mesures, risques] = await Promise.all([
       genereHtml(

diff --git a/src/modeles/objetsPDF/objetPDFAnnexeRisques.js b/src/modeles/objetsPDF/objetPDFAnnexeRisques.js
@@ -4,13 +4,45 @@ class ObjetPDFAnnexeRisques {
   constructor(homologation, referentiel = Referentiel.creeReferentielVide()) {
     this.referentiel = referentiel;
     this.service = homologation;
+    this.risques = [
+      ...this.service.risquesGeneraux().tous(),
+      ...this.service.risquesSpecifiques().tous(),
+    ];
+  }
+
+  calculeGrille() {
+    const resultat = Array.from({ length: 4 }, () => Array(4).fill(null));
+
+    const positionVraisemblance = (risque) =>
+      this.referentiel.niveauxVraisemblance()[risque.niveauVraisemblance]
+        .position;
+
+    const positionGravite = (risque) =>
+      this.referentiel.niveauxGravite()[risque.niveauGravite].position;
+
+    const risquesCartographies = this.risques.filter(
+      (risque) =>
+        risque.niveauGravite &&
+        risque.niveauVraisemblance &&
+        positionVraisemblance(risque) > 0 &&
+        positionGravite(risque) > 0
+    );
+
+    risquesCartographies.forEach((risque) => {
+      const x = positionVraisemblance(risque) - 1;
+      const y = Math.abs(4 - positionGravite(risque));
+      resultat[y][x] = resultat[y][x] || [];
+      resultat[y][x].push(risque.identifiantNumeriqueRisque());
+    });
+    return resultat;
   }
 
   donnees() {
     return {
-      niveauxGravite: this.referentiel.infosNiveauxGraviteConcernes(true),
       nomService: this.service.nomService(),
-      risquesParNiveauGravite: this.service.risques.parNiveauGravite(),
+      risques: this.risques.map((r) => r.toJSON()),
+      grilleRisques: this.calculeGrille(),
+      matriceNiveauxRisque: this.referentiel.matriceNiveauxRisques(),
     };
   }
 }

diff --git a/src/pdf/modeles/annexeRisques.pug b/src/pdf/modeles/annexeRisques.pug
@@ -9,19 +9,49 @@ mixin niveau-criticite(idNiveau)
     .rond(class = couleur)
 
 block page
-  +boite-grise
+  +boite-grise('Cartographie des risques', 'cartographie')
+    p.type Évalué au départ
+    .matrice
+      span.legende.legende-y Gravit&eacute;
+      span.legende.legende-x Vraisemblance
+      .axe.axe-y
+        span 4
+        span 3
+        span 2
+        span 1
+      .axe.axe-x
+        span 1
+        span 2
+        span 3
+        span 4
+      .conteneur-matrice
+        each _, index in new Array(16).fill(0)
+          - const x = index % 4
+          - const y = Math.floor(index / 4)
+          - const classe = donneesRisques.matriceNiveauxRisque[x + 1][4 - y]
+          - const risquesPresent = donneesRisques.grilleRisques[y][x]
+          - const jointsAvecEllispe = (liste) => liste.length > 7 ? liste.splice(0,6).join(', ')+"&hellip;" : liste.join(', ')
+          - const libelleCellule = !risquesPresent ? "" : jointsAvecEllispe(risquesPresent)
+          .cellule-matrice(class=`${classe} ${index}`)!= libelleCellule
+    .legende-matrice
+      ul
+        - const niveaux = Object.entries(referentiel.niveauxRisque()).filter(([_, n]) => n.position >= 0).sort(([_, a], [__, b]) => a.position - b.position);
+        each niveau in niveaux
+          - const [id, descriptionNiveau] = niveau
+          li(class=id)
+            span.niveau!= descriptionNiveau.libelle + '&nbsp;:&nbsp;'
+            = descriptionNiveau.description
+
+  +boite-grise('Risques', 'liste-risques')
     ul.risques
-      each niveau in donneesRisques.niveauxGravite
-        if donneesRisques.risquesParNiveauGravite[niveau.identifiant]
-          each risque in donneesRisques.risquesParNiveauGravite[niveau.identifiant]
-            li.bloc-risque.bloc-indivisible
-              .contenu-niveau
-                +niveau-criticite(niveau.identifiant)
-                p.niveau= niveau.description
-              .contenu-risque
-                p.description!= risque.intitule
-                if referentiel.definitionRisque(risque.id)
-                  p.definition= referentiel.definitionRisque(risque.id)
-                if risque.commentaire
-                  p.commentaire #[strong Commentaire :] !{risque.commentaire}
-          hr
+      each risque in donneesRisques.risques
+        li.bloc-risque.bloc-indivisible
+          div(class=`identifiant-numerique ${risque.niveauRisque}`)= risque.identifiantNumerique
+          .contenu-risque
+            p.description!= risque.intitule
+            if referentiel.definitionRisque(risque.id)
+              p.definition= referentiel.definitionRisque(risque.id)
+            else
+              p.definition= risque.description
+            if risque.commentaire
+              p.commentaire #[strong Commentaire :] !{risque.commentaire}
diff --git a/src/pdf/modeles/ressources/styles.css b/src/pdf/modeles/ressources/styles.css
@@ -1207,3 +1207,189 @@ p {
 .tampon-homologation.desktop .conteneur-extras {
   margin-left: 164px;
 }
+
+.matrice {
+  position: relative;
+  width: fit-content;
+  margin-left: 48px;
+  margin-top: 12px;
+}
+
+.matrice .legende {
+  position: absolute;
+  color: #667892;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.matrice .legende-y {
+  top: 0;
+  left: -46px;
+}
+
+.matrice .legende-x {
+  bottom: -20px;
+  right: -28px;
+}
+
+.matrice .conteneur-matrice {
+  display: grid;
+  grid-template-columns: repeat(4, 81px);
+  column-gap: 3px;
+  grid-template-rows: repeat(4, 35px);
+  row-gap: 2px;
+  padding: 15px 13px 6px 6px;
+  border-bottom: 1px solid #cbd5e1;
+  border-left: 1px solid #cbd5e1;
+  width: fit-content;
+  position: relative;
+}
+
+.matrice .conteneur-matrice::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid #cbd5e1;
+  border-left: 1px solid #cbd5e1;
+  transform: rotate(45deg);
+  position: absolute;
+  top: 0;
+  left: -3px;
+}
+
+.matrice .conteneur-matrice::after {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid #cbd5e1;
+  border-left: 1px solid #cbd5e1;
+  transform: rotate(135deg);
+  position: absolute;
+  bottom: -3px;
+  right: 0;
+}
+
+.matrice .axe {
+  position: absolute;
+  display: flex;
+}
+
+.matrice .axe span {
+  font-size: 8px;
+  font-weight: 400;
+}
+
+.matrice .axe-y {
+  left: -16px;
+  flex-direction: column;
+  gap: 26px;
+  top: 38px;
+}
+
+.matrice .axe-x {
+  bottom: -18px;
+  left: 40px;
+  flex-direction: row;
+  gap: 80px;
+}
+
+.matrice .cellule-matrice {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  color: white;
+  text-align: center;
+}
+
+.matrice .cellule-matrice.faible {
+  background: #4cb963;
+}
+
+.matrice .cellule-matrice.moyen {
+  background: #faa72c;
+}
+
+.matrice .cellule-matrice.eleve {
+  background: #e32630;
+}
+
+.legende-matrice {
+  margin-top: 32px;
+}
+
+.legende-matrice ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 12px;
+}
+
+.legende-matrice li {
+  font-size: 0.813rem;
+  line-height: 1.125rem;
+  display: flex;
+  align-items: center;
+}
+
+.legende-matrice li:before {
+  content: '';
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+}
+
+.legende-matrice li.faible:before {
+  background-color: #4cb963;
+}
+
+.legende-matrice li.moyen:before {
+  background-color: #faa72c;
+}
+
+.legende-matrice li.eleve:before {
+  background-color: #e32630;
+}
+
+.legende-matrice .niveau {
+  margin-left: 4px;
+  font-weight: bold;
+}
+
+.liste-risques tbody td {
+  break-inside: unset;
+}
+
+.identifiant-numerique {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  padding: 1px 8px 3px;
+  align-items: center;
+  border-radius: 40px;
+  border: 1.5px solid #667892;
+  width: fit-content;
+  color: #667892;
+  background: white;
+  white-space: nowrap;
+  height: 21px;
+}
+
+.identifiant-numerique.faible {
+  border-color: #0c8626;
+  color: #0c8626;
+}
+
+.identifiant-numerique.moyen {
+  border-color: #faa72c;
+  color: #faa72c;
+}
+
+.identifiant-numerique.eleve {
+  border-color: #ff6584;
+  color: #ff6584;
+}