ynerant/nupes-elections
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Séparation des résultats par tour

Browse Source
This commit is contained in:
Emmy D'Anello
2024-06-20 18:36:52 +02:00
parent 63e2366837
commit 3d60013670
5 changed files with 243 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
nupes-elections-front/src/includes/composants_elections.js
View File

@ -184,23 +184,37 @@ export function RetirerSeuil({retirerSeuil, setRetirerSeuil}) {
label="Retirer le seuil des 5 %" />
}
export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
export function SelectionTour({tour, setTour}) {
return <FormControl>
<InputLabel>
Zone à afficher
</InputLabel>
<Select value={tour}
onChange={event => setTour(parseInt(event.target.value.toString()))}
label="Tour">
<MenuItem value="1">Tour 1</MenuItem>
<MenuItem value="2">Tour 2</MenuItem>
</Select>
</FormControl>
}
export function SelectionAffichage({typeResultats, typeSousZone, setTypeSousZone}) {
const items = useMemo(() => {
const items = []
if (typeResultats === "france") {
setTypeZone("region")
setTypeSousZone("region")
items.push(<MenuItem value="region">Région</MenuItem>)
}
if (typeResultats === "france" || typeResultats === "region") {
if (typeResultats !== "france")
setTypeZone("departement")
setTypeSousZone("departement")
items.push(<MenuItem value="departement">Département</MenuItem>)
}
if (typeResultats === "france" || typeResultats === "region" || typeResultats === "departement") {
if (typeResultats !== "france" && typeResultats !== "region")
setTypeZone("circonscription")
setTypeSousZone("circonscription")
items.push(<MenuItem value="circonscription">Circonscription</MenuItem>)
}
@ -209,19 +223,19 @@ export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
}
if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
setTypeZone("bureau_vote")
setTypeSousZone("bureau_vote")
items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
}
return items
}, [typeResultats, setTypeZone])
}, [typeResultats, setTypeSousZone])
return <FormControl>
<InputLabel>
Zone à afficher
</InputLabel>
<Select value={typeZone}
onChange={event => setTypeZone(event.target.value)}
<Select value={typeSousZone}
onChange={event => setTypeSousZone(event.target.value)}
label="Zone à afficher">
{items}
</Select>
@ -229,23 +243,26 @@ export function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
}
function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeZone,
candidats, blocs, nuances, grouperParBloc = false}) {
function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
candidats, blocs, nuances, tour, grouperParBloc = false}) {
const sousZoneInfo = resultatsZone.zone
const donnees = resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
const [idZone, nomZone] = useMemo(() => {
if (!resultatsZone[typeZone])
if (!sousZoneInfo)
return ["", ""]
if (typeZone === "region" || typeZone === "departement" || typeZone === "commune")
return [resultatsZone[typeZone].code_insee, resultatsZone[typeZone].nom]
else if (typeZone === "circonscription")
return [resultatsZone.circonscription.id, `Circonscription ${resultatsZone.circonscription.id}`]
else if (typeZone === "bureau_vote")
return [resultatsZone.bureau_vote.id, resultatsZone.bureau_vote.libelle]
if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
return [sousZoneInfo.code_insee, sousZoneInfo.nom]
else if (typeSousZone === "circonscription")
return [sousZoneInfo.id, `Circonscription ${sousZoneInfo.id}`]
else if (typeSousZone === "bureau_vote")
return [sousZoneInfo.id, sousZoneInfo.libelle]
else
return ["", ""]
}, [typeZone, resultatsZone])
}, [typeSousZone, sousZoneInfo])
const voixCandidats = useMemo(() => resultatsZone?.voix ?? {}, [resultatsZone])
const voixCandidats = useMemo(() => donnees?.voix ?? {}, [resultatsZone])
const candidatsTries = trierCandidats(candidats, voixCandidats)
const [voixParBloc, voixParNuance] = regrouperVoix(voixCandidats, candidats, blocs, nuances)
@ -271,59 +288,58 @@ function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeZone,
}
return <GeoJSON
data={{'type': "Feature", 'geometry': resultatsZone.geometry}}
data={{'type': "Feature", 'geometry': resultatsZone.zone.geometry}}
style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
<Popup>
<strong><a href={`/elections/${typeElection}/${anneeElection}/${typeZone}/${idZone}/`}>{nomZone}</a></strong>
<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] / resultatsZone.exprimes).toFixed(2)} %)
{candidat.nom} : {voixCandidats[candidat.numero]} ({(100 * voixCandidats[candidat.numero] / donnees.exprimes).toFixed(2)} %)
</li>)}
</ul>
</Popup>
</GeoJSON>
}
function ContenuCarte({typeElection, anneeElection, typeResultats, resultats,
typeZone, candidats, blocs, nuances, grouperParBloc = false}) {
function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, candidats, blocs, nuances, tour,
grouperParBloc = false}) {
const map = useMap()
const [resultatsZones, setResultatsZones] = useState([])
const zones = useMemo(() => {
const data = resultats[typeResultats]
if (!data)
if (!zoneInfo)
return []
if (typeZone === "region")
return data?.regions ?? []
else if (typeZone === "departement")
return data?.departements ?? []
else if (typeZone === "circonscription")
return data?.circonscriptions ?? []
else if (typeZone === "commune")
return data?.communes ?? []
else if (typeZone === "bureau_vote") {
if (typeResultats === "bureau_vote")
return data ? [data.id] : []
if (typeSousZone === "region")
return zoneInfo?.regions ?? []
else if (typeSousZone === "departement")
return zoneInfo?.departements ?? []
else if (typeSousZone === "circonscription")
return zoneInfo?.circonscriptions ?? []
else if (typeSousZone === "commune")
return zoneInfo?.communes ?? []
else if (typeSousZone === "bureau_vote") {
if (zoneInfo.type === "bureau_vote")
return zoneInfo ? [zoneInfo.id] : []
else
return data?.bureaux_vote ?? []
return zoneInfo?.bureaux_vote ?? []
}
else
return []
}, [typeResultats, resultats, typeZone])
}, [zoneInfo, typeSousZone])
useEffect(() => {
if (typeResultats === "france")
if (zoneInfo.type === "france")
return
const geometry = resultats.geometry
const geometry = zoneInfo.geometry
if (geometry) {
// On centre la carte sur la zone
const geometry_bbox = bbox(geometry)
map.fitBounds([[geometry_bbox[1], geometry_bbox[0]], [geometry_bbox[3], geometry_bbox[2]]])
}
}, [typeResultats, resultats, map])
}, [zoneInfo, map])
useEffect(() => {
if (!zones)
@ -332,32 +348,33 @@ function ContenuCarte({typeElection, anneeElection, typeResultats, resultats,
setResultatsZones(resultatsZones => [])
zones.forEach(zoneId => {
fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeZone}/${zoneId}.json`)
fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeSousZone}/${zoneId}.json`)
.then(response => response.json())
.then(resultatsZone => setResultatsZones(resultatsZones => [...resultatsZones, resultatsZone]))
})
}, [typeElection, anneeElection, typeZone, zones, resultats])
}, [typeElection, anneeElection, typeSousZone, zones])
function getZoneIdentifier(typeZone, zone) {
if (typeZone === "region" || typeZone === "departement" || typeZone === "commune")
function getZoneIdentifier(typeSousZone, zone) {
if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
return zone.code_insee
else if (typeZone === "circonscription" || typeZone === "bureau_vote")
else if (typeSousZone === "circonscription" || typeSousZone === "bureau_vote")
return zone.id
else
return ""
}
return <>
{resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
<ZoneGeoJSON key={getZoneIdentifier(resultatsZone[typeZone])}
{resultatsZones.filter(resultatsZone => resultatsZone.zone.geometry['type'])
.map(resultatsZone =>
<ZoneGeoJSON key={getZoneIdentifier(resultatsZone.zone)}
typeElection={typeElection} anneeElection={anneeElection}
resultatsZone={resultatsZone} typeZone={typeZone} candidats={candidats}
blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc}/>)}
resultatsZone={resultatsZone} typeSousZone={typeSousZone} candidats={candidats}
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc}/>)}
</>
}
export function CarteResultats({typeElection, anneeElection, typeResultats, resultats,
typeZone, candidats, blocs, nuances, grouperParBloc = false}) {
export function CarteResultats({typeElection, anneeElection, typeResultats, zoneInfo, typeSousZone, candidats,
blocs, nuances, tour, grouperParBloc = false}) {
const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]
return <>
@ -366,9 +383,9 @@ export function CarteResultats({typeElection, anneeElection, typeResultats, resu
attribution='&copy; Les contributeur⋅rices <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ContenuCarte typeElection={typeElection} anneeElection={anneeElection} typeResultats={typeResultats}
resultats={resultats} typeZone={typeZone} candidats={candidats}
blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc} />
<ContenuCarte typeElection={typeElection} anneeElection={anneeElection}
zoneInfo={zoneInfo} typeSousZone={typeSousZone} candidats={candidats}
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} />
</MapContainer>
</>
}