Affichage des résultats des régions sur une carte

2024-06-16 15:12:13 +02:00
parent e48c94760d
commit 8cb75d6b36
5 changed files with 166 additions and 17 deletions
--- a/nupes-elections-front/package-lock.json
+++ b/nupes-elections-front/package-lock.json
@@ -17,8 +17,10 @@
        "@testing-library/user-event": "^13.5.0",
        "highcharts": "^11.4.3",
        "highcharts-react-official": "^3.2.1",
+        "leaflet": "^1.9.4",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
+        "react-leaflet": "^4.2.1",
        "react-router-dom": "^6.23.1",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
@@ -4053,6 +4055,17 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.16.1",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
@@ -13913,6 +13926,12 @@
        "shell-quote": "^1.8.1"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -16798,6 +16817,20 @@
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "license": "MIT"
    },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
--- a/nupes-elections-front/package.json
+++ b/nupes-elections-front/package.json
@@ -12,8 +12,10 @@
    "@testing-library/user-event": "^13.5.0",
    "highcharts": "^11.4.3",
    "highcharts-react-official": "^3.2.1",
+    "leaflet": "^1.9.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
    "react-router-dom": "^6.23.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
--- a/nupes-elections-front/src/Elections2024.js
+++ b/nupes-elections-front/src/Elections2024.js
@@ -13,6 +13,9 @@ import * as Highcharts from 'highcharts'
 import highchartsItem from 'highcharts/modules/item-series'
 import HighchartsReact from 'highcharts-react-official'
 import {useEffect, useState} from "react"
+import {GeoJSON, MapContainer, Popup, TileLayer, useMap} from "react-leaflet"
+
+import 'leaflet/dist/leaflet.css'

 highchartsItem(Highcharts)

@@ -39,18 +42,7 @@ function ResultatsTable({blocs, nuances, listes, resultats, siegesParListe}) {
        </TableHead>
        <TableBody>
          {listes_triees.map((liste) => (
-            <TableRow key={liste.numero}>
-              <TableCell>{liste.numero}</TableCell>
-              <TableCell>{liste.nom}</TableCell>
-              <TableCell sx={{backgroundColor: nuances.filter(nuance => nuance.code === liste.nuance)[0].couleur, padding: "0.2em"}}></TableCell>
-              <TableCell>{liste.nuance}</TableCell>
-              <TableCell sx={{backgroundColor: blocs.filter(bloc => bloc.nom === liste.bloc)[0].couleur, padding: "0.2em"}}></TableCell>
-              <TableCell>{liste.bloc}</TableCell>
-              <TableCell>{voix_listes[liste.numero] || 0}</TableCell>
-              <TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.inscrits).toFixed(2)} %</TableCell>
-              <TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.exprimes).toFixed(2)} %</TableCell>
-              <TableCell>{siegesParListe[liste.numero]}</TableCell>
-            </TableRow>
+            <ListeRow key={liste.numero} liste={liste} voix={voix_listes[liste.numero] || 0} resultats={resultats} siegesParListe={siegesParListe} blocs={blocs} nuances={nuances} />
          ))}
        </TableBody>
      </Table>
@@ -59,6 +51,25 @@ function ResultatsTable({blocs, nuances, listes, resultats, siegesParListe}) {
 }


+function ListeRow({liste, voix, resultats, siegesParListe, blocs, nuances}) {
+  const bloc = blocs.filter(bloc => bloc.nom === liste.bloc)[0]
+  const nuance = nuances.filter(nuance => nuance.code === liste.nuance)[0]
+
+  return <TableRow key={liste.numero}>
+    <TableCell>{liste.numero}</TableCell>
+    <TableCell>{liste.nom}</TableCell>
+    <TableCell sx={{backgroundColor: nuance.couleur, padding: "0.2em"}}></TableCell>
+    <TableCell>{liste.nuance}</TableCell>
+    <TableCell sx={{backgroundColor: bloc.couleur, padding: "0.2em"}}></TableCell>
+    <TableCell>{liste.bloc}</TableCell>
+    <TableCell>{voix}</TableCell>
+    <TableCell>{(100 * voix / resultats.inscrits).toFixed(2)} %</TableCell>
+    <TableCell>{(100 * voix / resultats.exprimes).toFixed(2)} %</TableCell>
+    <TableCell>{siegesParListe[liste.numero]}</TableCell>
+  </TableRow>
+}
+
+
 function ParticipationTable({resultats}) {
  return <>
    <TableContainer component={Paper}>
@@ -114,6 +125,96 @@ function ParticipationTable({resultats}) {
  </>
 }

+function RegionGeoJSON({resultats_region, listes, blocs, nuances, grouperParBloc = false}) {
+  const voix_listes = resultats_region?.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_region.voix_listes[liste.numero] || 0
+    voixParNuance[liste.nuance] += resultats_region.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
+      }
+    }
+  }
+
+  return <GeoJSON
+    key={resultats_region.region.code_insee}
+    data={{'type': "Feature", 'properties': resultats_region, '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>
+      <ul>
+        {listes_triees.slice(0, 5).map(liste =>
+          <li key={liste.numero}>{liste.nom} : {voix_listes[liste.numero]} ({(100 * voix_listes[liste.numero] / resultats_region.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 <>
+    {regions.map(region => <RegionGeoJSON key={region.region.code_insee} resultats_region={region} listes={listes} blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />)}
+  </>
+}
+
+function Carte({typeResultats, resultats, listes, blocs, nuances, grouperParBloc = false}) {
+  const center = [46.603354, 1.888334]
+
+  return <>
+    <MapContainer center={center} zoom={6} style={{height: "90vh"}}>
+      <TileLayer
+        attribution='&copy; Les contributeur⋅rices <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <ContenuCarte typeResultats={typeResultats} resultats={resultats} listes={listes} blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />
+  </MapContainer>
+  </>
+}
+
 export default function Election2024({typeResultats = "france"}) {
  const {zoneId} = useParams()

@@ -321,8 +422,10 @@ export default function Election2024({typeResultats = "france"}) {
    title: {
      text: `Résultats des élections européennes 2024 : ${zoneName}`,
    },
-    legend: {
-      labelFormat: '{name} <span style="opacity: 0.4">{x}</span>'
+    tooltip: {
+      formatter: function () {
+        return `<span>${this.x}</span> : <strong>${this.y}</strong> voix (${(100 * this.y / resultats.exprimes).toFixed(2)} %)<br>`
+      }
    },
    xAxis: {
      categories: categoriesVoix,
@@ -355,5 +458,6 @@ export default function Election2024({typeResultats = "france"}) {
    />
    <ResultatsTable blocs={blocs} nuances={nuances} listes={listes} resultats={resultats} siegesParListe={siegesParListe} />
    <ParticipationTable resultats={resultats} />
+    <Carte typeResultats={typeResultats} resultats={resultats} listes={listes} blocs={blocs} nuances={nuances} voixParBloc={voixParBloc} voixParNuance={voixParNuance} grouperParBloc={grouperParBloc} />
  </>
-};
+}
--- a/nupes/scripts/export_resultats_2024.py
+++ b/nupes/scripts/export_resultats_2024.py
@@ -73,6 +73,11 @@ def exporter_resultats_france(engine: Engine, verbose: bool = False) -> None:
            session.add(resultats_france)

        resultats_dict = {
+            'france': {
+                'regions': [reg.code_insee for reg in session.execute(select(Region)).scalars().all()],
+                'departements': [dpt.code_insee for dpt in session.execute(select(Departement)).scalars().all()],
+                'circonscriptions': [circo.id for circo in session.execute(select(Circonscription)).scalars().all()],
+            },
            "inscrits": resultats_france.inscrits,
            "votants": resultats_france.votants,
            "abstentions": resultats_france.abstentions,
@@ -105,7 +110,11 @@ def exporter_resultats_regions(engine: Engine, verbose: bool = False) -> None:
        regions_iterator = tqdm(regions, desc="Régions") if verbose else regions
        for region in regions_iterator:
            region_json = {'code_insee': region.code_insee, 'nom': region.libelle,
-                           'departements': [dpt.code_insee for dpt in region.departements]}
+                           'departements': [dpt.code_insee for dpt in region.departements],
+                           'circonscriptions':
+                               [circo.id for circo in session.execute(
+                                   select(Circonscription).join(Departement).filter_by(region_code=region.code_insee))
+                                .scalars().all()]}
            regions_json.append(region_json)

            resultats_region = session.execute(select(ResultatsRegion).filter_by(region_id=region.code_insee)) \
@@ -318,6 +327,7 @@ def exporter_resultats_bureaux_vote(engine: Engine, verbose: bool = False) -> No
        iterator = tqdm(bureaux_vote, desc="Bureaux de vote") if verbose else bureaux_vote
        for bureau_vote in iterator:
            bureau_vote_json = {'id': bureau_vote.id,
+                                'libelle': bureau_vote.libelle,
                                'commune': bureau_vote.commune_code,
                                'circonscription': bureau_vote.circo_code}
            bureaux_vote_json.append(bureau_vote_json)
--- a/nupes/scripts/import_geographie.py
+++ b/nupes/scripts/import_geographie.py
@@ -251,7 +251,7 @@ def importer_bureaux_vote(engine: Engine, verbose: bool = False) -> None:
            numero_circo = int(bv_dict['codeCirconscription'][len(dpt_code):])
            code_circo = f"{dpt_code}-{numero_circo:02d}"
            bv_id = bv_dict['id_bv'].split()[0]
-            bv_libelle = f"Bureau {code_bv}"
+            bv_libelle = f"Bureau {code_bv} de {bv_dict['nomCommune']}"

            if not session.execute(select(Commune).filter_by(code_insee=code_commune)).scalar_one_or_none():
                print("Commune non trouvée avec le code", code_commune, "et le nom", bv_dict['nomCommune'])