mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 10:30:17 +01:00
129 lines
3.8 KiB
JavaScript
129 lines
3.8 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"
|
|
import useStats from '../hooks/stats'
|
|
import getDay from 'date-fns/getDay'
|
|
import getWeek from '../util'
|
|
|
|
|
|
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++) {
|
|
let currentEntriesCount = 0;
|
|
let previousEntriesCount = 0;
|
|
for (let x of datasets[i].current) {
|
|
if (x != null) {
|
|
currentEntriesCount++;
|
|
}
|
|
}
|
|
for (let x of datasets[i].previous) {
|
|
if (x != null) {
|
|
previousEntriesCount++;
|
|
}
|
|
}
|
|
|
|
if (currentEntriesCount != 0) {
|
|
newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount;
|
|
if (previousEntriesCount > 0) {
|
|
newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
|
|
} else {
|
|
newDifferences[i] = newAverages[i]
|
|
}
|
|
} else {
|
|
newDifferences[i] = 0;
|
|
newAverages[i] = 0;
|
|
}
|
|
}
|
|
setAverages(newAverages);
|
|
setDifferences(newDifferences);
|
|
}
|
|
}, [datasets]);
|
|
|
|
const { stats, loading, error } = useStats(14, "jour");
|
|
|
|
useEffect(() => {
|
|
if (!error && !loading) {
|
|
let reviewCount = [null, null, null, null, null, null, null];
|
|
let reviewCountPrev = [null, null, null, null, null, null, null]
|
|
let reviewAvg = [null, null, null, null, null, null, null]
|
|
let reviewAvgPrev = [null, null, null, null, null, null, null]
|
|
|
|
for (let i = 0; i < stats.length; i++) {
|
|
let date = new Date(Date.parse(stats[i].date))
|
|
let now = new Date();
|
|
let day = (date.getDay() - 1) % 7;
|
|
let week = getWeek(date, 1);
|
|
let thisWeek = getWeek(now, 1);
|
|
if (week == thisWeek) {
|
|
reviewCount[day] = stats[i].nb_avis;
|
|
reviewAvg[day] = stats[i].moyenne_globale;
|
|
} else if (week = thisWeek - 1) {
|
|
reviewAvgPrev[day] = stats[i].moyenne_globale;
|
|
reviewCountPrev[day] = stats[i].nb_avis;
|
|
}
|
|
}
|
|
setDatasets([
|
|
{ title: "Nombre d'avis", current: reviewCount, previous: reviewCountPrev },
|
|
{ title: "Notes moyennes", current: reviewAvg, previous: reviewAvgPrev }
|
|
])
|
|
}
|
|
}, [stats]);
|
|
|
|
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>Telereview</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>
|
|
</>
|
|
)
|
|
}
|