nupes-elections/nupes-elections-front/src/includes/composants_elections_legislatives.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"

export function TableauResultatsCandidatsLegislatives({blocs, candidats, nuances, donnees_t1, donnees_t2}) {
  const voixCandidats_t1 = donnees_t1?.voix ?? {}
  const voixCandidats_t2 = donnees_t2?.voix ?? {}
  const candidatsTriees = trierCandidats(candidats, voixCandidats_t1)

  const cellules_t1 = <>
    <TableCell>Voix tour 1</TableCell>
    <TableCell>% Inscrit⋅es tour 1</TableCell>
    <TableCell>% Exprimé⋅es tour 1</TableCell>
  </>

  const cellules_t2 = Math.max(...Object.values(voixCandidats_t2)) === 0 ? <></> : <>
    <TableCell>Voix tour 2</TableCell>
    <TableCell>% Inscrit⋅es tour 2</TableCell>
    <TableCell>% Exprimé⋅es tour 2</TableCell>
  </>

  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Numéro</TableCell>
            <TableCell>Candidat</TableCell>
            <TableCell colSpan={2}>Nuance</TableCell>
            <TableCell colSpan={2}>Bloc</TableCell>
            {cellules_t1}
            {cellules_t2}
          </TableRow>
        </TableHead>
        <TableBody>
          {candidatsTriees.map((candidat) => (
            <LigneCandidat key={candidat.numero} candidat={candidat}
                           voix_t1={voixCandidats_t1[candidat.numero] || 0}
                           voix_t2={voixCandidats_t2[candidat.numero] || 0}
                           donnees_t1={donnees_t1} donnees_t2={donnees_t2}
                           nuances={nuances} blocs={blocs} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
}

function LigneCandidat({candidat, voix_t1, voix_t2, donnees_t1, donnees_t2, nuances, blocs}) {
  const nuance = nuances.filter(nuance => nuance.code === candidat.nuance)[0]
  const bloc = blocs.filter(bloc => bloc.nom === candidat.bloc)[0]

  const gagnant = (voix_t2 > 0 && voix_t2 === Math.max(...Object.values(donnees_t2.voix)))
    || (voix_t1 === Math.max(...Object.values(donnees_t1.voix))
        && voix_t1 / donnees_t1.exprimes >= 0.5 && voix_t1 / donnees_t1.inscrits >= 0.25)

  const cellules_t1 = <>
    <TableCell>{voix_t1}</TableCell>
    <TableCell>{(100 * voix_t1 / donnees_t1.inscrits).toFixed(2)} %</TableCell>
    <TableCell>{(100 * voix_t1 / donnees_t1.exprimes).toFixed(2)} %</TableCell>
  </>

  const cellules_t2 = !voix_t2 ? <></> : <>
    <TableCell>{voix_t2}</TableCell>
    <TableCell>{(100 * voix_t2 / donnees_t2.inscrits).toFixed(2)} %</TableCell>
    <TableCell>{(100 * voix_t2 / donnees_t2.exprimes).toFixed(2)} %</TableCell>
  </>

  return <TableRow sx={{backgroundColor: gagnant ? "#AAFFAA" : ""}} key={candidat.numero}>
    <TableCell>{candidat.numero}</TableCell>
    <TableCell>{candidat.prenom} {candidat.nom}</TableCell>
    <TableCell sx={{backgroundColor: nuance.couleur, padding: "0.2em"}}></TableCell>
    <TableCell>{nuance.nom} ({nuance.code})</TableCell>
    <TableCell sx={{backgroundColor: bloc.couleur, padding: "0.2em"}}></TableCell>
    <TableCell>{bloc.nom}</TableCell>
    {cellules_t1}
    {cellules_t2}
  </TableRow>
}

/**
 * Composant pour le tableau des résultats des élections législatives
 * @param blocs
 * @param nuances
 * @param donnees
 * @return {JSX.Element}
 * @constructor
 */
export function TableauResultatsNuancesLegislatives({blocs, nuances, donnees}) {
  const voixNuances = donnees?.voix ?? {}
  const nuancesTriees = trierCandidats(nuances, voixNuances, "code")

  return <>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell colSpan={2}>Nuance</TableCell>
            <TableCell colSpan={2}>Bloc</TableCell>
            <TableCell>Voix</TableCell>
            <TableCell>% Inscrit⋅es</TableCell>
            <TableCell>% Exprimé⋅es</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {nuancesTriees.map((nuance) => (
            <LigneNuance key={nuance.code} nuance={nuance} voix={voixNuances[nuance.code] || 0}
                         donnees={donnees} blocs={blocs} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </>
}

function LigneNuance({nuance, voix, donnees, blocs}) {
  const bloc = blocs.filter(bloc => bloc.nom === nuance.bloc)[0]

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