Détails des résultats (#606)

* rework charts/tables sections

* update theme prop of StatDonut component

* make tables scrollable under certain window width

* display compliant criteria count in summary cards

* remove chart.js and chart components

* restore report notes component

* fix front report type

* typo in tables first column

* update changelgo

CHANGELOG.md

@@ -4,6 +4,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ## 18/01/2023
 
+### Autres changements ⚙️
+
+- Améliorer l’accessibilité et la compréhension de l’onglet du détail des résultats ([#606](https://github.com/DISIC/Ara/pull/606))
+
 ### Corrections 🐛
 
 - Corrige l’affichage des blocs de page de la page de paramètres sur Safari ([#608](https://github.com/DISIC/Ara/pull/608))

confiture-rest-api/src/audits/audit.service.ts

@@ -11,7 +11,7 @@ import {
 } from "@prisma/client";
 import { nanoid } from "nanoid";
 import sharp from "sharp";
-import { omit, pick, setWith } from "lodash";
+import { omit, pick, setWith, uniqBy } from "lodash";
 
 import { PrismaService } from "../prisma.service";
 import * as RGAA from "../rgaa.json";
@@ -740,19 +740,21 @@ export class AuditService {
       notInScopeContent: audit.notInScopeContent,
       notes: audit.notes,
 
-      errorCount: results.filter(
-        (r) => r.status === CriterionResultStatus.NOT_COMPLIANT
-      ).length,
-
-      blockingErrorCount: results.filter(
-        (r) =>
-          r.status === CriterionResultStatus.NOT_COMPLIANT &&
-          r.userImpact === CriterionResultUserImpact.BLOCKING
-      ).length,
-
-      totalCriteriaCount,
-
-      applicableCriteriaCount: applicableCriteria.length,
+      criteriaCount: {
+        total: totalCriteriaCount,
+        compliant: compliantCriteria.length,
+        notCompliant: notCompliantCriteria.length,
+        blocking: uniqBy(
+          results.filter(
+            (r) =>
+              r.status === CriterionResultStatus.NOT_COMPLIANT &&
+              r.userImpact === CriterionResultUserImpact.BLOCKING
+          ),
+          (r) => `${r.topic}.${r.criterium}`
+        ).length,
+        applicable: applicableCriteria.length,
+        notApplicable: notApplicableCriteria.length
+      },
 
       accessibilityRate,
 

confiture-rest-api/src/audits/dto/audit-report.dto.ts

@@ -37,24 +37,23 @@ export class AuditReportDto {
   accessibilityRate: number;
 
   /**
-   * @example 8
-   */
-  errorCount: number;
-
-  /**
-   * @example 6
-   */
-  blockingErrorCount: number;
-
-  /**
-   * @example 54
-   */
-  applicableCriteriaCount: number;
-
-  /**
-   * @example 106
-   */
-  totalCriteriaCount: number;
+   * @example {
+   *  total: 106;
+   *  compliant: 30;
+   *  notCompliant: 46;
+   *  blocking: 12;
+   *  applicable: 76;
+   *  notApplicable: 30;
+   * }
+   */
+  criteriaCount: {
+    total: number;
+    compliant: number;
+    notCompliant: number;
+    blocking: number;
+    applicable: number;
+    notApplicable: number;
+  };
 
   /** Global distribution of criteria by result */
   resultDistribution: ResultDistribution;

confiture-web-app/package.json

@@ -17,7 +17,6 @@
     "@sentry/tracing": "^7.37.2",
     "@sentry/vue": "^7.37.2",
     "@unhead/vue": "^1.5.3",
-    "chart.js": "4.1.0",
     "dompurify": "^2.4.1",
     "jwt-decode": "^3.1.2",
     "ky": "^0.33.0",

confiture-web-app/src/components/StatDonut.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+export type StatDonutTheme = "blue" | "red" | "green";
+
 defineProps<{
   value: number;
   total: number;
   unit?: string;
-  // "france" for blue | "marianne" for red
-  theme?: string;
+  theme?: StatDonutTheme;
   size?: "sm";
 }>();
 </script>
@@ -43,20 +44,27 @@ defineProps<{
   );
 }
 
-.theme-france {
+.theme-blue {
   background: conic-gradient(
     var(--background-active-blue-france) 0deg var(--pie-deg),
     var(--background-contrast-info) var(--pie-deg) 360deg
   );
 }
 
-.theme-marianne {
+.theme-red {
   background: conic-gradient(
     var(--red-marianne-main-472) 0deg var(--pie-deg),
     var(--background-action-low-pink-macaron) var(--pie-deg) 360deg
   );
 }
 
+.theme-green {
+  background: conic-gradient(
+    var(--border-plain-success) 0deg var(--pie-deg),
+    var(--background-contrast-green-emeraude) var(--pie-deg) 360deg
+  );
+}
+
 .card-hole {
   display: flex;
   align-items: center;

confiture-web-app/src/components/SummaryCard.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { useSlots, computed } from "vue";
 import { useUniqueId } from "../composables/useUniqueId";
-import StatDonut from "./StatDonut.vue";
+import StatDonut, { StatDonutTheme } from "./StatDonut.vue";
 
 defineProps<{
   title: string;
-  description: string;
+  description?: string;
   value: number;
   total: number;
   unit?: string;
-  theme?: string;
+  theme?: StatDonutTheme;
   disabled?: boolean;
 }>();
 
@@ -35,7 +35,7 @@ const uniqueId = useUniqueId();
         <p class="fr-h6 fr-mb-1v card-title">
           {{ title }}
         </p>
-        <p class="fr-text--xs fr-mb-0 card-description">
+        <p v-if="description" class="fr-text--xs fr-mb-0 card-description">
           {{ description }}
         </p>
       </div>

confiture-web-app/src/components/audit/AuditGenerationHeader.vue

@@ -24,6 +24,7 @@ import DuplicateModal from "./DuplicateModal.vue";
 import SaveIndicator from "./SaveIndicator.vue";
 import SummaryCard from "../SummaryCard.vue";
 import CopyIcon from "../icons/CopyIcon.vue";
+import { StatDonutTheme } from "../StatDonut.vue";
 
 defineProps<{
   auditName: string;
@@ -35,7 +36,7 @@ defineProps<{
     value: number;
     total: number;
     unit?: string;
-    theme?: string;
+    theme?: StatDonutTheme;
   }[];
   editUniqueId?: string;
 }>();

confiture-web-app/src/components/overview/AuditStep.vue

@@ -83,7 +83,7 @@ const auditIsInProgress = computed(() => {
             :value="complianceLevel"
             :total="100"
             unit="%"
-            theme="france"
+            theme="blue"
             size="sm"
           />
 
@@ -98,7 +98,7 @@ const auditIsInProgress = computed(() => {
         <StatDonut
           :value="notCompliantCriteriaCount"
           :total="getCriteriaCount(audit.auditType)"
-          theme="marianne"
+          theme="red"
           size="sm"
         />