Affichage élections législatives 2022

This commit is contained in:
2024-06-20 23:29:18 +02:00
parent 1b0b894acc
commit 5f279fa949
8 changed files with 357 additions and 47 deletions

View File

@ -16,25 +16,19 @@ import Switch from "@mui/material/Switch";
import FormControlLabel from "@mui/material/FormControlLabel";
export function HistogrammeVoix({titre, resultats, voixParNuance, voixParBloc, blocs, nuances, grouperParBloc}) {
export function HistogrammeVoix({titre, nomCategories, valeurParCategorie, totalExprimes, couleurParCategorie}) {
const [categoriesVoix, dataVoix] = useMemo(() => {
const categories = []
const data = []
if (grouperParBloc) {
for (let bloc of blocs) {
categories.push(bloc.nom)
data.push([bloc.nom, voixParBloc[bloc.nom], bloc.couleur, bloc.nom])
}
}
else {
for (let nuance of nuances) {
categories.push(nuance.nom)
data.push([nuance.nom, voixParNuance[nuance.code], nuance.couleur, nuance.nom])
}
for (let categorie of Object.keys(nomCategories)) {
categories.push(nomCategories[categorie])
data.push([nomCategories[categorie], valeurParCategorie[categorie], couleurParCategorie[categorie],
nomCategories[categorie]])
}
return [categories, data]
}, [voixParBloc, voixParNuance, blocs, nuances, grouperParBloc])
}, [nomCategories, valeurParCategorie, couleurParCategorie])
const scoreOptions = {
chart: {
@ -45,7 +39,7 @@ export function HistogrammeVoix({titre, resultats, voixParNuance, voixParBloc, b
},
tooltip: {
formatter: function () {
return `<span>${this.x}</span> : <strong>${this.y}</strong> voix (${(100 * this.y / resultats.exprimes).toFixed(2)} %)<br>`
return `<span>${this.x}</span> : <strong>${this.y}</strong> voix (${(100 * this.y / totalExprimes).toFixed(2)} %)<br>`
}
},
xAxis: {
@ -244,9 +238,11 @@ export function SelectionAffichage({typeResultats, typeSousZone, setTypeSousZone
function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
candidats, blocs, nuances, tour, grouperParBloc = false}) {
candidats, blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
const sousZoneInfo = resultatsZone.zone
const donnees = resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
const donnees = useMemo(() => {
return resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
}, [resultatsZone, tour])
const [idZone, nomZone] = useMemo(() => {
if (!sousZoneInfo)
@ -262,10 +258,23 @@ function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
return ["", ""]
}, [typeSousZone, sousZoneInfo])
const voixCandidats = useMemo(() => donnees?.voix ?? {}, [resultatsZone])
const candidatsTries = trierCandidats(candidats, voixCandidats)
const [candidatsZone, setCandidatsZone] = useState(candidats)
useEffect(() => {
if (typeElection === "legislatives" && (typeSousZone === "circonscription" || typeSousZone === "bureau_vote") && sousZoneInfo.id) {
const circo_id = typeSousZone === "circonscription" ? sousZoneInfo.id : sousZoneInfo.circonscription
fetch(`/data/resultats/${typeElection}/${anneeElection}/candidats/${circo_id}.json`)
.then(response => response.json())
.then(data => setCandidatsZone(data))
}
}, [typeElection, anneeElection, typeSousZone, sousZoneInfo])
const [voixParBloc, voixParNuance] = regrouperVoix(voixCandidats, candidats, blocs, nuances)
const voixCandidats = useMemo(() => donnees?.voix ?? {}, [donnees])
const candidatsTries = trierCandidats(candidatsZone, voixCandidats, candidatKey)
const dejaGroupesParNuance = typeElection === "legislatives"
&& (typeSousZone !== "circonscription" && typeSousZone !== "bureau_vote")
const [voixParBloc, voixParNuance] = regrouperVoix(voixCandidats, candidatsZone, blocs, nuances,
dejaGroupesParNuance)
let couleur = 'grey'
if (grouperParBloc) {
@ -294,8 +303,8 @@ function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
<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] / donnees.exprimes).toFixed(2)} %)
<li key={candidat[candidatKey]}>
{candidat.nom} : {voixCandidats[candidat[candidatKey]]} ({(100 * voixCandidats[candidat[candidatKey]] / donnees.exprimes).toFixed(2)} %)
</li>)}
</ul>
</Popup>
@ -303,7 +312,7 @@ function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
}
function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, candidats, blocs, nuances, tour,
grouperParBloc = false}) {
grouperParBloc = false, candidatKey = "numero"}) {
const map = useMap()
const [resultatsZones, setResultatsZones] = useState([])
@ -366,15 +375,15 @@ function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, cand
return <>
{resultatsZones.filter(resultatsZone => resultatsZone.zone.geometry['type'])
.map(resultatsZone =>
<ZoneGeoJSON key={getZoneIdentifier(resultatsZone.zone)}
<ZoneGeoJSON key={getZoneIdentifier(typeSousZone, resultatsZone.zone)}
typeElection={typeElection} anneeElection={anneeElection}
resultatsZone={resultatsZone} typeSousZone={typeSousZone} candidats={candidats}
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc}/>)}
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />)}
</>
}
export function CarteResultats({typeElection, anneeElection, typeResultats, zoneInfo, typeSousZone, candidats,
blocs, nuances, tour, grouperParBloc = false}) {
blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]
return <>
@ -385,7 +394,7 @@ export function CarteResultats({typeElection, anneeElection, typeResultats, zone
/>
<ContenuCarte typeElection={typeElection} anneeElection={anneeElection}
zoneInfo={zoneInfo} typeSousZone={typeSousZone} candidats={candidats}
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} />
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
</MapContainer>
</>
}