Harmonise les cartes avec les statistiques de l'audit (#661)

* harmonize summary cards with audit stats * add compliant count in summary cards * fix accessibilityRate return value * fix display of disabled + detailed summary cards in report
DISIC · Feb 22, 2024 · b0e4237 · b0e4237
1 parent b2009b9
commit b0e4237
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 - Ajoute des liens d’accès dans le menu déroulant d’un audit sur la page "Mes audits" ([#658](https://github.com/DISIC/Ara/pull/658))
 
+### Corrections 🐛
+
+- Corrige l’affichage du taux de conformité dans les cartes des donuts et harmonise les cartes entre l’audit et le rapport ([#661](https://github.com/DISIC/Ara/pull/661))
+
 ## 16/02/2024
 
 ### Corrections 🐛

diff --git a/confiture-rest-api/src/audits/audit.service.ts b/confiture-rest-api/src/audits/audit.service.ts
@@ -720,9 +720,10 @@ export class AuditService {
       criteria.some((c) => c.status === CriterionResultStatus.NOT_COMPLIANT)
     );
 
-    const accessibilityRate = Math.round(
-      (compliantCriteria.length / applicableCriteria.length) * 100
-    );
+    const accessibilityRate =
+      Math.round(
+        (compliantCriteria.length / applicableCriteria.length) * 100
+      ) || 0;
 
     const totalCriteriaCount = CRITERIA_BY_AUDIT_TYPE[audit.auditType].length;
 

diff --git a/confiture-web-app/src/components/SummaryCard.vue b/confiture-web-app/src/components/SummaryCard.vue
@@ -21,8 +21,11 @@ const uniqueId = useUniqueId();
 </script>
 
 <template>
-  <div class="card" :class="{ 'card-disabled': disabled }">
-    <div class="fr-p-3w card-main-content">
+  <div class="card">
+    <div
+      class="fr-p-3w card-main-content"
+      :class="{ 'card-main-content-disabled': disabled }"
+    >
       <StatDonut
         :value="value"
         :total="total"
@@ -32,16 +35,14 @@ const uniqueId = useUniqueId();
       />
 
       <div class="card-info">
-        <p class="fr-h6 fr-mb-1v card-title">
-          {{ title }}
-        </p>
+        <p class="fr-h6 fr-mb-1v card-title" v-html="title" />
         <p v-if="description" class="fr-text--xs fr-mb-0 card-description">
           {{ description }}
         </p>
       </div>
     </div>
 
-    <section v-if="showDetails" class="fr-accordion">
+    <section v-if="showDetails" class="fr-accordion card-accordion">
       <h3 class="fr-accordion__title">
         <button
           class="fr-accordion__btn"
@@ -69,6 +70,10 @@ const uniqueId = useUniqueId();
   gap: 1.5rem;
 }
 
+.card-main-content-disabled :deep(*:not(.card-accordion)) {
+  color: var(--text-disabled-grey);
+}
+
 .card-title {
   color: var(--text-title-grey);
 }
@@ -81,10 +86,6 @@ const uniqueId = useUniqueId();
   color: var(--text-mention-grey);
 }
 
-.card-disabled :deep(*) {
-  color: var(--text-disabled-grey);
-}
-
 @media (max-width: 992px) {
   .card {
     flex-direction: column;

diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -32,7 +32,7 @@ defineProps<{
   auditEditionDate: string | null;
   keyInfos: {
     title: string;
-    description: string;
+    description?: string;
     value: number;
     total: number;
     unit?: string;
@@ -152,7 +152,7 @@ const isDevMode = useDevMode();
 
 const systemStore = useSystemStore();
 
-const unfinishedAudit = computed(() => resultStore.auditProgress < 1);
+const auditIsInProgress = computed(() => resultStore.auditProgress < 1);
 
 const showAuditProgressBar = computed(() => {
   return (
@@ -336,16 +336,12 @@ onMounted(() => {
       <div :class="`fr-col-12 fr-col-md-${12 / keyInfos.length}`">
         <SummaryCard
           :title="keyInfos[0].title"
-          :description="
-            unfinishedAudit
-              ? '(Disponible à la fin de l’audit)'
-              : keyInfos[0].description
-          "
-          :value="unfinishedAudit ? 0 : keyInfos[0].value"
+          :description="keyInfos[0].description"
+          :value="auditIsInProgress ? 0 : keyInfos[0].value"
           :total="keyInfos[0].total"
           :unit="keyInfos[0].unit"
-          :theme="unfinishedAudit ? undefined : keyInfos[0].theme"
-          :disabled="unfinishedAudit"
+          :theme="keyInfos[0].theme"
+          :disabled="auditIsInProgress"
         />
       </div>
       <div

diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
@@ -14,19 +14,22 @@ const stats = computed(() => {
     ...(report.data?.auditType === AuditType.FULL
       ? [
           {
-            title: "Conformité au RGAA",
-            description: "RGAA version 4.1",
-            value: report.data!.accessibilityRate,
+            title: "Taux global de conformité",
+            description: auditInProgress.value
+              ? "(Disponible à la fin de l’audit)"
+              : "RGAA version 4.1",
+            value: report.data?.accessibilityRate,
             total: 100,
             unit: "%",
             hasDetails: true,
-            theme: "blue" as StatDonutTheme
+            theme: "blue" as StatDonutTheme,
+            disabled: auditInProgress.value
           }
         ]
       : []),
 
     {
-      title: "Critères non conformes",
+      title: "Critères<br/> non conformes",
       description: `Dont ${report.data?.criteriaCount.blocking} ${pluralize(
         "bloquant",
         "bloquants",
@@ -38,9 +41,9 @@ const stats = computed(() => {
       theme: "red" as StatDonutTheme
     },
     {
-      title: "Critères conformes",
+      title: "Critères<br/> conformes",
       value: report.data?.criteriaCount.compliant,
-      total: report.data?.criteriaCount.applicable,
+      total: report.data?.criteriaCount.total,
       theme: "green" as StatDonutTheme
     }
   ];
@@ -93,24 +96,24 @@ const auditInProgress = computed(
   <template v-if="report.data">
     <h2>Synthèse des résultats</h2>
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div :class="`fr-col-12 fr-col-lg-${12 / stats.length}`">
+      <div
+        v-for="stat in stats"
+        :key="stat.title"
+        :class="`fr-col-12 fr-col-lg-${12 / stats.length}`"
+      >
         <SummaryCard
-          :title="stats[0].title"
-          :description="
-            auditInProgress
-              ? '(Disponible à la fin de l’audit)'
-              : stats[0].description
-          "
-          :value="auditInProgress ? 0 : stats[0].value!"
-          :total="stats[0].total!"
-          :unit="stats[0].unit"
-          :theme="stats[0].theme"
-          :disabled="auditInProgress"
+          :title="stat.title"
+          :description="stat.description"
+          :value="stat.value!"
+          :total="stat.total!"
+          :unit="stat.unit"
+          :theme="stat.theme"
+          :disabled="stat.disabled"
         >
-          <template #accordion-title>
+          <template v-if="stat.hasDetails" #accordion-title>
             En savoir plus sur le calcul du taux
           </template>
-          <template #accordion-content>
+          <template v-if="stat.hasDetails" #accordion-content>
             <p>
               Le taux global de conformité au RGAA est calculé de la manière
               suivante :
@@ -127,21 +130,6 @@ const auditInProgress = computed(
           </template>
         </SummaryCard>
       </div>
-
-      <div
-        v-for="stat in stats.slice(1)"
-        :key="stat.title"
-        :class="`fr-col-12 fr-col-lg-${12 / stats.length}`"
-      >
-        <SummaryCard
-          :title="stat.title"
-          :description="stat.description"
-          :value="stat.value!"
-          :total="stat.total!"
-          :unit="stat.unit"
-          :theme="stat.theme"
-        />
-      </div>
     </div>
 
     <h2 class="fr-mt-8w">Détails des résultats</h2>

diff --git a/confiture-web-app/src/composables/useAuditStats.ts b/confiture-web-app/src/composables/useAuditStats.ts
@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import { countBy, uniqWith } from "lodash-es";
+import { uniqWith } from "lodash-es";
 
 import {
   CriteriumResultStatus,
@@ -11,67 +11,8 @@ import { useResultsStore } from "../store";
 export function useAuditStats() {
   const store = useResultsStore();
 
-  const applicableCriteriaCount = computed(
-    () =>
-      Object.values(
-        countBy(
-          store.allResults
-            ?.filter((r) => {
-              return r.status === CriteriumResultStatus.NOT_APPLICABLE;
-            })
-            .map((r) => {
-              return { ...r, tc: `${r.topic}.${r.criterium}` };
-            }),
-          (r) => r.tc
-        )
-      ).filter((r) => r !== store.pagesCount).length
-  );
-
-  const notApplicableCriteriaCount = computed(
-    () =>
-      Object.values(
-        countBy(
-          store.allResults
-            ?.filter((r) => {
-              return r.status === CriteriumResultStatus.NOT_APPLICABLE;
-            })
-            .map((r) => {
-              return { ...r, tc: `${r.topic}.${r.criterium}` };
-            }),
-          (r) => r.tc
-        )
-      ).filter((r) => r === store.pagesCount).length
-  );
-
-  const notCompliantCriteriaCount = computed(
-    () =>
-      uniqWith(
-        store.allResults?.filter((r) => {
-          return r.status === CriteriumResultStatus.NOT_COMPLIANT;
-        }),
-        (a, b) => {
-          return a.topic === b.topic && a.criterium === b.criterium;
-        }
-      ).length
-  );
-
-  const blockingCriteriaCount = computed(
-    () =>
-      uniqWith(
-        store.allResults?.filter((r) => {
-          return (
-            r.status === CriteriumResultStatus.NOT_COMPLIANT &&
-            r.userImpact === CriterionResultUserImpact.BLOCKING
-          );
-        }),
-        (a, b) => {
-          return a.topic === b.topic && a.criterium === b.criterium;
-        }
-      ).length
-  );
-
-  const complianceLevel = computed(() => {
-    const groupedCriteria =
+  const groupedCriteria = computed(() => {
+    return (
       store.allResults?.reduce<Record<string, CriteriumResult[]>>((acc, c) => {
         const key = `${c.topic}.${c.criterium}`;
         if (acc[key]) {
@@ -80,9 +21,50 @@ export function useAuditStats() {
           acc[key] = [c];
         }
         return acc;
-      }, {}) || {};
+      }, {}) || {}
+    );
+  });
+
+  const applicableCriteria = computed(() => {
+    return Object.values(groupedCriteria.value).filter((criteria) =>
+      criteria.some((c) => c.status !== CriteriumResultStatus.NOT_APPLICABLE)
+    );
+  });
+
+  const notApplicableCriteriaCount = computed(() => {
+    return Object.values(groupedCriteria.value).filter((criteria) => {
+      return criteria.every((c) => c.status === "NOT_APPLICABLE");
+    }).length;
+  });
 
-    const applicableCriteria = Object.values(groupedCriteria).filter(
+  const compliantCriteriaCount = computed(() => {
+    return applicableCriteria.value.filter((criteria) =>
+      criteria.every(
+        (c) =>
+          c.status === CriteriumResultStatus.COMPLIANT ||
+          c.status === CriteriumResultStatus.NOT_APPLICABLE
+      )
+    ).length;
+  });
+
+  const notCompliantCriteriaCount = computed(() => {
+    return applicableCriteria.value.filter((criteria) =>
+      criteria.some((c) => c.status === CriteriumResultStatus.NOT_COMPLIANT)
+    ).length;
+  });
+
+  const blockingCriteriaCount = computed(() => {
+    return applicableCriteria.value.filter((criteria) =>
+      criteria.some(
+        (c) =>
+          c.status === CriteriumResultStatus.NOT_COMPLIANT &&
+          c.userImpact === CriterionResultUserImpact.BLOCKING
+      )
+    ).length;
+  });
+
+  const complianceLevel = computed(() => {
+    const applicableCriteria = Object.values(groupedCriteria.value).filter(
       (criteria) =>
         criteria.some((c) => c.status !== CriteriumResultStatus.NOT_APPLICABLE)
     );
@@ -95,8 +77,10 @@ export function useAuditStats() {
       )
     );
 
-    return Math.round(
-      (compliantCriteria.length / applicableCriteria.length) * 100
+    return (
+      Math.round(
+        (compliantCriteria.length / applicableCriteria.length) * 100
+      ) || 0
     );
   });
 
@@ -118,8 +102,9 @@ export function useAuditStats() {
   });
 
   return {
-    applicableCriteriaCount,
+    groupedCriteria,
     notApplicableCriteriaCount,
+    compliantCriteriaCount,
     notCompliantCriteriaCount,
     blockingCriteriaCount,
     complianceLevel,