page stats fonctionelle et connectée a la bdd

code/interface_admin/components/ComparativeBarChart.jsx

@@ -1,17 +1,11 @@
 import React from 'react'
 import { Bar } from 'react-chartjs-2'
-import Chart from 'chart.js/auto';
+import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT  
 
 export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1}) {
 	return (
 		<Bar
 			options={{
-				// plugins: {
-				// 	title: {
-				// 		display: true,
-				// 		text: title 
-				// 	},
-				// },
 				responsive: true,
 				interaction: {
 					intersect: false,

code/interface_admin/components/StatBarChart.jsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react'
+import { Bar } from 'react-chartjs-2'
+import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT  
+
+export default function StatBarChart({labels, data}) {
+  return (
+		<Bar 
+			options={{
+                redraw: true,
+				responsive: true,
+				interaction: {
+					intersect: false,
+				},
+				scales: {
+					x: {
+						stacked: true,
+					},
+					y: {
+						stacked: true
+					}
+				}
+			}}
+			data={{
+				labels: labels,
+				datasets: [
+					{
+						data: data,
+						backgroundColor: "#FF3B30",
+					},
+				]
+			}}
+		/>
+  )
+}

code/interface_admin/hooks/stats.js

@@ -20,7 +20,7 @@ export default function useStats(limit, interval) {
 
     useEffect(() => {
         fetchData(limit, interval);
-    }, [])
+    }, [limit, interval])
 
     return {stats, loading, error};
 }

code/interface_admin/pages/avis/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Container, Form, Row, Table } from 'react-bootstrap'
+import { Card, Container, Form, Row  } from 'react-bootstrap'
 import AvisList from '../../components/AvisList';
 import useReviews from '../../hooks/reviews';
 import styles from '../../styles/AvisListPage.module.css'

code/interface_admin/pages/index.js

@@ -20,25 +20,25 @@ export default function Home() {
 			for (let i = 0; i < datasets.length; i++) {
 				let currentEntriesCount = 0;
 				let previousEntriesCount = 0;
-				for(let x of datasets[i].current) {
+				for (let x of datasets[i].current) {
-					if(x != null) {
+					if (x != null) {
 						currentEntriesCount++;
 					}
 				}
-				for(let x of datasets[i].previous) {
+				for (let x of datasets[i].previous) {
-					if(x != null) {
+					if (x != null) {
 						previousEntriesCount++;
 					}
 				}
 
-				if(currentEntriesCount != 0) {
+				if (currentEntriesCount != 0) {
 					newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount;
-					if(previousEntriesCount > 0) {
+					if (previousEntriesCount > 0) {
 						newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
-					}else {
+					} else {
 						newDifferences[i] = newAverages[i]
 					}
-				}else {
+				} else {
 					newDifferences[i] = 0;
 					newAverages[i] = 0;
 				}
@@ -55,23 +55,23 @@ export default function Home() {
 	})
 
 	useEffect(() => {
-		if(!error && !loading) {
+		if (!error && !loading) {
-			let reviewCount = [null,null,null,null,null,null,null];
+			let reviewCount = [null, null, null, null, null, null, null];
-			let reviewCountPrev = [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 reviewAvg = [null, null, null, null, null, null, null]
-			let reviewAvgPrev = [null,null,null,null,null,null,null]
+			let reviewAvgPrev = [null, null, null, null, null, null, null]
 
-			for(let i = 0; i < stats.length; i++) {
+			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})
+				console.log({ date, week, thisWeek, day })
-				if(week == thisWeek) {
+				if (week == thisWeek) {
 					reviewCount[day] = stats[i].nb_avis;
 					reviewAvg[day] = stats[i].moyenne_globale;
-				}else if(week = thisWeek - 1){
+				} else if (week = thisWeek - 1) {
 					reviewAvgPrev[day] = stats[i].moyenne_globale;
 					reviewCountPrev[day] = stats[i].nb_avis;
 				}
@@ -115,7 +115,7 @@ export default function Home() {
 	return (
 		<>
 			<Head>
-		<title>Create Next App</title>
+				<title>Telereview</title>
 				<meta name="description" content="Page d'accueil" />
 			</Head>
 			<Container fluid>
@@ -130,5 +130,4 @@ export default function Home() {
 			</Container>
 		</>
 	)
-	}
+}
-	

code/interface_admin/pages/stats.js

@@ -1,7 +1,69 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { Card, Container, Form, Row  } from 'react-bootstrap';
+import StatBarChart from '../components/StatBarChart';
+import useStats from '../hooks/stats';
 
 export default function Stats() {
+  const [statName,setStatName] = useState("moyenne_globale")
+  const [timeInterval, setTimeInterval] = useState("jour")
+  const [chartReady, setChartReady] = useState(false);
+  const [xlabels, setXlabels] = useState([]);
+  const [plotData, setPlotData] = useState([]);
+
+  const {loading, error, stats} = useStats(10,timeInterval);
+
+  useEffect(() => {
+    if(!loading && !error) {
+      let newXlabels = [];
+      let newPlotData = [];
+      for(let i = 0; i < stats.length; i++) {
+        newXlabels.push(stats[i].date);
+        newPlotData.push(stats[i][statName]);
+      }
+      setXlabels(newXlabels);
+      setPlotData(newPlotData);
+      setChartReady(true);
+      console.log(timeInterval, stats, plotData, xlabels);
+    }else {
+      setChartReady(false);
+    }
+  }, [stats, statName, timeInterval, loading, error])
+
+
   return (
-    <div>stats</div>
+    <Container fluid>
+      <Card>
+        <Card.Header>Tous les avis</Card.Header>
+        <Card.Body>
+          <Row>
+            <Form>
+              <Form.Group>
+                <Form.Label>Statistique</Form.Label>
+                <Form.Select value={statName} onChange={(e) => setStatName(e.target.value)}>
+                  <option value="moyenne_globale">Moyenne globale</option>
+                  <option value="nb_avis">Nombre d'avis</option>
+                  <option value="moyenne_site">Moyenne du formulaire</option>
+                  <option value = "moyenne_borne">Moyenne sur la borne</option>
+                  <option value="dist_sexes">Distribution sexes</option>
+                </Form.Select>
+              </Form.Group>
+              <Form.Group>
+                <Form.Label>Periode</Form.Label>
+                <Form.Select value={timeInterval} onChange={(e) => setTimeInterval(e.target.value)}>
+                  <option value="jour">Jour</option>
+                  <option value="semaine">Semaine</option>
+                  <option value="mois">Mois</option>
+                  <option value = "annee">Année</option>
+                </Form.Select>
+              </Form.Group>
+            </Form>
+          </Row>
+          <Row>
+            {error && <p>Error</p>}
+            {chartReady && <StatBarChart data={plotData} labels={xlabels} />}
+          </Row>
+        </Card.Body>
+      </Card>
+    </Container>
   )
 }

docs/charte_graphique.md

@@ -0,0 +1,3 @@
+# Codes hex couleurs
+#6B8000
+#A6CC00