public/Telereview
1
0
Fork 0
mirror of https://git.roussel.pro/telecom-paris/pact.git synced 2026-02-09 10:30:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Syncronisation de la page d'accueil avec l'api

Browse Source
This commit is contained in:
Quentin Roussel
2023-03-20 21:39:45 +01:00
parent 226f8617d6
commit 4b0f2f237f
11 changed files with 274 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
code/interface_admin/pages/avis/index.js
View File

@@ -57,8 +57,8 @@ export default function AvisListPage() {
<div className='d-flex flex-row justify-content-around col-md-6'>
<div>Min : {minGrade}/10</div>
<div className={styles.sliderContainer}>
<input type="range" value={minGrade} onChange={(e) => setMinGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
<input type="range" value={maxGrade} onChange={(e) => setMaxGrade(e.target.value)} min="0" max="10" step="1" className={styles.slider}></input>
<input type="range" value={minGrade} onChange={(e) => setMinGrade(Number(e.target.value))} min="0" max="10" step="1" className={styles.slider}></input>
<input type="range" value={maxGrade} onChange={(e) => setMaxGrade(Number(e.target.value))} min="0" max="10" step="1" className={styles.slider}></input>
</div>
<div>Max : {maxGrade}/10</div>
</div>

154
code/interface_admin/pages/index.js
View File

@@ -3,74 +3,132 @@ 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++) {
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
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]);
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] }
]), []);
const { stats, loading, error } = useStats(14, "jour");
useEffect(() => {
console.log(getDay(new Date("2023-03-20T14:00:00.000Z")))
})
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);
console.log({date,week,thisWeek,day})
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 />
<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>
<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>
</>
)
}
)
}