Skip to content
Snippets Groups Projects
Commit 9d2eb67e authored by Aymeric Chaumont's avatar Aymeric Chaumont
Browse files

improve graph component and change footer css

parent 99992344
No related branches found
No related tags found
1 merge request!25improve graph component and change footer css
Pipeline #43873 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