Corrige l'affichage du taux de conformité avant la fin de l'audit (#676)

* dont display compliance rate if audit is in progress in summary cards * add disabled theme to stat donut * set disabled state in data definition * update changelog
DISIC · Mar 7, 2024 · 728abc9 · 728abc9
1 parent bd97d60
commit 728abc9
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 ### Corrections 🐛
 
 - Améliorer l’affichage sur mobile du header sticky sur la page de génération de l’audit ([#678](https://github.com/DISIC/Ara/pull/678))
+- Corrige l’affichage des donuts des statistiques parfois désactivés ([#676](https://github.com/DISIC/Ara/pull/676))
 
 ### Autres changements ⚙️
 

diff --git a/confiture-web-app/src/components/StatDonut.vue b/confiture-web-app/src/components/StatDonut.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-export type StatDonutTheme = "blue" | "red" | "green";
+export type StatDonutTheme = "blue" | "red" | "green" | "grey";
 
 defineProps<{
   value: number;
@@ -65,6 +65,13 @@ defineProps<{
   );
 }
 
+.theme-grey {
+  background: conic-gradient(
+    var(--background-disabled-grey) 0deg var(--pie-deg),
+    var(--background-disabled-grey) var(--pie-deg) 360deg
+  );
+}
+
 .card-hole {
   display: flex;
   align-items: center;

diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -187,8 +187,6 @@ const isDevMode = useDevMode();
 
 const systemStore = useSystemStore();
 
-const auditIsInProgress = computed(() => resultStore.auditProgress < 1);
-
 const showAuditProgressBar = computed(() => {
   return (
     !auditStore.currentAudit?.publicationDate ||
@@ -426,11 +424,11 @@ onMounted(() => {
         <SummaryCard
           :title="keyInfos[0].title"
           :description="keyInfos[0].description"
-          :value="auditIsInProgress ? 0 : keyInfos[0].value"
+          :value="keyInfos[0].value"
           :total="keyInfos[0].total"
           :unit="keyInfos[0].unit"
           :theme="keyInfos[0].theme"
-          :disabled="auditIsInProgress"
+          :disabled="keyInfos[0].disabled"
         />
       </div>
       <div

diff --git a/confiture-web-app/src/components/report/OnboardingModal.vue b/confiture-web-app/src/components/report/OnboardingModal.vue
@@ -108,6 +108,7 @@ watch(currentStep, () => {
                   class="stat-donut"
                   :value="accessibilityRate"
                   :total="100"
+                  theme="blue"
                   unit="%"
                 />
 

diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
@@ -18,7 +18,7 @@ const stats = computed(() => {
             description: auditInProgress.value
               ? "(Disponible à la fin de l’audit)"
               : "RGAA version 4.1",
-            value: report.data?.accessibilityRate,
+            value: auditInProgress.value ? 0 : report.data?.accessibilityRate,
             total: 100,
             unit: "%",
             hasDetails: true,
@@ -107,7 +107,7 @@ const auditInProgress = computed(
           :value="stat.value!"
           :total="stat.total!"
           :unit="stat.unit"
-          :theme="stat.theme"
+          :theme="stat.disabled ? 'grey' : stat.theme"
           :disabled="stat.disabled"
         >
           <template v-if="stat.hasDetails" #accordion-title>

diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -9,7 +9,6 @@ import AuditGenerationHeader from "../../components/audit/AuditGenerationHeader.
 import AuditGenerationPageCriteria from "../../components/audit/AuditGenerationPageCriteria.vue";
 import PageMeta from "../../components/PageMeta";
 import BackLink from "../../components/ui/BackLink.vue";
-import { StatDonutTheme } from "../../components/StatDonut.vue";
 import { useAuditStats } from "../../composables/useAuditStats";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
 import rgaa from "../../criteres.json";
@@ -99,10 +98,11 @@ const headerInfos = computed(() => [
           description: auditIsInProgress.value
             ? "(Disponible à la fin de l’audit)"
             : "RGAA version 4.1",
-          value: complianceLevel.value,
+          value: auditIsInProgress.value ? 0 : complianceLevel.value,
           total: 100,
           unit: "%",
-          theme: "blue" as StatDonutTheme
+          theme: auditIsInProgress.value ? "grey" : "blue",
+          disabled: auditIsInProgress.value
         }
       ]
     : []),
@@ -115,13 +115,13 @@ const headerInfos = computed(() => [
     )} pour l’usager`,
     value: notCompliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
-    theme: "red" as StatDonutTheme
+    theme: "red"
   },
   {
     title: "Critères<br/> conformes",
     value: compliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
-    theme: "green" as StatDonutTheme
+    theme: "green"
   }
 ]);