160 lines
6.4 KiB
JavaScript
160 lines
6.4 KiB
JavaScript
// public/scripts/trends.js
|
|
|
|
// ─── Timeframe options ───────────────────────────────────────────────────────
|
|
const tfConfig = [
|
|
{ unit:'hours', count:24, label:'Last 24 Hours' },
|
|
{ unit:'days', count:7, label:'Last 7 Days' },
|
|
{ unit:'weeks', count:4, label:'Last 4 Weeks' },
|
|
{ unit:'months', count:12, label:'Last 12 Months' },
|
|
{ unit:'years', count:1, label:'All Time' }
|
|
];
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
function formatESTTimestamp(ts) {
|
|
const [date, time] = ts.split(' ');
|
|
const [Y, M, D] = date.split('-').map(n=>parseInt(n,10));
|
|
const [h, m] = time.split(':');
|
|
return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`;
|
|
}
|
|
function parseLocalDate(ts) {
|
|
const [date, time] = ts.split(' ');
|
|
const [Y, M, D] = date.split('-').map(n=>parseInt(n,10));
|
|
const [h, m, s] = time.split(':').map(n=>parseInt(n,10));
|
|
return new Date(Y, M-1, D, h, m, s);
|
|
}
|
|
function subtract(date, count, unit) {
|
|
const d = new Date(date);
|
|
switch(unit) {
|
|
case 'hours': d.setHours(d.getHours() - count); break;
|
|
case 'days': d.setDate(d.getDate() - count); break;
|
|
case 'weeks': d.setDate(d.getDate() - 7*count); break;
|
|
case 'months': d.setMonth(d.getMonth() - count); break;
|
|
case 'years': d.setFullYear(d.getFullYear() - count); break;
|
|
}
|
|
return d;
|
|
}
|
|
|
|
// ─── State & Chart Ref ───────────────────────────────────────────────────────
|
|
let readings = [];
|
|
let chart;
|
|
|
|
// ─── On Load ─────────────────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', async() => {
|
|
await loadReadings();
|
|
setupUI();
|
|
initChart();
|
|
updateView();
|
|
});
|
|
|
|
// ─── Load & parse readings ───────────────────────────────────────────────────
|
|
async function loadReadings() {
|
|
const data = await fetch('/api/readings').then(r=>r.json());
|
|
readings = data.map(r => ({
|
|
...r,
|
|
formattedTs: formatESTTimestamp(r.timestamp),
|
|
dateObj: parseLocalDate(r.timestamp)
|
|
}));
|
|
}
|
|
|
|
// ─── UI wiring ───────────────────────────────────────────────────────────────
|
|
function setupUI() {
|
|
// timeframe slider
|
|
const slider = document.getElementById('timeframe-slider');
|
|
const label = document.getElementById('timeframe-label');
|
|
slider.addEventListener('input', ()=>{
|
|
label.textContent = tfConfig[slider.value].label;
|
|
updateView();
|
|
});
|
|
label.textContent = tfConfig[slider.value].label;
|
|
|
|
// metric toggles
|
|
document.getElementsByName('metric').forEach(cb => {
|
|
cb.addEventListener('change', updateView);
|
|
});
|
|
|
|
// table sorting
|
|
document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{
|
|
th.addEventListener('click', ()=>{
|
|
const idx = th.cellIndex;
|
|
const asc = !th.classList.contains('asc');
|
|
const tbody = document.getElementById('trends-table-body');
|
|
const rows = Array.from(tbody.rows);
|
|
rows.sort((a,b)=>{
|
|
const av = a.cells[idx].textContent;
|
|
const bv = b.cells[idx].textContent;
|
|
return asc
|
|
? av.localeCompare(bv,undefined,{numeric:true})
|
|
: bv.localeCompare(av,undefined,{numeric:true});
|
|
});
|
|
th.classList.toggle('asc', asc);
|
|
rows.forEach(r=>tbody.appendChild(r));
|
|
});
|
|
});
|
|
}
|
|
|
|
// ─── Chart.js setup ──────────────────────────────────────────────────────────
|
|
function initChart() {
|
|
const ctx = document.getElementById('trend-chart').getContext('2d');
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: { labels: [], datasets: [] },
|
|
options: {
|
|
scales: {
|
|
x: { title: { display:true, text:'Time (EST)' } },
|
|
y: { title: { display:true, text:'Value' } }
|
|
},
|
|
interaction: { mode:'index', intersect:false },
|
|
plugins: { legend:{ position:'top' } },
|
|
maintainAspectRatio:false
|
|
}
|
|
});
|
|
}
|
|
|
|
// ─── Render chart & table ───────────────────────────────────────────────────
|
|
function updateView() {
|
|
const idx = +document.getElementById('timeframe-slider').value;
|
|
const { unit, count } = tfConfig[idx];
|
|
const cutoff = subtract(new Date(), count, unit);
|
|
|
|
const filtered = readings.filter(r => r.dateObj >= cutoff);
|
|
|
|
const selected = Array.from(document.getElementsByName('metric'))
|
|
.filter(cb=>cb.checked).map(cb=>cb.value);
|
|
|
|
const labels = filtered.map(r=>r.formattedTs);
|
|
const datasets = [];
|
|
if (selected.includes('temperature')) {
|
|
datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
|
|
}
|
|
if (selected.includes('humidity')) {
|
|
datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 });
|
|
}
|
|
if (selected.includes('heatIndex')) {
|
|
datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 });
|
|
}
|
|
|
|
chart.data.labels = labels;
|
|
chart.data.datasets = datasets;
|
|
chart.update();
|
|
|
|
populateTable(filtered);
|
|
}
|
|
|
|
// ─── Populate the table ─────────────────────────────────────────────────────
|
|
function populateTable(data) {
|
|
const tbody = document.getElementById('trends-table-body');
|
|
tbody.innerHTML = '';
|
|
data.forEach(r=>{
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${r.formattedTs}</td>
|
|
<td>${r.temperature.toFixed(1)}</td>
|
|
<td>${r.humidity.toFixed(1)}</td>
|
|
<td>${r.heatIndex.toFixed(2)}</td>
|
|
<td>${r.stationDockDoor}</td>
|
|
<td>${r.location}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|