page stats fonctionelle et connectée a la bdd

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>
   )
 }