Affichage élections législatives 2022
This commit is contained in:
@ -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>
|
||||
</>
|
||||
}
|
||||
|
Reference in New Issue
Block a user