486 lines
18 KiB
JavaScript
486 lines
18 KiB
JavaScript
import {trierCandidats, regrouperVoix} from "../utils"
|
|
import TableContainer from "@mui/material/TableContainer"
|
|
import Paper from "@mui/material/Paper"
|
|
import Table from "@mui/material/Table"
|
|
import TableHead from "@mui/material/TableHead"
|
|
import TableRow from "@mui/material/TableRow"
|
|
import TableCell from "@mui/material/TableCell"
|
|
import TableBody from "@mui/material/TableBody"
|
|
import {useEffect, useMemo, useState} from "react"
|
|
import {GeoJSON, MapContainer, Popup, TileLayer, useMap} from "react-leaflet"
|
|
import bbox from "geojson-bbox"
|
|
import {FormControl, InputLabel, MenuItem, Select} from "@mui/material"
|
|
import * as Highcharts from "highcharts";
|
|
import HighchartsReact from "highcharts-react-official";
|
|
import Switch from "@mui/material/Switch";
|
|
import FormControlLabel from "@mui/material/FormControlLabel";
|
|
|
|
|
|
export function HistogrammeVoix({titre, nomCategories, valeurParCategorie, totalExprimes, couleurParCategorie}) {
|
|
const [categoriesVoix, dataVoix] = useMemo(() => {
|
|
const categories = []
|
|
const data = []
|
|
|
|
for (let categorie of Object.keys(nomCategories)) {
|
|
if (valeurParCategorie[categorie] !== 0) {
|
|
categories.push(nomCategories[categorie])
|
|
data.push([nomCategories[categorie], valeurParCategorie[categorie], couleurParCategorie[categorie],
|
|
nomCategories[categorie]])
|
|
}
|
|
}
|
|
|
|
return [categories, data]
|
|
}, [nomCategories, valeurParCategorie, couleurParCategorie])
|
|
|
|
const scoreOptions = {
|
|
chart: {
|
|
type: 'column'
|
|
},
|
|
title: {
|
|
text: titre,
|
|
},
|
|
tooltip: {
|
|
formatter: function () {
|
|
return `<span>${this.x}</span> : <strong>${this.y}</strong> voix (${(100 * this.y / totalExprimes).toFixed(2)} %)<br>`
|
|
}
|
|
},
|
|
xAxis: {
|
|
categories: categoriesVoix,
|
|
},
|
|
series: [{
|
|
name: "Nombre de voix",
|
|
keys: ['name', 'y', 'color', 'label'],
|
|
data: dataVoix,
|
|
}]
|
|
}
|
|
|
|
return <HighchartsReact
|
|
highcharts={Highcharts}
|
|
options={scoreOptions}
|
|
/>
|
|
}
|
|
|
|
export function CompositionHemicycle({titre, blocs, nuances, siegesParBloc, siegesParNuance, grouperParBloc}) {
|
|
const dataSieges = useMemo(() => {
|
|
const data = []
|
|
if (grouperParBloc) {
|
|
for (let bloc of blocs) {
|
|
data.push([bloc.nom, siegesParBloc[bloc.nom], bloc.couleur, bloc.nom])
|
|
}
|
|
}
|
|
else {
|
|
for (let nuance of nuances) {
|
|
data.push([nuance.nom, siegesParNuance[nuance.code], nuance.couleur, nuance.nom])
|
|
}
|
|
}
|
|
|
|
return data
|
|
}, [blocs, nuances, siegesParBloc, siegesParNuance, grouperParBloc])
|
|
|
|
const compositonOptions = {
|
|
chart: {
|
|
type: 'item'
|
|
},
|
|
title: {
|
|
text: titre,
|
|
},
|
|
legend: {
|
|
labelFormat: '{name} <span style="opacity: 0.4">{y}</span>'
|
|
},
|
|
series: [{
|
|
name: 'Nombre de sièges',
|
|
keys: ['name', 'y', 'color', 'label'],
|
|
data: dataSieges,
|
|
dataLabels: {
|
|
enabled: false,
|
|
format: '{point.label}'
|
|
},
|
|
// Circular options
|
|
center: ['50%', '88%'],
|
|
size: '170%',
|
|
startAngle: -100,
|
|
endAngle: 100
|
|
}]
|
|
}
|
|
|
|
return <HighchartsReact
|
|
highcharts={Highcharts}
|
|
options={compositonOptions}
|
|
/>
|
|
}
|
|
|
|
/**
|
|
* Tableau de participation de l'élection dans la zone concernée
|
|
* @param donnees_t1
|
|
* @param donnees_t2
|
|
* @return {JSX.Element}
|
|
* @constructor
|
|
*/
|
|
export function TableauParticipation({donnees_t1, donnees_t2 = null}) {
|
|
const headerRow = useMemo(() => {
|
|
if (donnees_t2 && donnees_t2.inscrits) {
|
|
return <TableRow>
|
|
<TableCell></TableCell>
|
|
<TableCell>Nombre tour 1</TableCell>
|
|
<TableCell>% Inscrit⋅es tour 1</TableCell>
|
|
<TableCell>% Votant⋅es tour 1</TableCell>
|
|
<TableCell>Nombre tour 2</TableCell>
|
|
<TableCell>% Inscrit⋅es tour 2</TableCell>
|
|
<TableCell>% Votant⋅es tour 2</TableCell>
|
|
</TableRow>
|
|
}
|
|
else {
|
|
return <TableRow>
|
|
<TableCell></TableCell>
|
|
<TableCell>Nombre</TableCell>
|
|
<TableCell>% Inscrit⋅es</TableCell>
|
|
<TableCell>% Votant⋅es</TableCell>
|
|
</TableRow>
|
|
}
|
|
}, [donnees_t2])
|
|
|
|
const bodyRows = useMemo(() => {
|
|
if (donnees_t2 && donnees_t2.inscrits) {
|
|
return <>
|
|
<TableRow key={"Inscrit⋅es"}>
|
|
<TableCell>Inscrit⋅es</TableCell>
|
|
<TableCell>{donnees_t1.inscrits}</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell>{donnees_t2.inscrits}</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Abstentions"}>
|
|
<TableCell>Abstention</TableCell>
|
|
<TableCell>{donnees_t1.abstentions}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.abstentions / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell>{donnees_t2.abstentions}</TableCell>
|
|
<TableCell>{(100 * donnees_t2.abstentions / donnees_t2.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Votant⋅es"}>
|
|
<TableCell>Votant⋅es</TableCell>
|
|
<TableCell>{donnees_t1.votants}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.votants / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell>{donnees_t2.votants}</TableCell>
|
|
<TableCell>{(100 * donnees_t2.votants / donnees_t2.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Blancs"}>
|
|
<TableCell>Blancs</TableCell>
|
|
<TableCell>{donnees_t1.blancs}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.blancs / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.blancs / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
<TableCell>{donnees_t2.blancs}</TableCell>
|
|
<TableCell>{(100 * donnees_t2.blancs / donnees_t2.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t2.blancs / donnees_t2.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Nuls"}>
|
|
<TableCell>Nuls</TableCell>
|
|
<TableCell>{donnees_t1.nuls}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.nuls / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.nuls / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
<TableCell>{donnees_t2.nuls}</TableCell>
|
|
<TableCell>{(100 * donnees_t2.nuls / donnees_t2.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t2.nuls / donnees_t2.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Exprimés"}>
|
|
<TableCell>Exprimés</TableCell>
|
|
<TableCell>{donnees_t1.exprimes}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.exprimes / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.exprimes / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
<TableCell>{donnees_t2.exprimes}</TableCell>
|
|
<TableCell>{(100 * donnees_t2.exprimes / donnees_t2.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t2.exprimes / donnees_t2.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
</>
|
|
} else {
|
|
return <>
|
|
<TableRow key={"Inscrit⋅es"}>
|
|
<TableCell>Inscrit⋅es</TableCell>
|
|
<TableCell>{donnees_t1.inscrits}</TableCell>
|
|
<TableCell></TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Abstentions"}>
|
|
<TableCell>Abstention</TableCell>
|
|
<TableCell>{donnees_t1.abstentions}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.abstentions / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Votant⋅es"}>
|
|
<TableCell>Votant⋅es</TableCell>
|
|
<TableCell>{donnees_t1.votants}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.votants / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Blancs"}>
|
|
<TableCell>Blancs</TableCell>
|
|
<TableCell>{donnees_t1.blancs}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.blancs / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.blancs / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Nuls"}>
|
|
<TableCell>Nuls</TableCell>
|
|
<TableCell>{donnees_t1.nuls}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.nuls / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.nuls / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
<TableRow key={"Exprimés"}>
|
|
<TableCell>Exprimés</TableCell>
|
|
<TableCell>{donnees_t1.exprimes}</TableCell>
|
|
<TableCell>{(100 * donnees_t1.exprimes / donnees_t1.inscrits).toFixed(2)} %</TableCell>
|
|
<TableCell>{(100 * donnees_t1.exprimes / donnees_t1.votants).toFixed(2)} %</TableCell>
|
|
</TableRow>
|
|
</>
|
|
}
|
|
}, [donnees_t1, donnees_t2])
|
|
|
|
return <>
|
|
<TableContainer component={Paper}>
|
|
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
|
<TableHead>
|
|
{headerRow}
|
|
</TableHead>
|
|
<TableBody>
|
|
{bodyRows}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</>
|
|
}
|
|
|
|
export function GroupementParBloc({grouperParBloc, setGrouperParBloc}) {
|
|
return <FormControlLabel control={<Switch checked={grouperParBloc} onChange={event => setGrouperParBloc(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
|
|
label="Grouper par bloc plutôt que nuance politique" />
|
|
}
|
|
|
|
export function RetirerSeuil({retirerSeuil, setRetirerSeuil}) {
|
|
return <FormControlLabel control={<Switch checked={retirerSeuil} onChange={event => setRetirerSeuil(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
|
|
label="Retirer le seuil des 5 %" />
|
|
}
|
|
|
|
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") {
|
|
setTypeSousZone("region")
|
|
items.push(<MenuItem value="region">Région</MenuItem>)
|
|
}
|
|
|
|
if (typeResultats === "france" || typeResultats === "region") {
|
|
if (typeResultats !== "france")
|
|
setTypeSousZone("departement")
|
|
items.push(<MenuItem value="departement">Département</MenuItem>)
|
|
}
|
|
|
|
if (typeResultats === "france" || typeResultats === "region" || typeResultats === "departement") {
|
|
if (typeResultats !== "france" && typeResultats !== "region")
|
|
setTypeSousZone("circonscription")
|
|
items.push(<MenuItem value="circonscription">Circonscription</MenuItem>)
|
|
}
|
|
|
|
if (typeResultats === "departement") {
|
|
items.push(<MenuItem value="commune">Communes</MenuItem>)
|
|
}
|
|
|
|
if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
|
|
setTypeSousZone("bureau_vote")
|
|
items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
|
|
}
|
|
|
|
return items
|
|
}, [typeResultats, setTypeSousZone])
|
|
|
|
return <FormControl>
|
|
<InputLabel>
|
|
Zone à afficher
|
|
</InputLabel>
|
|
<Select value={typeSousZone}
|
|
onChange={event => setTypeSousZone(event.target.value)}
|
|
label="Zone à afficher">
|
|
{items}
|
|
</Select>
|
|
</FormControl>
|
|
}
|
|
|
|
|
|
function ZoneGeoJSON({typeElection, anneeElection, resultatsZone, typeSousZone,
|
|
candidats, blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
|
|
const sousZoneInfo = resultatsZone.zone
|
|
const donnees = useMemo(() => {
|
|
return resultatsZone ? (tour === 1 ? resultatsZone.tour1 : resultatsZone.tour2) : {}
|
|
}, [resultatsZone, tour])
|
|
|
|
const [idZone, nomZone] = useMemo(() => {
|
|
if (!sousZoneInfo)
|
|
return ["", ""]
|
|
|
|
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 ["", ""]
|
|
}, [typeSousZone, sousZoneInfo])
|
|
|
|
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 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) {
|
|
let maxVoix = 0
|
|
for (let bloc of blocs) {
|
|
if (voixParBloc[bloc.nom] > maxVoix) {
|
|
maxVoix = voixParBloc[bloc.nom]
|
|
couleur = bloc.couleur
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
let maxVoix = 0
|
|
for (let nuance of nuances) {
|
|
if (voixParNuance[nuance.code] > maxVoix) {
|
|
maxVoix = voixParNuance[nuance.code]
|
|
couleur = nuance.couleur
|
|
}
|
|
}
|
|
}
|
|
|
|
return <GeoJSON
|
|
data={{'type': "Feature", 'geometry': resultatsZone.zone.geometry}}
|
|
style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
|
|
<Popup>
|
|
<strong><a href={`/elections/${typeElection}/${anneeElection}/${typeSousZone}/${idZone}/`}>{nomZone}</a></strong>
|
|
<ul>
|
|
{candidatsTries.slice(0, 5).map(candidat =>
|
|
<li key={candidat[candidatKey]}>
|
|
{candidat.nom} : {voixCandidats[candidat[candidatKey]]} ({(100 * voixCandidats[candidat[candidatKey]] / donnees.exprimes).toFixed(2)} %)
|
|
</li>)}
|
|
</ul>
|
|
</Popup>
|
|
</GeoJSON>
|
|
}
|
|
|
|
function ContenuCarte({typeElection, anneeElection, zoneInfo, typeSousZone, candidats, blocs, nuances, tour,
|
|
grouperParBloc = false, candidatKey = "numero"}) {
|
|
const map = useMap()
|
|
const [resultatsZones, setResultatsZones] = useState([])
|
|
|
|
const zones = useMemo(() => {
|
|
if (!zoneInfo)
|
|
return []
|
|
|
|
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 zoneInfo?.bureaux_vote ?? []
|
|
}
|
|
else
|
|
return []
|
|
}, [zoneInfo, typeSousZone])
|
|
|
|
useEffect(() => {
|
|
if (zoneInfo.type === "france")
|
|
return
|
|
|
|
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]]])
|
|
}
|
|
}, [zoneInfo, map])
|
|
|
|
useEffect(() => {
|
|
if (!zones)
|
|
return
|
|
|
|
setResultatsZones(resultatsZones => [])
|
|
|
|
zones.forEach(zoneId => {
|
|
fetch(`/data/resultats/${typeElection}/${anneeElection}/${typeSousZone}/${zoneId}.json`)
|
|
.then(response => response.json())
|
|
.then(resultatsZone => setResultatsZones(resultatsZones => [...resultatsZones, resultatsZone]))
|
|
})
|
|
}, [typeElection, anneeElection, typeSousZone, zones])
|
|
|
|
function getZoneIdentifier(typeSousZone, zone) {
|
|
if (typeSousZone === "region" || typeSousZone === "departement" || typeSousZone === "commune")
|
|
return zone.code_insee
|
|
else if (typeSousZone === "circonscription" || typeSousZone === "bureau_vote")
|
|
return zone.id
|
|
else
|
|
return ""
|
|
}
|
|
|
|
return <>
|
|
{resultatsZones.filter(resultatsZone => resultatsZone.zone.geometry['type'])
|
|
.map(resultatsZone =>
|
|
<ZoneGeoJSON key={getZoneIdentifier(typeSousZone, resultatsZone.zone)}
|
|
typeElection={typeElection} anneeElection={anneeElection}
|
|
resultatsZone={resultatsZone} typeSousZone={typeSousZone} candidats={candidats}
|
|
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />)}
|
|
</>
|
|
}
|
|
|
|
export function CarteResultats({typeElection, anneeElection, typeResultats, zoneInfo, typeSousZone, candidats,
|
|
blocs, nuances, tour, grouperParBloc = false, candidatKey = "numero"}) {
|
|
const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]
|
|
|
|
return <>
|
|
<MapContainer center={center} zoom={6} style={{height: "90vh"}}>
|
|
<TileLayer
|
|
attribution='© 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}
|
|
zoneInfo={zoneInfo} typeSousZone={typeSousZone} candidats={candidats}
|
|
blocs={blocs} nuances={nuances} tour={tour} grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
|
|
</MapContainer>
|
|
</>
|
|
}
|