Visualisation résultats législatives 2024
This commit is contained in:
parent
b4d6885631
commit
22ebabda99
GPG Key ID:
3A75C55819C8CF85
|
|
@ -1,8 +1,9 @@
|
|||
import {createBrowserRouter, RouterProvider} from "react-router-dom"
|
||||
|
||||
import './App.css'
|
||||
import ElectionsLegislatives2022 from "./ElectionsLegislatives2022"
|
||||
import ElectionsLegislatives2022 from './ElectionsLegislatives2022'
|
||||
import ElectionsEuropeennes2024 from './ElectionsEuropeennes2024'
|
||||
import ElectionsLegislatives2024 from './ElectionsLegislatives2024'
|
||||
|
||||
function App() {
|
||||
const router = createBrowserRouter([
|
||||
|
|
@ -26,14 +27,14 @@ function App() {
|
|||
path: "/elections/europeennes/2024/:typeResultats/:zoneId/",
|
||||
element: <ElectionsEuropeennes2024 />
|
||||
},
|
||||
// {
|
||||
// path: "/elections/legislatives/2024/:typeResultats/",
|
||||
// element: <ElectionsLegislatives2024 />,
|
||||
// },
|
||||
// {
|
||||
// path: "/elections/legislatives/2024/:typeResultats/:zoneId/",
|
||||
// element: <ElectionsLegislatives2024 />
|
||||
// },
|
||||
{
|
||||
path: "/elections/legislatives/2024/:typeResultats/",
|
||||
element: <ElectionsLegislatives2024 />,
|
||||
},
|
||||
{
|
||||
path: "/elections/legislatives/2024/:typeResultats/:zoneId/",
|
||||
element: <ElectionsLegislatives2024 />
|
||||
},
|
||||
])
|
||||
|
||||
return <>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
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 ElectionsLegislatives2024() {
|
||||
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/2024/blocs.json").then(response => response.json())
|
||||
.then(data => setBlocs(data))
|
||||
fetch("/data/resultats/legislatives/2024/nuances.json").then(response => response.json())
|
||||
.then(data => setNuances(data))
|
||||
|
||||
if (typeResultats === "france") {
|
||||
fetch("/data/resultats/legislatives/2024/france.json").then(response => response.json())
|
||||
.then(data => setResultats(data))
|
||||
}
|
||||
else {
|
||||
fetch(`/data/resultats/legislatives/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])
|
||||
|
||||
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/2024/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 2024 : ${nomZone}`}
|
||||
nomCategories={categoriesHistogramme} valeurParCategorie={valeursHistogramme}
|
||||
totalExprimes={donnees.exprimes} couleurParCategorie={couleursHistogramme} />
|
||||
{tableauResultats}
|
||||
<TableauParticipation donnees_t1={resultats.tour1 ?? {}} donnees_t2={resultats.tour2 ?? {}} />
|
||||
<CarteResultats typeElection={"legislatives"} anneeElection={"2024"} typeResultats={typeResultats} zoneInfo={zoneInfo}
|
||||
typeSousZone={typeSousZone} candidats={candidats} blocs={blocs} nuances={nuances} tour={tour}
|
||||
grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
|
||||
</Container>
|
||||
</>
|
||||
}
|
||||
Loading…
Reference in New Issue