Skip to content
Snippets Groups Projects
Commit 4daf1e35 authored by Antoine Gaudron-Desjardins's avatar Antoine Gaudron-Desjardins
Browse files

Merge branch 'extract-stats' into 'main'

improve graph component and change footer css

See merge request !25
parents 99992344 9d2eb67e
No related branches found
No related tags found
1 merge request!25improve graph component and change footer css
Pipeline #43874 passed
......@@ -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"
]
}
}
......@@ -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>
);
}
......@@ -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>
);
}
......@@ -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>
......
.footer{
bottom: 0;
width: 100%;
margin-top: 100px;
}
.VR-link{
......
.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
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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment