Improve stats map

mesadsfr · Jan 26, 2024 · 32e0ad2 · 32e0ad2
1 parent 7f45533
commit 32e0ad2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/mesads/templates/webpack/pages/stats.html b/mesads/templates/webpack/pages/stats.html
@@ -68,10 +68,15 @@
 
 <hr class="fr-mt-3w" />
 
+<h3>Carte de déploiement du registre ADS au niveau national</h3>
 <div id="map" style="width: 100%; height: 764px;"></div>
 <script src="leaflet/dist/leaflet.js"></script>
 <script src="./stats_map.ts"></script>
 
+<p class="fr-mt-3w">
+  Cette carte présente le nombre d'ADS enregistrées dans chaque département jusqu'à ce jour. Le nombre d'ADS estimé peut ne pas être exact, mais permet d'avoir une vue d'ensemble du déploiement du registre ADS au niveau national.
+</p>
+
 <hr class="fr-mt-3w" />
 
 <div class="fr-grid-row fr-grid-row--gutters">

diff --git a/mesads/templates/webpack/pages/stats_map.ts b/mesads/templates/webpack/pages/stats_map.ts
@@ -35,14 +35,12 @@ class InfoBox extends L.Control {
   };
 
   update = (props: APIProps | null) => {
-    const title = props
-      ? `Nombre d'ADS pour ${props.code_insee} - ${props.nom}`
-      : `Nombre d'ADS`;
+    const title = props ? `${props.nom} (${props.code_insee})` : `Nombre d'ADS`;
     const content = props
       ? this.getInfoboxContent(props.ads_count, props.expected_ads_count)
-      : `Survolez une région pour afficher les détails`;
+      : `Survolez un département pour <br/>afficher le nombre d'ADS enregistrées`;
     this._div.innerHTML = `
-          <div class="fr-tile fr-enlarge-link fr-tile--horizontal">
+          <div class="fr-tile fr-enlarge-link fr-tile--horizontal" style="opacity: 0.8">
             <div class="fr-tile__body">
                 <h4 class="fr-tile__title">${title}</h4>
                 <p class="fr-tile__desc">${content}</p>
@@ -53,16 +51,18 @@ class InfoBox extends L.Control {
 
   getInfoboxContent = (ads_count: number, expected_ads_count: number) => {
     const infos = [
-      `${ads_count} ADS ${ads_count > 1 ? "enregistrées" : "enregistrée"}`,
+      `&rarr; ${ads_count} ADS ${
+        ads_count > 1 ? "enregistrées" : "enregistrée"
+      }`,
     ];
     if (expected_ads_count !== null) {
       infos.push(
-        `${expected_ads_count} ADS au total dans la préfecture (estimation)`
+        `&rarr; ${expected_ads_count} ADS au total <br />dans la préfecture (estimation)`
       );
       infos.push(
-        `<strong>Taux de remplissage: ${Math.round(
+        `<div class="fr-mt-1w"><strong>Taux de remplissage: ${Math.round(
           (ads_count / expected_ads_count) * 100
-        )}%</strong>`
+        )}%</strong></div>`
       );
     } else {
       infos.push("Nombre d'ADS total inconnu pour cette préfecture");
@@ -158,10 +158,9 @@ function displayStatsMap(data: APIResponse) {
     }
     description += "</ul>";
     div.innerHTML = `
-      <div class="fr-tile fr-enlarge-link fr-tile--horizontal">
+      <div class="fr-tile fr-enlarge-link fr-tile--horizontal" style="opacity: 0.8">
         <div class="fr-tile__body">
-            <h4 class="fr-tile__title">Légende</h4>
-            ${description}
+          ${description}
         </div>
       </div>
       `;