Début de prototype de front pour afficher les résultats
This commit is contained in:
325
nupes-elections-front/src/Elections2024.js
Normal file
325
nupes-elections-front/src/Elections2024.js
Normal file
@@ -0,0 +1,325 @@
|
||||
import {useParams} from "react-router-dom"
|
||||
import FormGroup from '@mui/material/FormGroup'
|
||||
import FormControlLabel from '@mui/material/FormControlLabel'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell from '@mui/material/TableCell'
|
||||
import TableContainer from '@mui/material/TableContainer'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import Switch from '@mui/material/Switch'
|
||||
import * as Highcharts from 'highcharts'
|
||||
import highchartsItem from 'highcharts/modules/item-series'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
import {useEffect, useState} from "react"
|
||||
|
||||
highchartsItem(Highcharts)
|
||||
|
||||
function ResultatsTable({listes, resultats}) {
|
||||
const voix_listes = resultats.voix_listes
|
||||
|
||||
return <>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Numéro</TableCell>
|
||||
<TableCell>Liste</TableCell>
|
||||
<TableCell>Voix</TableCell>
|
||||
<TableCell>% Inscrit⋅es</TableCell>
|
||||
<TableCell>% Exprimé⋅es</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{listes.map((liste) => (
|
||||
<TableRow key={liste.numero}>
|
||||
<TableCell>{liste.numero}</TableCell>
|
||||
<TableCell>{liste.nom}</TableCell>
|
||||
<TableCell>{voix_listes[liste.numero] || 0}</TableCell>
|
||||
<TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.exprimes).toFixed(2)} %</TableCell>
|
||||
<TableCell>{(100 * (voix_listes[liste.numero] || 0) / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
function ParticipationTable({resultats}) {
|
||||
return <>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell></TableCell>
|
||||
<TableCell>Nombre</TableCell>
|
||||
<TableCell>% Inscrit⋅es</TableCell>
|
||||
<TableCell>% Votant⋅es</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow key={"Inscrit⋅es"}>
|
||||
<TableCell>Inscrit⋅es</TableCell>
|
||||
<TableCell>{resultats.inscrits}</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
<TableRow key={"Abstentions"}>
|
||||
<TableCell>Abstention</TableCell>
|
||||
<TableCell>{resultats.abstentions}</TableCell>
|
||||
<TableCell>{(100 * resultats.abstentions / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
<TableRow key={"Votant⋅es"}>
|
||||
<TableCell>Votant⋅es</TableCell>
|
||||
<TableCell>{resultats.votants}</TableCell>
|
||||
<TableCell>{(100 * resultats.votants / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
<TableRow key={"Blancs"}>
|
||||
<TableCell>Blancs</TableCell>
|
||||
<TableCell>{resultats.blancs}</TableCell>
|
||||
<TableCell>{(100 * resultats.blancs / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
<TableCell>{(100 * resultats.blancs / resultats.votants).toFixed(2)} %</TableCell>
|
||||
</TableRow>
|
||||
<TableRow key={"Nuls"}>
|
||||
<TableCell>Nuls</TableCell>
|
||||
<TableCell>{resultats.nuls}</TableCell>
|
||||
<TableCell>{(100 * resultats.nuls / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
<TableCell>{(100 * resultats.nuls / resultats.votants).toFixed(2)} %</TableCell>
|
||||
</TableRow>
|
||||
<TableRow key={"Exprimés"}>
|
||||
<TableCell>Exprimés</TableCell>
|
||||
<TableCell>{resultats.exprimes}</TableCell>
|
||||
<TableCell>{(100 * resultats.exprimes / resultats.inscrits).toFixed(2)} %</TableCell>
|
||||
<TableCell>{(100 * resultats.exprimes / resultats.votants).toFixed(2)} %</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
}
|
||||
|
||||
export default function Election2024({typeResultats = "france"}) {
|
||||
const {zoneId} = useParams()
|
||||
|
||||
const [grouperParBloc, setGrouperParBloc] = useState(false)
|
||||
const [blocs, setBlocs] = useState([])
|
||||
const [nuances, setNuances] = useState([])
|
||||
const [listes, setListes] = useState([])
|
||||
const [resultats, setResultats] = useState([])
|
||||
const [siegesParListe, setSiegesParListe] = useState({})
|
||||
const [voixParBloc, setVoixParBloc] = useState([])
|
||||
const [voixParNuance, setVoixParNuance] = useState([])
|
||||
const [siegesParBloc, setSiegesParBloc] = useState([])
|
||||
const [siegesParNuance, setSiegesParNuance] = useState([])
|
||||
const [categoriesVoix, setCategoriesVoix] = useState([])
|
||||
const [dataVoix, setDataVoix] = useState([])
|
||||
const [dataSieges, setDataSieges] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/nupes/data/resultats/europeennes2024/blocs.json").then(response => response.json())
|
||||
.then(data => setBlocs(data))
|
||||
fetch("/nupes/data/resultats/europeennes2024/nuances.json").then(response => response.json())
|
||||
.then(data => setNuances(data))
|
||||
fetch("/nupes/data/resultats/europeennes2024/listes.json").then(response => response.json())
|
||||
.then(data => setListes(data))
|
||||
|
||||
if (typeResultats === "france") {
|
||||
fetch("/nupes/data/resultats/europeennes2024/france.json").then(response => response.json())
|
||||
.then(data => setResultats(data))
|
||||
}
|
||||
else {
|
||||
fetch(`/nupes/data/resultats/europeennes2024/${typeResultats}/${zoneId}.json`).then(response => response.json())
|
||||
.then(data => setResultats(data))
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const parBloc = {}
|
||||
const parNuance = {}
|
||||
for (let bloc of blocs) {
|
||||
parBloc[bloc.nom] = 0
|
||||
}
|
||||
for (let nuance of nuances) {
|
||||
parNuance[nuance.code] = 0
|
||||
}
|
||||
|
||||
for (let liste of listes) {
|
||||
parBloc[liste.bloc] += resultats.voix_listes[liste.numero] || 0
|
||||
parNuance[liste.nuance] += resultats.voix_listes[liste.numero] || 0
|
||||
}
|
||||
|
||||
setVoixParBloc(parBloc)
|
||||
setVoixParNuance(parNuance)
|
||||
}, [resultats])
|
||||
|
||||
useEffect(() => {
|
||||
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])
|
||||
}
|
||||
}
|
||||
setCategoriesVoix(categories)
|
||||
setDataVoix(data)
|
||||
}, [voixParBloc, voixParNuance, grouperParBloc])
|
||||
|
||||
useEffect(() => {
|
||||
const MAX_SIEGES = 81
|
||||
const sieges = {}
|
||||
const listesElues = []
|
||||
let siegesAffectes = 0
|
||||
let totalVoix = resultats.exprimes
|
||||
for (let liste of listes) {
|
||||
const voix = resultats.voix_listes[liste.numero] || 0
|
||||
if (voix / resultats.exprimes < 0.05) {
|
||||
// Barre des 5 % non franchie
|
||||
totalVoix -= voix
|
||||
sieges[liste.numero] = 0
|
||||
}
|
||||
else {
|
||||
listesElues.push(liste)
|
||||
}
|
||||
}
|
||||
|
||||
if (listesElues.length === 0)
|
||||
return
|
||||
|
||||
for (let liste of listesElues) {
|
||||
const voix = resultats.voix_listes[liste.numero] || 0
|
||||
sieges[liste.numero] = Math.floor(MAX_SIEGES * voix / totalVoix)
|
||||
siegesAffectes += sieges[liste.numero]
|
||||
}
|
||||
|
||||
while (siegesAffectes < MAX_SIEGES) {
|
||||
// Méthode de la plus forte moyenne pour affecter les sièges restants
|
||||
let maxMoyenne = 0
|
||||
let listeElue = null
|
||||
for (let liste of listesElues) {
|
||||
if (sieges[liste.numero] < MAX_SIEGES) {
|
||||
const voix = resultats.voix_listes[liste.numero] || 0
|
||||
const moyenne = voix / (sieges[liste.numero] + 1)
|
||||
if (moyenne > maxMoyenne) {
|
||||
maxMoyenne = moyenne
|
||||
listeElue = liste
|
||||
}
|
||||
}
|
||||
}
|
||||
sieges[listeElue.numero]++
|
||||
siegesAffectes++
|
||||
}
|
||||
|
||||
setSiegesParListe(sieges)
|
||||
}, [resultats])
|
||||
|
||||
useEffect(() => {
|
||||
const parBloc = {}
|
||||
const parNuance = {}
|
||||
for (let bloc of blocs) {
|
||||
parBloc[bloc.nom] = 0
|
||||
}
|
||||
for (let nuance of nuances) {
|
||||
parNuance[nuance.code] = 0
|
||||
}
|
||||
|
||||
for (let liste of listes) {
|
||||
parBloc[liste.bloc] += siegesParListe[liste.numero] || 0
|
||||
parNuance[liste.nuance] += siegesParListe[liste.numero] || 0
|
||||
}
|
||||
|
||||
setSiegesParBloc(parBloc)
|
||||
setSiegesParNuance(parNuance)
|
||||
}, [siegesParListe])
|
||||
|
||||
useEffect(() => {
|
||||
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])
|
||||
}
|
||||
}
|
||||
setDataSieges(data)
|
||||
}, [siegesParBloc, siegesParNuance, grouperParBloc])
|
||||
|
||||
const compositonOptions = {
|
||||
chart: {
|
||||
type: 'item'
|
||||
},
|
||||
title: {
|
||||
text: 'Projection eurodéputé⋅es français⋅es 2024'
|
||||
},
|
||||
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
|
||||
}]
|
||||
}
|
||||
|
||||
const scoreOptions = {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Résultats des élections européennes 2024 en France',
|
||||
},
|
||||
legend: {
|
||||
labelFormat: '{name} <span style="opacity: 0.4">{x}</span>'
|
||||
},
|
||||
xAxis: {
|
||||
categories: categoriesVoix,
|
||||
},
|
||||
series: [{
|
||||
name: "Nombre de voix",
|
||||
keys: ['name', 'y', 'color', 'label'],
|
||||
data: dataVoix,
|
||||
}]
|
||||
}
|
||||
|
||||
return <>
|
||||
<FormGroup>
|
||||
<FormControlLabel control={<Switch checked={grouperParBloc} onChange={event => setGrouperParBloc(event.target.checked)} inputProps={{ 'aria-label': 'controlled' }} />}
|
||||
label="Grouper par bloc plutôt que nuance politique" />
|
||||
</FormGroup>
|
||||
<HighchartsReact
|
||||
id="composition-eurodeputees"
|
||||
highcharts={Highcharts}
|
||||
options={scoreOptions}
|
||||
/>
|
||||
<HighchartsReact
|
||||
id="composition-eurodeputees"
|
||||
highcharts={Highcharts}
|
||||
options={compositonOptions}
|
||||
/>
|
||||
<ResultatsTable listes={listes} resultats={resultats} />
|
||||
<ParticipationTable resultats={resultats} />
|
||||
</>
|
||||
};
|
||||
Reference in New Issue
Block a user