Affichage des départements par région

nupes-elections-front/src/Elections2024.js

@@ -12,7 +12,7 @@ import Switch from '@mui/material/Switch'
 import * as Highcharts from 'highcharts'
 import highchartsItem from 'highcharts/modules/item-series'
 import HighchartsReact from 'highcharts-react-official'
-import {useEffect, useState} from "react"
+import {useEffect, useMemo, useState} from "react"
 import {GeoJSON, MapContainer, Popup, TileLayer, useMap} from "react-leaflet"
 
 import 'leaflet/dist/leaflet.css'
@@ -167,7 +167,7 @@ function RegionGeoJSON({resultats_region, listes, blocs, nuances, grouperParBloc
 
   return <GeoJSON
     key={resultats_region.region.code_insee}
-    data={{'type': "Feature", 'properties': resultats_region, 'geometry': resultats_region.geometry}}
+    data={{'type': "Feature", 'geometry': resultats_region.geometry}}
     style={{fillColor: couleur, fillOpacity: 0.5, color: 'white'}}>
     <Popup>
       <strong><a href={`/elections/europeennes/2024/region/${resultats_region.region.code_insee}/`}>{resultats_region.region.nom}</a></strong>
@@ -179,26 +179,105 @@ function RegionGeoJSON({resultats_region, listes, blocs, nuances, grouperParBloc
   </GeoJSON>
 }
 
+
+function DepartementGeoJSON({resultats_departement, listes, blocs, nuances, grouperParBloc = false}) {
+  const voix_listes = resultats_departement?.voix_listes ?? {}
+  const listes_triees = listes.toSorted((l1, l2) => {
+    return (voix_listes[l2.numero] || 0) - (voix_listes[l1.numero] || 0)
+  })
+
+  const voixParBloc = {}
+  const voixParNuance = {}
+  for (let bloc of blocs) {
+    voixParBloc[bloc.nom] = 0
+  }
+  for (let nuance of nuances) {
+    voixParNuance[nuance.code] = 0
+  }
+
+  for (let liste of listes) {
+    voixParBloc[liste.bloc] += resultats_departement.voix_listes[liste.numero] || 0
+    voixParNuance[liste.nuance] += resultats_departement.voix_listes[liste.numero] || 0
+  }
+
+  let couleur = 'grey'
+  if (grouperParBloc) {
+    let maxVoix = 0
+    for (let bloc of blocs) {
+      if (voixParBloc[bloc.nom] > maxVoix) {
+        maxVoix = voixParBloc[bloc.nom]
+        couleur = bloc.couleur
+      }
+    }
+  }
+  else {
+    let maxVoix = 0
+    for (let nuance of nuances) {
+      if (voixParNuance[nuance.code] > maxVoix) {
+        maxVoix = voixParNuance[nuance.code]
+        couleur = nuance.couleur
+      }
+    }
+  }
+
+  console.log(resultats_departement.departement.code_insee, resultats_departement.geometry)
+
+  return <GeoJSON
+    key={resultats_departement.departement.code_insee}
+    data={{'type': "Feature", 'geometry': resultats_departement.geometry}}
+    style={{fillColor: couleur, fillOpacity: 0.5, color: 'white'}}>
+    <Popup>
+      <strong><a href={`/elections/europeennes/2024/departement/${resultats_departement.departement.code_insee}/`}>{resultats_departement.departement.nom}</a></strong>
+      <ul>
+        {listes_triees.slice(0, 5).map(liste =>
+          <li key={liste.numero}>{liste.nom} : {voix_listes[liste.numero]} ({(100 * voix_listes[liste.numero] / resultats_departement.exprimes).toFixed(2)} %)</li>)}
+      </ul>
+    </Popup>
+  </GeoJSON>
+}
+
 function ContenuCarte({typeResultats, resultats, listes, blocs, nuances, grouperParBloc = false}) {
-  const [regions, setRegions] = useState([])
-
-  useEffect(() => {
-    if (!resultats || !resultats.france || !resultats.france.regions)
-      return
-
-    setRegions(regions => [])
-
-    resultats.france.regions.forEach(region_code => {
-      fetch(`/data/resultats/europeennes2024/regions/${region_code}.json`).then(response => response.json())
-        .then(region => setRegions(regions => [...regions, region]))
-    })
-  }, [typeResultats, resultats])
-
   const map = useMap()
 
-  return <>
+  const [resultatsZones, setResultatsZones] = useState([])
-    {regions.map(region => <RegionGeoJSON key={region.region.code_insee} resultats_region={region} listes={listes} blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />)}
+
-  </>
+  const [typeZone, zones] = useMemo(() => {
+    if (typeResultats === "france") {
+      return ["regions", resultats?.france?.regions ?? []]
+    }
+    else if (typeResultats === "regions") {
+      return ["departements", resultats?.region?.departements ?? []]
+    }
+  }, [typeResultats, resultats])
+
+  useEffect(() => {
+    if (!zones)
+      return
+
+    setResultatsZones(resultatsZones => [])
+
+    zones.forEach(zone_id => {
+      fetch(`/data/resultats/europeennes2024/${typeZone}/${zone_id}.json`).then(response => response.json())
+        .then(resultatsZone => setResultatsZones(resultatsZones => [...resultatsZones, resultatsZone]))
+    })
+  }, [typeZone, zones, resultats])
+
+  if (typeZone === "regions") {
+    return <>
+      {resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
+        <RegionGeoJSON key={resultatsZone.region.code_insee}
+                       resultats_region={resultatsZone} listes={listes} blocs={blocs} nuances={nuances}
+                       grouperParBloc={grouperParBloc}/>)}
+    </>
+  }
+  else if (typeZone === "departements") {
+    return <>
+      {resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
+        <DepartementGeoJSON key={resultatsZone.departement.code_insee}
+                       resultats_departement={resultatsZone} listes={listes} blocs={blocs} nuances={nuances}
+                       grouperParBloc={grouperParBloc}/>)}
+    </>
+  }
 }
 
 function Carte({typeResultats, resultats, listes, blocs, nuances, grouperParBloc = false}) {
@@ -280,8 +359,8 @@ export default function Election2024({typeResultats = "france"}) {
     }
 
     for (let liste of listes) {
-      parBloc[liste.bloc] += resultats.voix_listes[liste.numero] || 0
+      parBloc[liste.bloc] += resultats?.voix_listes[liste.numero] ?? 0
-      parNuance[liste.nuance] += resultats.voix_listes[liste.numero] || 0
+      parNuance[liste.nuance] += resultats?.voix_listes[liste.numero] ?? 0
     }
 
     setVoixParBloc(parBloc)
@@ -314,7 +393,7 @@ export default function Election2024({typeResultats = "france"}) {
     let siegesAffectes = 0
     let totalVoix = resultats.exprimes
     for (let liste of listes) {
-      const voix = resultats.voix_listes[liste.numero] || 0
+      const voix = resultats?.voix_listes[liste.numero] ?? 0
       if (voix / resultats.exprimes < 0.05 && !retirerSeuil) {
         // Barre des 5 % non franchie
         totalVoix -= voix
@@ -329,7 +408,7 @@ export default function Election2024({typeResultats = "france"}) {
       return
 
     for (let liste of listesElues) {
-      const voix = resultats.voix_listes[liste.numero] || 0
+      const voix = resultats?.voix_listes[liste.numero] ?? 0
       sieges[liste.numero] = Math.floor(MAX_SIEGES * voix / totalVoix)
       siegesAffectes += sieges[liste.numero]
     }
@@ -340,7 +419,7 @@ export default function Election2024({typeResultats = "france"}) {
       let listeElue = null
       for (let liste of listesElues) {
         if (sieges[liste.numero] < MAX_SIEGES) {
-          const voix = resultats.voix_listes[liste.numero] || 0
+          const voix = resultats?.voix_listes[liste.numero] ?? 0
           const moyenne = voix / (sieges[liste.numero] + 1)
           if (moyenne > maxMoyenne) {
             maxMoyenne = moyenne