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

89 lines
4.0 KiB
JavaScript

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, CompositionHemicycle, GroupementParBloc, RetirerSeuil
} from "./includes/composants_elections"
import {TableauResultatsEuropeennes} from "./includes/composants_elections_europeennes"
import {calculerSieges, getNomZone, regrouperVoix} from "./utils"
import 'leaflet/dist/leaflet.css'
highchartsItem(Highcharts)
export default function ElectionsEuropeennes2024() {
const {typeResultats, zoneId} = useParams()
const [grouperParBloc, setGrouperParBloc] = useState(false)
const [retirerSeuil, setRetirerSeuil] = useState(false)
const [blocs, setBlocs] = useState([])
const [nuances, setNuances] = useState([])
const [listes, setListes] = useState([])
const [resultats, setResultats] = useState([])
const [typeSousZone, setTypeSousZone] = useState("region")
const tour = 1
useEffect(() => {
fetch("/data/resultats/europeennes/2024/blocs.json").then(response => response.json())
.then(data => setBlocs(data))
fetch("/data/resultats/europeennes/2024/nuances.json").then(response => response.json())
.then(data => setNuances(data))
fetch("/data/resultats/europeennes/2024/listes.json").then(response => response.json())
.then(data => setListes(data))
if (typeResultats === "france") {
fetch("/data/resultats/europeennes/2024/france.json").then(response => response.json())
.then(data => setResultats(data))
}
else {
fetch(`/data/resultats/europeennes/2024/${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])
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, donnees, retirerSeuil ? 0 : 0.05)
const [siegesParBloc, siegesParNuance] = regrouperVoix(siegesParListe, listes, blocs, nuances)
return <>
<AppBar position="sticky">
<Toolbar>
<GroupementParBloc grouperParBloc={grouperParBloc} setGrouperParBloc={setGrouperParBloc} />
<RetirerSeuil retirerSeuil={retirerSeuil} setRetirerSeuil={setRetirerSeuil} />
<SelectionAffichage typeResultats={typeResultats} typeSousZone={typeSousZone} setTypeSousZone={setTypeSousZone} />
</Toolbar>
</AppBar>
<Container>
<HistogrammeVoix titre={`Résultats des élections européennes 2024 : ${nomZone}`}
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={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>
</>
}