mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 02:20:17 +01:00
77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import Head from 'next/head'
|
|
import { Card, Container } from 'react-bootstrap'
|
|
import ComparativeBarChart from '../components/ComparativeBarChart'
|
|
import { useEffect, useState } from 'react'
|
|
import styles from "../styles/Home.module.css"
|
|
|
|
|
|
export default function Home() {
|
|
const [datasets, setDatasets] = useState(null);
|
|
const [averages, setAverages] = useState(null);
|
|
const [differences, setDifferences] = useState(null);
|
|
useEffect(() => {
|
|
if (datasets) {
|
|
let newAverages = []
|
|
let newDifferences = []
|
|
for (let i = 0; i < datasets.length; i++) {
|
|
newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / datasets[i].current.length
|
|
newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
|
|
}
|
|
setAverages(newAverages);
|
|
setDifferences(newDifferences);
|
|
}
|
|
}, [datasets]);
|
|
|
|
useEffect(() => setDatasets([
|
|
{ title: "Nombre d'avis", current: [3, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] },
|
|
{ title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }
|
|
]), []);
|
|
function dataVisualizer(title, current, previous, average, difference) {
|
|
return <div key={title}>
|
|
<h3>{title}</h3>
|
|
<Card className={styles.averageCard}>
|
|
<Card.Title>Moyenne</Card.Title>
|
|
<Card.Body className={styles.averageCardBody}>
|
|
<div
|
|
className={styles.averageMainValue}
|
|
>
|
|
{Math.round(average * 1e2) / 1e2}
|
|
</div>
|
|
<div
|
|
className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
|
|
>
|
|
{(difference >= 0 ? "+" : "-") + Math.round(difference * 1e2) / 1e2}
|
|
</div>
|
|
</Card.Body>
|
|
</Card>
|
|
<ComparativeBarChart
|
|
xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
|
|
label0="Cette semaine"
|
|
label1="La semaine dernière"
|
|
data0={current}
|
|
data1={previous}
|
|
/>
|
|
<hr />
|
|
</div>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Create Next App</title>
|
|
<meta name="description" content="Page d'accueil" />
|
|
</Head>
|
|
<Container fluid>
|
|
<Card>
|
|
<Card.Header as="h2">Vos performances cette semaine</Card.Header>
|
|
<Card.Body>
|
|
{datasets && averages && differences && datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
|
|
</Card.Body>
|
|
<div className='col col-12 col-lg-8 mx-auto'>
|
|
</div>
|
|
</Card>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|