nupes-elections/nupes-elections-front/src/includes/composants_elections_europeennes.js

import {trierCandidats} 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"

/**
 * Composant pour le tableau des résultats des élections européennes par liste
 * @param blocs
 * @param nuances
 * @param listes
 * @param resultats
 * @param siegesParListe
 * @return {JSX.Element}
 * @constructor
 */
export function TableauResultatsEuropeennes({blocs, nuances, listes, resultats, siegesParListe}) {
  const voixListes = resultats?.voix ?? {}
  const listesTriees = trierCandidats(listes, voixListes)

  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Numéro</TableCell>
            <TableCell>Liste</TableCell>
            <TableCell colSpan={2}>Nuance</TableCell>
            <TableCell colSpan={2}>Bloc</TableCell>
            <TableCell>Voix</TableCell>
            <TableCell>% Inscrit⋅es</TableCell>
            <TableCell>% Exprimé⋅es</TableCell>
            <TableCell>Sièges</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {listesTriees.map((liste) => (
            <LigneListe key={liste.numero} liste={liste} voix={voixListes[liste.numero] || 0}
                        resultats={resultats} siegesParListe={siegesParListe} blocs={blocs} nuances={nuances} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
}

function LigneListe({liste, voix, resultats, siegesParListe, blocs, nuances}) {
  const bloc = blocs.filter(bloc => bloc.nom === liste.bloc)[0]
  const nuance = nuances.filter(nuance => nuance.code === liste.nuance)[0]

  return <TableRow key={liste.numero}>
    <TableCell>{liste.numero}</TableCell>
    <TableCell>{liste.nom}</TableCell>
    <TableCell sx={{backgroundColor: nuance.couleur, padding: "0.2em"}}></TableCell>
    <TableCell>{liste.nuance}</TableCell>
    <TableCell sx={{backgroundColor: bloc.couleur, padding: "0.2em"}}></TableCell>
    <TableCell>{liste.bloc}</TableCell>
    <TableCell>{voix}</TableCell>
    <TableCell>{(100 * voix / resultats.inscrits).toFixed(2)} %</TableCell>
    <TableCell>{(100 * voix / resultats.exprimes).toFixed(2)} %</TableCell>
    <TableCell>{siegesParListe[liste.numero]}</TableCell>
  </TableRow>
}