Syncronisation de la page d'accueil avec l'api

code/interface_admin/hooks/stats.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { api } from "../config/reviewsApi";
 
 export default function useStats(limit, interval) {
@@ -7,7 +7,7 @@ export default function useStats(limit, interval) {
     const [error, setError] = useState(false);
 
     async function fetchData(limit, interval) {
-        const response = await fetch("http://" + api.HOST + `/get_stats?interval=${interval}&limit=${limit}`)
+        const response = await fetch("http://" + api.HOST + `/borne/get_stats?interval=${interval}&limit=${limit}`)
         if(response.ok) {
             const data = await response.json();
             setStats(data);
@@ -20,7 +20,7 @@ export default function useStats(limit, interval) {
 
     useEffect(() => {
         fetchData(limit, interval);
-    })
+    }, [])
 
     return {stats, loading, error};
 }

code/interface_admin/package.json

@@ -12,6 +12,7 @@
     "@next/font": "13.1.6",
     "bootstrap": "^5.2.3",
     "chart.js": "^4.2.0",
+    "date-fns": "^2.29.3",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
     "next": "13.1.6",

code/interface_admin/pages/avis/index.js

@@ -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>

code/interface_admin/pages/index.js

@@ -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>
 		</>
-	)
-}
+		)
+	}
+	

code/interface_admin/util.js

@@ -0,0 +1,34 @@
+/**
+ * Returns the week number for this date.  dowOffset is the day of week the week
+ * "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday),
+ * the week returned is the ISO 8601 week number.
+ * @param int dowOffset
+ * @return int
+ */
+export default function getWeek (date,dowOffset) {
+/*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.meanfreepath.com */
+
+    dowOffset = typeof(dowOffset) == 'number' ? dowOffset : 0; //default dowOffset to zero
+    var newYear = new Date(date.getFullYear(),0,1);
+    var day = newYear.getDay() - dowOffset; //the day of week the year begins on
+    day = (day >= 0 ? day : day + 7);
+    var daynum = Math.floor((date.getTime() - newYear.getTime() - 
+    (date.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
+    var weeknum;
+    //if the year starts before the middle of a week
+    if(day < 4) {
+        weeknum = Math.floor((daynum+day-1)/7) + 1;
+        if(weeknum > 52) {
+            nYear = new Date(date.getFullYear() + 1,0,1);
+            nday = nYear.getDay() - dowOffset;
+            nday = nday >= 0 ? nday : nday + 7;
+            /*if the next year starts before the middle of
+              the week, it is week #1 of that year*/
+            weeknum = nday < 4 ? 1 : 53;
+        }
+    }
+    else {
+        weeknum = Math.floor((daynum+day-1)/7);
+    }
+    return weeknum;
+};