Séparation des résultats par tour

2024-06-20 18:36:52 +02:00
parent 63e2366837
commit 3d60013670
5 changed files with 243 additions and 157 deletions
--- a/nupes-elections-front/src/ElectionsEuropeennes2024.js
+++ b/nupes-elections-front/src/ElectionsEuropeennes2024.js
@ -16,7 +16,7 @@ import 'leaflet/dist/leaflet.css'

 highchartsItem(Highcharts)

-export default function Election2024() {
+export default function ElectionsEuropeennes2024() {
  const {typeResultats, zoneId} = useParams()

  const [grouperParBloc, setGrouperParBloc] = useState(false)
@ -25,7 +25,8 @@ export default function Election2024() {
  const [nuances, setNuances] = useState([])
  const [listes, setListes] = useState([])
  const [resultats, setResultats] = useState([])
-  const [typeZone, setTypeZone] = useState("region")
+  const [typeSousZone, setTypeSousZone] = useState("region")
+  const tour = 1

  useEffect(() => {
    fetch("/data/resultats/europeennes/2024/blocs.json").then(response => response.json())
@ -46,12 +47,20 @@ export default function Election2024() {
    }
  }, [typeResultats, zoneId])

-  const nomZone = useMemo(() => getNomZone(typeResultats, resultats),
-    [typeResultats, resultats])
+  const zoneInfo = useMemo(() => resultats?.zone ?? {}, [resultats])
+  const nomZone = useMemo(() => getNomZone(typeResultats, zoneInfo), [typeResultats, zoneInfo])

-  const [voixParBloc, voixParNuance] = regrouperVoix(resultats.voix, listes, blocs, nuances)
+  const donnees = useMemo(() => {
+    if (tour === 1)
+      return resultats?.tour1 ?? {}
+    else if (tour === 2)
+      return resultats?.tour2 ?? {}
+    else
+      return {}
+  }, [resultats, tour])
+  const [voixParBloc, voixParNuance] = regrouperVoix(donnees.voix, listes, blocs, nuances)

-  const siegesParListe = calculerSieges(listes, resultats, retirerSeuil ? 0 : 0.05)
+  const siegesParListe = calculerSieges(listes, donnees, retirerSeuil ? 0 : 0.05)
  const [siegesParBloc, siegesParNuance] = regrouperVoix(siegesParListe, listes, blocs, nuances)

  return <>
@ -59,22 +68,21 @@ export default function Election2024() {
      <Toolbar>
        <GroupementParBloc grouperParBloc={grouperParBloc} setGrouperParBloc={setGrouperParBloc} />
        <RetirerSeuil retirerSeuil={retirerSeuil} setRetirerSeuil={setRetirerSeuil} />
-        <SelectionAffichage typeResultats={typeResultats} typeZone={typeZone} setTypeZone={setTypeZone} />
+        <SelectionAffichage typeResultats={typeResultats} typeSousZone={typeSousZone} setTypeSousZone={setTypeSousZone} />
      </Toolbar>
    </AppBar>
    <Container>
      <HistogrammeVoix titre={`Résultats des élections européennes 2024 : ${nomZone}`}
-                       resultats={resultats} voixParNuance={voixParNuance} voixParBloc={voixParBloc}
+                       resultats={donnees} voixParNuance={voixParNuance} voixParBloc={voixParBloc}
                       blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />
      <CompositionHemicycle titre={`Eurodéputé⋅es français⋅es dans l'hémicycle européen 2024 : ${nomZone}`}
                            blocs={blocs} nuances={nuances} siegesParBloc={siegesParBloc} siegesParNuance={siegesParNuance}
                            grouperParBloc={grouperParBloc} />
-      <TableauResultatsEuropeennes blocs={blocs} nuances={nuances} listes={listes} resultats={resultats} siegesParListe={siegesParListe} />
-      <TableauParticipation resultats={resultats} />
-      <CarteResultats typeElection={"europeennes"} anneeElection={"2024"}
-                      typeResultats={typeResultats} resultats={resultats} typeZone={typeZone}
-                      candidats={listes} blocs={blocs} nuances={nuances}
-                      voixParBloc={voixParBloc} voixParNuance={voixParNuance} grouperParBloc={grouperParBloc} />
+      <TableauResultatsEuropeennes blocs={blocs} nuances={nuances} listes={listes} resultats={donnees} siegesParListe={siegesParListe} />
+      <TableauParticipation resultats={donnees} />
+      <CarteResultats typeElection={"europeennes"} anneeElection={"2024"} typeResultats={typeResultats} zoneInfo={zoneInfo}
+                      typeSousZone={typeSousZone} candidats={listes} blocs={blocs} nuances={nuances} tour={tour}
+                      grouperParBloc={grouperParBloc} />
    </Container>
  </>
 }
--- a/nupes-elections-front/src/includes/composants_elections.js
+++ b/nupes-elections-front/src/includes/composants_elections.js
@ -184,23 +184,37 @@ export function RetirerSeuil({retirerSeuil, setRetirerSeuil}) {
                           label="Retirer le seuil des 5 %" />
 }

-export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
+export function SelectionTour({tour, setTour}) {
+  return <FormControl>
+    <InputLabel>
+      Zone à afficher
+  </InputLabel>
+    <Select value={tour}
+            onChange={event => setTour(parseInt(event.target.value.toString()))}
+            label="Tour">
+      <MenuItem value="1">Tour 1</MenuItem>
+      <MenuItem value="2">Tour 2</MenuItem>
+    </Select>
+  </FormControl>
+}
+
+export function SelectionAffichage({typeResultats, typeSousZone, setTypeSousZone}) {
  const items = useMemo(() => {
    const items = []
    if (typeResultats === "france") {
-      setTypeZone("region")
+      setTypeSousZone("region")
      items.push(<MenuItem value="region">Région</MenuItem>)
    }

    if (typeResultats === "france" || typeResultats === "region") {
      if (typeResultats !== "france")
-        setTypeZone("departement")
+        setTypeSousZone("departement")
      items.push(<MenuItem value="departement">Département</MenuItem>)
    }

    if (typeResultats === "france" || typeResultats === "region" || typeResultats === "departement") {
      if (typeResultats !== "france" && typeResultats !== "region")
-        setTypeZone("circonscription")
+        setTypeSousZone("circonscription")
      items.push(<MenuItem value="circonscription">Circonscription</MenuItem>)
    }

@ -209,19 +223,19 @@ export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
    }

    if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
-      setTypeZone("bureau_vote")
+      setTypeSousZone("bureau_vote")
      items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
    }

    return items
-  }, [typeResultats, setTypeZone])
+  }, [typeResultats, setTypeSousZone])

  return <FormControl>
    <InputLabel>
      Zone à afficher
  </InputLabel>
-    <Select value={typeZone}
-            onChange={event => setTypeZone(event.target.value)}
+    <Select value={typeSousZone}
+            onChange={event => setTypeSousZone(event.target.value)}
            label="Zone à afficher">
      {items}
    </Select>
@ -229,23 +243,26 @@ export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
 }


-function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeZone,
-                       candidats, blocs, nuances, grouperParBloc = false}) {
+function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
+                       candidats, blocs, nuances, tour, grouperParBloc = false}) {
+  const sousZoneInfo = resultatsZone.zone
+  const donnees = resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
+
  const [idZone, nomZone] = useMemo(() => {
-    if (!resultatsZone[typeZone])
+    if (!sousZoneInfo)
      return ["", ""]

-    if (typeZone === "region" || typeZone === "departement" || typeZone === "commune")
-      return [resultatsZone[typeZone].code_insee, resultatsZone[typeZone].nom]
-    else if (typeZone === "circonscription")
-      return [resultatsZone.circonscription.id, `Circonscription ${resultatsZone.circonscription.id}`]
-    else if (typeZone === "bureau_vote")
-      return [resultatsZone.bureau_vote.id, resultatsZone.bureau_vote.libelle]
+    if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
+      return [sousZoneInfo.code_insee, sousZoneInfo.nom]
+    else if (typeSousZone === "circonscription")
+      return [sousZoneInfo.id, `Circonscription ${sousZoneInfo.id}`]
+    else if (typeSousZone === "bureau_vote")
+      return [sousZoneInfo.id, sousZoneInfo.libelle]
    else
      return ["", ""]
-  }, [typeZone, resultatsZone])
+  }, [typeSousZone, sousZoneInfo])

-  const voixCandidats = useMemo(() => resultatsZone?.voix ?? {}, [resultatsZone])
+  const voixCandidats = useMemo(() => donnees?.voix ?? {}, [resultatsZone])
  const candidatsTries = trierCandidats(candidats, voixCandidats)

  const [voixParBloc, voixParNuance] = regrouperVoix(voixCandidats, candidats, blocs, nuances)
@ -271,59 +288,58 @@ function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeZone,
  }

  return <GeoJSON
-    data={{'type': "Feature", 'geometry': resultatsZone.geometry}}
+    data={{'type': "Feature", 'geometry': resultatsZone.zone.geometry}}
    style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
    <Popup>
-      <strong><a href={`/elections/${typeElection}/${anneeElection}/${typeZone}/${idZone}/`}>{nomZone}</a></strong>
+      <strong><a href={`/elections/${typeElection}/${anneeElection}/${typeSousZone}/${idZone}/`}>{nomZone}</a></strong>
      <ul>
        {candidatsTries.slice(0, 5).map(candidat =>
          <li key={candidat.numero}>
-            {candidat.nom} : {voixCandidats[candidat.numero]} ({(100 * voixCandidats[candidat.numero] / resultatsZone.exprimes).toFixed(2)} %)
+            {candidat.nom} : {voixCandidats[candidat.numero]} ({(100 * voixCandidats[candidat.numero] / donnees.exprimes).toFixed(2)} %)
          </li>)}
      </ul>
    </Popup>
  </GeoJSON>
 }

-function ContenuCarte({typeElection, anneeElection, typeResultats, resultats,
-                        typeZone, candidats, blocs, nuances, grouperParBloc = false}) {
+function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, candidats, blocs, nuances, tour,
+                        grouperParBloc = false}) {
  const map = useMap()
  const [resultatsZones, setResultatsZones] = useState([])

  const zones = useMemo(() => {
-    const data = resultats[typeResultats]
-    if (!data)
+    if (!zoneInfo)
      return []

-    if (typeZone === "region")
-      return data?.regions ?? []
-    else if (typeZone === "departement")
-      return data?.departements ?? []
-    else if (typeZone === "circonscription")
-      return data?.circonscriptions ?? []
-    else if (typeZone === "commune")
-      return data?.communes ?? []
-    else if (typeZone === "bureau_vote") {
-      if (typeResultats === "bureau_vote")
-        return data ? [data.id] : []
+    if (typeSousZone === "region")
+      return zoneInfo?.regions ?? []
+    else if (typeSousZone === "departement")
+      return zoneInfo?.departements ?? []
+    else if (typeSousZone === "circonscription")
+      return zoneInfo?.circonscriptions ?? []
+    else if (typeSousZone === "commune")
+      return zoneInfo?.communes ?? []
+    else if (typeSousZone === "bureau_vote") {
+      if (zoneInfo.type === "bureau_vote")
+        return zoneInfo ? [zoneInfo.id] : []
      else
-        return data?.bureaux_vote ?? []
+        return zoneInfo?.bureaux_vote ?? []
    }
    else
      return []
-  }, [typeResultats, resultats, typeZone])
+  }, [zoneInfo, typeSousZone])

  useEffect(() => {
-    if (typeResultats === "france")
+    if (zoneInfo.type === "france")
      return

-    const geometry = resultats.geometry
+    const geometry = zoneInfo.geometry
    if (geometry) {
      // On centre la carte sur la zone
      const geometry_bbox = bbox(geometry)
      map.fitBounds([[geometry_bbox[1], geometry_bbox[0]], [geometry_bbox[3], geometry_bbox[2]]])
    }
-  }, [typeResultats, resultats, map])
+  }, [zoneInfo, map])

  useEffect(() => {
    if (!zones)
@ -332,32 +348,33 @@ function ContenuCarte({typeElection, anneeElection, typeResultats, resultats,
    setResultatsZones(resultatsZones => [])

    zones.forEach(zoneId => {
-      fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeZone}/${zoneId}.json`)
+      fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeSousZone}/${zoneId}.json`)
        .then(response => response.json())
        .then(resultatsZone => setResultatsZones(resultatsZones => [...resultatsZones, resultatsZone]))
    })
-  }, [typeElection, anneeElection, typeZone, zones, resultats])
+  }, [typeElection, anneeElection, typeSousZone, zones])

-  function getZoneIdentifier(typeZone, zone) {
-    if (typeZone === "region" || typeZone === "departement" || typeZone === "commune")
+  function getZoneIdentifier(typeSousZone, zone) {
+    if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
      return zone.code_insee
-    else if (typeZone === "circonscription" || typeZone === "bureau_vote")
+    else if (typeSousZone === "circonscription" || typeSousZone === "bureau_vote")
      return zone.id
    else
      return ""
  }

  return <>
-    {resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
-      <ZoneGeoJSON key={getZoneIdentifier(resultatsZone[typeZone])}
+    {resultatsZones.filter(resultatsZone => resultatsZone.zone.geometry['type'])
+      .map(resultatsZone =>
+      <ZoneGeoJSON key={getZoneIdentifier(resultatsZone.zone)}
                   typeElection={typeElection} anneeElection={anneeElection}
-                   resultatsZone={resultatsZone} typeZone={typeZone} candidats={candidats}
-                   blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc}/>)}
+                   resultatsZone={resultatsZone} typeSousZone={typeSousZone} candidats={candidats}
+                   blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc}/>)}
  </>
 }

-export function CarteResultats({typeElection, anneeElection, typeResultats, resultats,
-                                 typeZone, candidats, blocs, nuances, grouperParBloc = false}) {
+export function CarteResultats({typeElection, anneeElection, typeResultats, zoneInfo, typeSousZone, candidats,
+                                 blocs, nuances, tour, grouperParBloc = false}) {
  const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]

  return <>
@ -366,9 +383,9 @@ export function CarteResultats({typeElection, anneeElection, typeResultats, resu
        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 typeElection={typeElection} anneeElection={anneeElection} typeResultats={typeResultats}
-                    resultats={resultats} typeZone={typeZone} candidats={candidats}
-                    blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />
+      <ContenuCarte typeElection={typeElection} anneeElection={anneeElection}
+                    zoneInfo={zoneInfo} typeSousZone={typeSousZone} candidats={candidats}
+                    blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} />
  </MapContainer>
  </>
 }
--- a/nupes-elections-front/src/utils.js
+++ b/nupes-elections-front/src/utils.js
@ -1,18 +1,18 @@
-export function getNomZone(typeResultats, resultats) {
-  if (!resultats || resultats.length === 0)
+export function getNomZone(typeResultats, zoneInfo) {
+  if (!zoneInfo)
    return ""
  else if (typeResultats === "france")
    return "France"
  else if (typeResultats === "region")
-    return `Région ${resultats.region.nom}`
+    return `Région ${zoneInfo.nom}`
  else if (typeResultats === "departement")
-    return `Département ${resultats.departement.nom}`
+    return `Département ${zoneInfo.nom}`
  else if (typeResultats === "circonscription")
-    return `Circonscription ${resultats.circonscription.id}`
+    return `Circonscription ${zoneInfo.id}`
  else if (typeResultats === "commune")
-    return `Commune ${resultats.commune.nom}`
+    return `Commune ${zoneInfo.nom}`
  else if (typeResultats === "bureau_vote")
-    return resultats.bureau_vote.libelle
+    return zoneInfo.libelle
 }

 export function trierCandidats(candidats, voix_par_candidat) {