Merge branch 'extract-stats' into 'main'

improve graph component and change footer css

See merge request !25

frontend/package.json

@@ -32,5 +32,17 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "prettier": "^2.7.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

frontend/src/components/Footer.js

@@ -4,7 +4,7 @@ import "../styles/Footer.css";
 
 export default function Footer() {
   return (
-    <div className="footer">
+    <footer className="footer">
       <div className="py-4 bg-dark flex-shrink-0">
         <div className="container text-center">
           Fait par{" "}
@@ -13,6 +13,6 @@ export default function Footer() {
           </a>
         </div>
       </div>
-    </div>
+    </footer>
   );
 }

frontend/src/components/Graph.js

@@ -9,7 +9,6 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
-import gradient from "./gradient";
 import "../styles/Graph.css";
 
 export default function DailyGraph({
@@ -42,7 +41,6 @@ export default function DailyGraph({
   React.useEffect(() => {
     axios.get(url).then((response) => {
       setData(response.data);
-      console.log(response.data);
     });
   }, [url]);
   if (!data) return null;
@@ -59,6 +57,10 @@ export default function DailyGraph({
   };
 
   return (
+    <div>
+      <div className="graph-title">
+        Temps d&apos;attente pour le prochain créneau d&apos;ouverture
+      </div>
       <div className="parent">
         <div className="graph">
           <ResponsiveContainer width="100%" height="100%">
@@ -73,26 +75,37 @@ export default function DailyGraph({
                 bottom: 5,
               }}
             >
-            {gradient()}
-            <CartesianGrid stroke="#FFFFFF" strokeDasharray="1 5" />
+              <defs>
+                <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="${2 * temp}%" stopColor="#ff0000" stopOpacity={0.55} />
+                  <stop offset="50%" stopColor="#fff200" stopOpacity={0.5} />
+                  <stop offset="90%" stopColor="#1e9600" stopOpacity={0.35} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid stroke="#FFFFFF" strokeDasharray="1 3" />
               <XAxis
                 axisLine={false}
                 tickLine={false}
                 tick={{ fill: "#FFFFFF", fontSize: "18" }}
-              padding={{ left: 20 }}
                 dataKey="name"
               />
               <YAxis
                 axisLine={false}
                 tickLine={false}
                 tick={{ fill: "#FFFFFF", fontSize: "18" }}
+                tickInt
+                tickCount={10}
                 dataKey="time"
+                domain={[0, (dataMax) => 10 * Math.floor((dataMax + 10) / 10)]}
+                allowDecimals={false}
+                name="Temps d'attente"
               />
               <Tooltip content={<CustomTooltip />} />
               <Area
                 type="monotone"
                 dataKey="time"
-              stroke="#5661B3"
+                stroke="#FFFFFF"
+                strokeWidth={1}
                 fillOpacity={1}
                 fill="url(#colorGradient)"
                 dot={{ stroke: "#0967D2", strokeWidth: 2, fill: "#fff" }}
@@ -101,5 +114,6 @@ export default function DailyGraph({
           </ResponsiveContainer>
         </div>
       </div>
+    </div>
   );
 }

frontend/src/index.js

@@ -13,11 +13,13 @@ export default function App() {
     <div className="App">
       <Router>
         <Header />
+        <div className="page">
           <Routes>
             <Route exact path="/" element={<HomePage />} />
             <Route path="/eiffel" element={<Eiffel />} />
             <Route path="/*" element={<NotFoundPage />} />
           </Routes>
+        </div>
         <Footer />
       </Router>
     </div>

frontend/src/styles/Footer.css

 .footer{
-    bottom: 0;
     width: 100%;
+    margin-top: 100px;
 }
 
 .VR-link{

frontend/src/styles/Graph.css

 .parent{
     display: flex;
-    justify-content: center;
+    justify-content: center
+}
+
+
+.graph-title{
+    display: inline-block;
+    text-align: center;
 }
 
 .graph{
-    height: 30em;
-    width: 60em;
-    display: flex;
+    height: 20em;
+    width: 40em;
+    display: inline-block;
 }
\ No newline at end of file

frontend/src/styles/index.css

 body, html {
-  height: 100vh;
   color: white;
   text-align: center;
   background: linear-gradient(to right, #B06AB3, #4568DC);
+}
+
+.app{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100vw;
   min-height: 100%;
 }
 
+.page{
+  height: 100vh;
+  flex: 1;
+}