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 => {
if (sensor.value != null && grouped[sensor.valueType]) {
grouped[sensor.valueType].push({
timestamp: new Date(sensor.timestamp),
timestamp: sensor.timestamp * 1000,
value: sensor.value
});
}
});
const sortAndExtract = (entries) => {
const sorted = entries.sort((a, b) => a.timestamp - b.timestamp);
const labels = sorted.map(e =>
new Date(e.timestamp * 1000).toLocaleTimeString('es-ES', {
timeZone: 'Europe/Madrid',
new Date(e.timestamp).toLocaleTimeString('es-ES', {
timeZone: 'UTC',
hour: '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 = [
{ 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)" }
];
const timeLabels = temp.labels.length ? temp.labels : hum.labels.length ? hum.labels : co.labels.length ? co.labels : ["Sin datos"];
return (
<CardContainer
cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({
title,
content: (
<Line style= {{ minHeight: "250px" }}
data={{
labels: timeLabels,
datasets: [{ data, borderColor, backgroundColor, fill: true, tension: 0.4 }]
}}
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=""
/>
);
const historyData = [
{ 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 (
<CardContainer
cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({
title,
content: (
<Line style={{ minHeight: "250px" }}
data={{
labels: timeLabels,
datasets: [{ data, borderColor, backgroundColor, fill: true, tension: 0.4 }]
}}
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 = {