css

frontend/src/components/Graph.js

@@ -10,7 +10,7 @@ import {
   ResponsiveContainer,
   ComposedChart,
 } from "recharts";
-import ToggleButton from "react-bootstrap/ToggleButton";
+
 import "../styles/Graph.css";
 
 const CustomTooltip = ({ active, payload, label }) => {
@@ -28,6 +28,7 @@ const CustomTooltip = ({ active, payload, label }) => {
 
 function formatXAxis(value) {
   if (value == 0) return "";
+  value = Math.round(value);
   return Math.floor(value / 60).toString() + "h" + (value % 60).toString().padStart(2, "0");
 }
 
@@ -76,7 +77,7 @@ export default function Graph({ place }) {
                     dataKey="time"
                     stroke="#FF0000"
                     strokeWidth={2}
-                    dot={{ stroke: "#FF0000", strokeWidth: 2, fill: "#fff" }}
+                    dot={false}
                   />
                 ) : (
                   <div />
@@ -93,6 +94,9 @@ export default function Graph({ place }) {
                   axisLine={false}
                   tickLine={false}
                   tick={{ fill: "#FFFFFF", fontSize: "18" }}
+                  ticks={[...Array(4).keys()].map(
+                    (i) => currentData[1] + (i * (currentData[2] - currentData[1])) / 3,
+                  )}
                   dataKey="name"
                   type="number"
                   interval="preserveStartEnd"
@@ -120,7 +124,6 @@ export default function Graph({ place }) {
                   strokeWidth={2}
                   fillOpacity={1}
                   fill="url(#colorGradient)"
-                  dot={{ stroke: "#0967D2", strokeWidth: 2, fill: "#fff" }}
                 />
               </ComposedChart>
             </ResponsiveContainer>
@@ -128,20 +131,9 @@ export default function Graph({ place }) {
           <div className="graph-title">
             Temps d&apos;attente estimé depuis l&apos;ouverture (en minutes)
           </div>
-          <div className="graph-button">
-            <ToggleButton
-              id="toggle-check"
-              type="checkbox"
-              variant="primary"
-              checked={checked}
-              value="0"
-              onChange={() => setChecked(!checked)}
-            >
-              {checked
-                ? "Retirer le temps d'attente moyen pour ce créneau"
-                : "Afficher le temps d'attente moyen pour ce créneau"}
-            </ToggleButton>
-          </div>
+          <button id="graph-avg-graph" onClick={() => setChecked(!checked)}>
+            {checked ? "Retirer le temps d'attente moyen" : "Afficher le temps d'attente moyen"}
+          </button>
         </div>
       )}
     </>

frontend/src/styles/Graph.css

@@ -9,6 +9,16 @@
     display: inline-block;
 }
 
-.graph-button{
-    margin-top: 10px;
+#graph-avg-graph {
+    border: none;
+    background: none;
+    color: inherit;
+    font-style: italic;
+    font-size: 0.8rem;
+    font-weight: lighter;
+    margin-top: -1.5rem;
+}
+
+#graph-avg-graph:hover {
+    text-decoration-line: underline;
 }
\ No newline at end of file