Skip to content
Snippets Groups Projects

Extract stats

Merged Aymeric Chaumont requested to merge extract-stats into main

Files

+ 47
17
import React from 'react';
import axios from "axios"
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import React from "react";
import axios from "axios";
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from "recharts";
import gradient from "./gradient";
import styles from "../styles/Graph.css"
import "../styles/Graph.css";
export default function DailyGraph({place, day, min_time_hour, min_time_mn, max_time_hour, max_time_mn, interval}) {
const url = process.env.REACT_APP_BASE_URL_BACK + '/' + place + '/stats/' + day + '/' + min_time_hour + '/' + min_time_mn
+ '/' + max_time_hour + '/' + max_time_mn + '/' + interval
export default function DailyGraph({
place,
day,
min_time_hour,
min_time_mn,
max_time_hour,
max_time_mn,
interval,
}) {
const url =
process.env.REACT_APP_BASE_URL_BACK +
"/" +
place +
"/stats/" +
day +
"/" +
min_time_hour +
"/" +
min_time_mn +
"/" +
max_time_hour +
"/" +
max_time_mn +
"/" +
interval;
const [data, setData] = React.useState([]);
React.useEffect(() => {
axios.get(url).then((response) => {
setData(response.data); console.log(response.data);
setData(response.data);
console.log(response.data);
});
}, [url]);
if (!data) return null;
const CustomTooltip = ({ active, payload, label }) => {
const CustomTooltip = ({ active, payload }) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
@@ -29,7 +59,7 @@ export default function DailyGraph({place, day, min_time_hour, min_time_mn, max_
};
return (
<div className='parent'>
<div className="parent">
<div className="graph">
<ResponsiveContainer width="100%" height="100%">
<AreaChart
@@ -44,21 +74,21 @@ export default function DailyGraph({place, day, min_time_hour, min_time_mn, max_
}}
>
{gradient()}
<CartesianGrid
stroke="#FFFFFF"
strokeDasharray="1 5" />
<CartesianGrid stroke="#FFFFFF" strokeDasharray="1 5" />
<XAxis
axisLine={false}
tickLine={false}
tick={{ fill: "#FFFFFF", fontSize: "18" }}
padding={{ left: 20 }}
dataKey="name"/>
dataKey="name"
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: "#FFFFFF", fontSize: "18" }}
dataKey = "time"/>
<Tooltip content={<CustomTooltip />}/>
dataKey="time"
/>
<Tooltip content={<CustomTooltip />} />
<Area
type="monotone"
dataKey="time"
Loading