diff --git a/frontend/src/components/Graph.js b/frontend/src/components/Graph.js index c2f1f0171680337a8cbc6de8712527d7aa9440a7..8a4acc1860f11c67bb95f6a060f1d6b0a86c4d5c 100644 --- a/frontend/src/components/Graph.js +++ b/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'attente estimé depuis l'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> )} </> diff --git a/frontend/src/styles/Graph.css b/frontend/src/styles/Graph.css index a02f967bec49522b5bc516f62f0d816c6143fe44..af019d7b6843ffbc57a7e599304a85e1dab3cee3 100644 --- a/frontend/src/styles/Graph.css +++ b/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