97 lines
2.5 KiB
JavaScript
97 lines
2.5 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
ReferenceLine,
|
|
} from "recharts";
|
|
|
|
import { Wind } from "lucide-react";
|
|
import axios from "axios";
|
|
import { API_BASE_URL } from "../config";
|
|
|
|
function MeteoGraph({ object, categorie, Logo,reference}) {
|
|
const [rawData, setRawData] = useState([]);
|
|
const identifiant = object.id;
|
|
useEffect(() => {
|
|
axios.get(`${API_BASE_URL}/meteo?id=${identifiant}`).then((response) => {
|
|
setRawData(response.data);
|
|
});
|
|
}, [object]);
|
|
useEffect(() => {
|
|
if (reference?.current) {
|
|
reference.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, [reference]);
|
|
function getAvg() {
|
|
let moyenne = 0;
|
|
rawData.forEach((element) => {
|
|
if(element){
|
|
moyenne += element[categorie];
|
|
}
|
|
});
|
|
return moyenne / rawData.length;
|
|
}
|
|
return (
|
|
<div
|
|
ref={reference}
|
|
key={object.id}
|
|
className="bg-white mb-6 p-6 rounded-xl min-w-5xl"
|
|
style={{ width: "100%", height: "400px" }}
|
|
|
|
>
|
|
<div className="flex align-items gap-6">
|
|
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
|
<Logo className="text-indigo-600" size={24} />
|
|
</div>
|
|
{categorie === "temperature" ? (
|
|
<h1 className="text-black text-2xl font-bold mb-1 ">
|
|
Historique de la température
|
|
</h1>
|
|
) : categorie === "humidity" ? (
|
|
<h1 className="text-black text-2xl font-bold mb-1 ">
|
|
Historique de l'humidité
|
|
</h1>
|
|
) : (
|
|
<h1 className="text-black text-2xl font-bold mb-1 ">
|
|
Historique de la pression
|
|
</h1>
|
|
)}
|
|
</div>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart
|
|
width={500}
|
|
height={300}
|
|
data={rawData}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 10,
|
|
bottom: 60,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="timestamp" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Line
|
|
type="monotone"
|
|
dataKey={categorie}
|
|
stroke="#8884d8"
|
|
activeDot={{ r: 8 }}
|
|
/>
|
|
<ReferenceLine y={getAvg()} label="Moyenne" stroke="red" />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MeteoGraph;
|