Gallardo7761/contaminus
Archived
1
0
Fork 0
Code Pull Requests Activity

Fix timestamp handling and improve data extraction in HistoryCharts component

Browse Source
This commit is contained in:
Jose
2025-05-10 16:10:15 +02:00
parent bf42eccc67
commit 7f823cbda0
1 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/HistoryCharts.jsx
View File

@@ -57,59 +57,63 @@ const HistoryChartsContent = () => {
data?.forEach(sensor => { data?.forEach(sensor => {
if (sensor.value != null && grouped[sensor.valueType]) { if (sensor.value != null && grouped[sensor.valueType]) {
grouped[sensor.valueType].push({ grouped[sensor.valueType].push({
timestamp: new Date(sensor.timestamp), timestamp: sensor.timestamp * 1000,
value: sensor.value value: sensor.value
}); });
} }
}); });
const sortAndExtract = (entries) => { const sortAndExtract = (entries) => {
const sorted = entries.sort((a, b) => a.timestamp - b.timestamp); const sorted = entries.sort((a, b) => a.timestamp - b.timestamp);
const labels = sorted.map(e => const labels = sorted.map(e =>
new Date(e.timestamp * 1000).toLocaleTimeString('es-ES', { new Date(e.timestamp).toLocaleTimeString('es-ES', {
timeZone: 'Europe/Madrid', timeZone: 'UTC',
hour: '2-digit', hour: '2-digit',
minute: '2-digit' minute: '2-digit'
}) })
); );
const values = sorted.map(e => e.value);
return { labels, values }; const values = sorted.map(e => e.value);
return { labels, values };
}; };
const temp = sortAndExtract(grouped.temperature);
const hum = sortAndExtract(grouped.humidity);
const press = sortAndExtract(grouped.pressure);
const co = sortAndExtract(grouped.carbonMonoxide);
const timeLabels = temp.labels.length ? temp.labels : hum.labels.length ? hum.labels : co.labels.length ? co.labels : ["Sin datos"]; const temp = sortAndExtract(grouped.temperature);
const hum = sortAndExtract(grouped.humidity);
const press = sortAndExtract(grouped.pressure);
const co = sortAndExtract(grouped.carbonMonoxide);
const historyData = [ const timeLabels = temp.labels.length ? temp.labels : hum.labels.length ? hum.labels : co.labels.length ? co.labels : ["Sin datos"];
{ title: "🌡️ Temperatura", data: temp.values, borderColor: "#00FF85", backgroundColor: "rgba(0, 255, 133, 0.2)" },
{ title: "💦 Humedad", data: hum.values, borderColor: "#00D4FF", backgroundColor: "rgba(0, 212, 255, 0.2)" },
{ title: "⏲ Presión", data: press.values, borderColor: "#B12424", backgroundColor: "rgba(255, 0, 0, 0.2)" },
{ title: "☁️ Contaminación", data: co.values, borderColor: "#FFA500", backgroundColor: "rgba(255, 165, 0, 0.2)" }
];
return ( const historyData = [
<CardContainer { title: "🌡️ Temperatura", data: temp.values, borderColor: "#00FF85", backgroundColor: "rgba(0, 255, 133, 0.2)" },
cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({ { title: "💦 Humedad", data: hum.values, borderColor: "#00D4FF", backgroundColor: "rgba(0, 212, 255, 0.2)" },
title, { title: "⏲ Presión", data: press.values, borderColor: "#B12424", backgroundColor: "rgba(255, 0, 0, 0.2)" },
content: ( { title: "☁️ Contaminación", data: co.values, borderColor: "#FFA500", backgroundColor: "rgba(255, 165, 0, 0.2)" }
<Line style= {{ minHeight: "250px" }} ];
data={{
labels: timeLabels, return (
datasets: [{ data, borderColor, backgroundColor, fill: true, tension: 0.4 }] <CardContainer
}} cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({
options={options} title,
/> content: (
), <Line style={{ minHeight: "250px" }}
styleMode: "override", data={{
className: "col-lg-6 col-xxs-12 d-flex flex-column align-items-center p-3 card-container", labels: timeLabels,
style: { minHeight: "250px" } datasets: [{ data, borderColor, backgroundColor, fill: true, tension: 0.4 }]
}))} }}
className="" options={options}
/> />
); ),
styleMode: "override",
className: "col-lg-6 col-xxs-12 d-flex flex-column align-items-center p-3 card-container",
style: { minHeight: "250px" }
}))}
className=""
/>
);
}; };
HistoryCharts.propTypes = { HistoryCharts.propTypes = {