diff --git a/frontend/package.json b/frontend/package.json
index 901f31b663118bba047fc0ee7d29a7e3747b00d6..865dcbf62b436e133f6ddde2e877f690cdd7b324 100644
--- a/frontend/package.json
+++ b/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"
+ ]
}
}
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index cafd31e3bc2c3bd2a33181dab6c75d42c1f6af94..d8f8a8f516c48dd99b443104929e4549cf7d7c5f 100644
--- a/frontend/src/components/Footer.js
+++ b/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>
);
}
diff --git a/frontend/src/components/Graph.js b/frontend/src/components/Graph.js
index a2964c3ba1d0f12f0498ab53dda16b88e7f6190e..37d35cc4165ea8058eb344d7f97fe896421642ca 100644
--- a/frontend/src/components/Graph.js
+++ b/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,46 +57,62 @@ export default function DailyGraph({
};
return (
- <div className="parent">
- <div className="graph">
- <ResponsiveContainer width="100%" height="100%">
- <AreaChart
- width={500}
- height={300}
- data={data}
- margin={{
- top: 5,
- right: 30,
- left: 20,
- bottom: 5,
- }}
- >
- {gradient()}
- <CartesianGrid stroke="#FFFFFF" strokeDasharray="1 5" />
- <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" }}
- dataKey="time"
- />
- <Tooltip content={<CustomTooltip />} />
- <Area
- type="monotone"
- dataKey="time"
- stroke="#5661B3"
- fillOpacity={1}
- fill="url(#colorGradient)"
- dot={{ stroke: "#0967D2", strokeWidth: 2, fill: "#fff" }}
- />
- </AreaChart>
- </ResponsiveContainer>
+ <div>
+ <div className="graph-title">
+ Temps d'attente pour le prochain créneau d'ouverture
+ </div>
+ <div className="parent">
+ <div className="graph">
+ <ResponsiveContainer width="100%" height="100%">
+ <AreaChart
+ width={500}
+ height={300}
+ data={data}
+ margin={{
+ top: 5,
+ right: 30,
+ left: 20,
+ bottom: 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" }}
+ 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="#FFFFFF"
+ strokeWidth={1}
+ fillOpacity={1}
+ fill="url(#colorGradient)"
+ dot={{ stroke: "#0967D2", strokeWidth: 2, fill: "#fff" }}
+ />
+ </AreaChart>
+ </ResponsiveContainer>
+ </div>
</div>
</div>
);
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 31355f1c15f649ff4bf67ebf57057b6a0aa43782..101fcfe7a2cad3fe1049cecd5453cde23b682987 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -13,11 +13,13 @@ export default function App() {
<div className="App">
<Router>
<Header />
- <Routes>
- <Route exact path="/" element={<HomePage />} />
- <Route path="/eiffel" element={<Eiffel />} />
- <Route path="/*" element={<NotFoundPage />} />
- </Routes>
+ <div className="page">
+ <Routes>
+ <Route exact path="/" element={<HomePage />} />
+ <Route path="/eiffel" element={<Eiffel />} />
+ <Route path="/*" element={<NotFoundPage />} />
+ </Routes>
+ </div>
<Footer />
</Router>
</div>
diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css
index 2b4f4431f26aa170fdf41da1459d8a9c3935e13d..6dc0fdf45ffff4d7c40efaf7d27fea618e4a6ca6 100644
--- a/frontend/src/styles/Footer.css
+++ b/frontend/src/styles/Footer.css
@@ -1,9 +1,9 @@
.footer{
- bottom: 0;
width: 100%;
+ margin-top: 100px;
}
.VR-link{
color: #6359CE;
text-decoration: none;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/styles/Graph.css b/frontend/src/styles/Graph.css
index 39229f0f0c01cd101221b11db21a120a50ac2717..beec63a5ef22d689f3dde1f17c9e3760d015aa59 100644
--- a/frontend/src/styles/Graph.css
+++ b/frontend/src/styles/Graph.css
@@ -1,10 +1,16 @@
.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
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 56714efc5ef659afb21301bb01fd772526e1edc7..a6fa11fa4a4c102b0fa403230cffd7d159e54bcf 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1,8 +1,18 @@
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;
+}