Change la légende effectifs pour harmoniser avec le pdf

src/lib/components/DataCircoAugmented/AugmentedEducation.svelte

@@ -93,9 +93,28 @@
     /*Carte de l'effectif des écoles primaires et secondaires*/
     let hovertemplate =
       "%{customdata.appellation_officielle}<br>Statut : %{customdata.secteur_public_prive_libe}<br>%{customdata.nature_uai_libe}<br>Effectif : %{customdata.effectifs}<extra></extra>"
-    let color = dataEducation.etablissements_premier_et_second_degre.map((d) =>
-      d.effectifs < 2 ? "grey" : colorScaleEffectif(d.effectifs),
+    let color = dataEducation.etablissements_premier_et_second_degre.map(
+      (d) => {
+        if (d.effectifs < 100) {
+          return "grey"
+        } else if (d.effectifs >= 100 && d.effectifs < 200) {
+          return "#FFAB01" // Correspond à la couleur pour 100 à 199
+        } else if (d.effectifs >= 200 && d.effectifs < 300) {
+          return "#FF553E" // Correspond à la couleur pour 200 à 299
+        } else if (d.effectifs >= 300 && d.effectifs < 500) {
+          return "#C50140" // Correspond à la couleur pour 300 à 499
+        } else if (d.effectifs >= 500 && d.effectifs < 800) {
+          return "#D40EC3" // Correspond à la couleur pour 500 à 799
+        } else if (d.effectifs >= 800 && d.effectifs < 1000) {
+          return "#7800F1" // Correspond à la couleur pour 800 à 999
+        } else if (d.effectifs >= 1000) {
+          return "#1132FC" // Correspond à la couleur pour > 1000
+        } else {
+          return "#686868" // Correspond à la couleur pour n.c.
+        }
+      },
     )
+
     plot_map(
       "plot_effectifs",
       dataEducation.etablissements_premier_et_second_degre,
@@ -267,6 +286,41 @@
         <div class="">
           <div id="plot_effectifs" class="flex justify-center" />
         </div>
+        <div
+          class="mb-4 mt-2 flex items-center justify-center pl-6 font-sans text-sm"
+        >
+          <span class="mr-2"> Nombre d'élèves&nbsp;:</span>
+          <div class=" mr-1 inline-block h-2 w-2 border-8 border-[#FFAB01]" />
+          &lt;&nbsp;100
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#FF553E]"
+          />
+          100 à 199
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#C50140]"
+          />
+          200 à 299
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#D40EC3]"
+          />
+          300 à 499
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#7800F1]"
+          />
+          500 à 799
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#1132FC]"
+          />
+          800 à 999
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#00E0D7]"
+          />
+          >&nbsp;1000
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#686868]"
+          />
+          n.c.
+        </div>
       </div>
     </section>