nupes-elections/nupes-elections-front/src/ElectionsLegislatives2022.js

import {useParams} from "react-router-dom"
import {AppBar, Container, Toolbar} from "@mui/material"
import * as Highcharts from 'highcharts'
import highchartsItem from 'highcharts/modules/item-series'
import {useEffect, useMemo, useState} from "react"
import {
  SelectionAffichage,
  TableauParticipation,
  CarteResultats,
  HistogrammeVoix, GroupementParBloc, SelectionTour
} from "./includes/composants_elections"
import {getNomZone, regrouperVoix} from "./utils"
import 'leaflet/dist/leaflet.css'
import {
  TableauResultatsCandidatsLegislatives,
  TableauResultatsNuancesLegislatives
} from "./includes/composants_elections_legislatives"


highchartsItem(Highcharts)

export default function ElectionsLegislatives2022() {
  const {typeResultats, zoneId} = useParams()

  const [grouperParBloc, setGrouperParBloc] = useState(false)
  const [tour, setTour] = useState(1)
  const [blocs, setBlocs] = useState([])
  const [candidats, setCandidats] = useState([])
  const [nuances, setNuances] = useState([])
  const [resultats, setResultats] = useState([])
  const [typeSousZone, setTypeSousZone] = useState("region")

  useEffect(() => {
    fetch("/data/resultats/legislatives/2022/blocs.json").then(response => response.json())
      .then(data => setBlocs(data))
    fetch("/data/resultats/legislatives/2022/nuances.json").then(response => response.json())
      .then(data => setNuances(data))

    if (typeResultats === "france") {
      fetch("/data/resultats/legislatives/2022/france.json").then(response => response.json())
        .then(data => setResultats(data))
    }
    else {
      fetch(`/data/resultats/legislatives/2022/${typeResultats}/${zoneId}.json`)
        .then(response => response.json())
        .then(data => setResultats(data))
    }
  }, [typeResultats, zoneId])

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

  useEffect(() => {
    let circonscription = ""

    if (typeResultats === "circonscription")
      circonscription = zoneId
    else if (typeResultats === "bureau_vote")
      circonscription = zoneInfo?.circonscription ?? ""
    else {
      setCandidats(nuances)
    }

    if (!circonscription)
      return

    fetch(`/data/resultats/legislatives/2022/candidats/${circonscription}.json`)
      .then(response => response.json())
      .then(data => setCandidats(data))
  }, [typeResultats, zoneId, zoneInfo, nuances])

  const donnees = useMemo(() => {
    if (tour === 1)
      return resultats?.tour1 ?? {}
    else if (tour === 2)
      return resultats?.tour2 ?? {}
    else
      return {}
  }, [resultats, tour])

  const dejaGroupeParNuance = typeResultats !== "circonscription" && typeResultats !== "bureau_vote"
  const [voixParBloc, voixParNuance] = regrouperVoix(donnees.voix, candidats, blocs, nuances,
    dejaGroupeParNuance)

  const candidatKey = typeSousZone === "circonscription" || typeSousZone === "bureau_vote" ? "numero" : "code"

  const [categoriesHistogramme, valeursHistogramme, couleursHistogramme] = useMemo(() => {
    if (grouperParBloc) {
      const categories = {}
      const couleurs = {}
      for (let bloc of blocs) {
        categories[bloc.nom] = bloc.nom
        couleurs[bloc.nom] = bloc.couleur
      }
      return [categories, voixParBloc, couleurs]
    }
    else {
      if (typeResultats === "circonscription" || typeResultats === "bureau_vote") {
        // On affiche les noms des candidat⋅es
        const categories = {}
        const couleurs = {}
        for (let candidat of candidats) {
          categories[candidat.numero] = `${candidat.prenom} ${candidat.nom} (${candidat.nuance})`
          couleurs[candidat.numero] = nuances.filter(nuance => nuance.code === candidat.nuance)[0]?.couleur
        }
        return [categories, donnees.voix, couleurs]
      }
      else {
        // On affiche les nuances
        const categories = {}
        const couleurs = {}
        for (let nuance of nuances) {
          categories[nuance.code] = nuance.nom
          couleurs[nuance.code] = nuance.couleur
        }
        return [categories, voixParNuance, couleurs]

      }
    }
  }, [typeResultats, candidats, nuances, blocs, donnees, voixParNuance, voixParBloc, grouperParBloc])

  const tableauResultats = useMemo(() => {
    if (typeResultats === "circonscription" || typeResultats === "bureau_vote")
      return <TableauResultatsCandidatsLegislatives candidats={candidats} blocs={blocs} nuances={nuances} donnees_t1={resultats.tour1} donnees_t2={resultats.tour2} />
    else
      return <TableauResultatsNuancesLegislatives blocs={blocs} nuances={nuances} donnees={donnees} />
  }, [typeResultats, candidats, blocs, nuances, donnees])

  return <>
    <AppBar position="sticky">
      <Toolbar>
        <GroupementParBloc grouperParBloc={grouperParBloc} setGrouperParBloc={setGrouperParBloc} />
        <SelectionAffichage typeResultats={typeResultats} typeSousZone={typeSousZone} setTypeSousZone={setTypeSousZone} />
        <SelectionTour tour={tour} setTour={setTour} />
      </Toolbar>
    </AppBar>
    <Container>
      <HistogrammeVoix titre={`Résultats des élections législatives 2022 : ${nomZone}`}
                       nomCategories={categoriesHistogramme} valeurParCategorie={valeursHistogramme}
                       totalExprimes={donnees.exprimes} couleurParCategorie={couleursHistogramme} />
      {tableauResultats}
      <TableauParticipation donnees_t1={resultats.tour1 ?? {}} donnees_t2={resultats.tour2 ?? {}} />
      <CarteResultats typeElection={"legislatives"} anneeElection={"2022"} typeResultats={typeResultats} zoneInfo={zoneInfo}
                      typeSousZone={typeSousZone} candidats={candidats} blocs={blocs} nuances={nuances} tour={tour}
                      grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
    </Container>
  </>
}