Update public/scripts/trends.js
This commit is contained in:
parent
199449ea8f
commit
9e169cd742
@ -11,21 +11,16 @@ const tfConfig = [
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
function formatESTTimestamp(ts) {
|
||||
// ts is "YYYY-MM-DD HH:mm:ss" in Eastern time
|
||||
const [date, time] = ts.split(' ');
|
||||
const [Y, M, D] = date.split('-').map(Number);
|
||||
const [h, m] = time.split(':');
|
||||
return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`;
|
||||
// ts is "YYYY-MM-DD HH:mm:ss" or ISO → we assume you converted to "M/D/YY @HH:mm"
|
||||
return ts; // adjust if you need to parse differently
|
||||
}
|
||||
function parseLocalDate(ts) {
|
||||
const [date, time] = ts.split(' ');
|
||||
const [Y, M, D] = date.split('-').map(Number);
|
||||
const [h, m, s] = time.split(':').map(Number);
|
||||
return new Date(Y, M-1, D, h, m, s);
|
||||
// if you have epoch_ms, convert: return new Date(epoch_ms)
|
||||
return new Date(ts.replace(' ', 'T'));
|
||||
}
|
||||
function subtract(date, count, unit) {
|
||||
const d = new Date(date);
|
||||
switch(unit) {
|
||||
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;
|
||||
@ -35,11 +30,11 @@ function subtract(date, count, unit) {
|
||||
return d;
|
||||
}
|
||||
|
||||
// ─── State ────────────────────────────────────────────────────────────────────
|
||||
// ─── State & Chart Ref ───────────────────────────────────────────────────────
|
||||
let readings = [];
|
||||
let chart;
|
||||
|
||||
// ─── Init ─────────────────────────────────────────────────────────────────────
|
||||
// ─── Initialize ───────────────────────────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await loadReadings();
|
||||
setupUI();
|
||||
@ -47,100 +42,118 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
updateView();
|
||||
});
|
||||
|
||||
// ─── Load readings ────────────────────────────────────────────────────────────
|
||||
// ─── Load data ────────────────────────────────────────────────────────────────
|
||||
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)
|
||||
stationDockDoor: r.stationDockDoor,
|
||||
location: r.location,
|
||||
temperature: r.temperature,
|
||||
humidity: r.humidity,
|
||||
heatIndex: r.heatIndex,
|
||||
formattedTs: new Date(r.epoch_ms).toLocaleString('en-US', {
|
||||
timeZone:'America/New_York',
|
||||
month:'numeric', day:'numeric', year:'2-digit',
|
||||
hour12: false, hour:'2-digit', minute:'2-digit'
|
||||
}).replace(',',' @'),
|
||||
dateObj: new Date(r.epoch_ms)
|
||||
}));
|
||||
}
|
||||
|
||||
// ─── UI Wiring ────────────────────────────────────────────────────────────────
|
||||
function setupUI() {
|
||||
// Slider
|
||||
const slider = document.getElementById('timeframe-slider');
|
||||
const label = document.getElementById('timeframe-label');
|
||||
slider.addEventListener('input', ()=>{
|
||||
slider.addEventListener('input', () => {
|
||||
label.textContent = tfConfig[slider.value].label;
|
||||
updateView();
|
||||
});
|
||||
label.textContent = tfConfig[slider.value].label;
|
||||
|
||||
document.getElementsByName('metric').forEach(cb=>{
|
||||
// Metric checkboxes
|
||||
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 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)=>{
|
||||
return asc
|
||||
? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent,undefined,{numeric:true})
|
||||
: b.cells[idx].textContent.localeCompare(a.cells[idx].textContent,undefined,{numeric:true});
|
||||
});
|
||||
th.classList.toggle('asc',asc);
|
||||
rows.forEach(r=>tbody.appendChild(r));
|
||||
Array.from(tbody.rows)
|
||||
.sort((a,b) => asc
|
||||
? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent, undefined, {numeric:true})
|
||||
: b.cells[idx].textContent.localeCompare(a.cells[idx].textContent, undefined, {numeric:true})
|
||||
)
|
||||
.forEach(r=>tbody.appendChild(r));
|
||||
th.classList.toggle('asc', asc);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Chart Setup ──────────────────────────────────────────────────────────────
|
||||
// ─── Chart.js Initialization ──────────────────────────────────────────────────
|
||||
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'} }
|
||||
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
|
||||
interaction: { mode:'index', intersect:false },
|
||||
plugins: { legend:{ position:'top' } },
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Render ───────────────────────────────────────────────────────────────────
|
||||
// ─── Update chart & table ────────────────────────────────────────────────────
|
||||
function updateView() {
|
||||
const idx = +document.getElementById('timeframe-slider').value;
|
||||
const { unit, count } = tfConfig[idx];
|
||||
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);
|
||||
// Filter
|
||||
const filtered = readings.filter(r => r.dateObj >= cutoff);
|
||||
|
||||
// Metrics selected
|
||||
const selected = Array.from(document.getElementsByName('metric'))
|
||||
.filter(cb=>cb.checked).map(cb=>cb.value);
|
||||
|
||||
const labels = filtered.map(r=>r.formattedTs);
|
||||
const datasets = [];
|
||||
// Chart data
|
||||
chart.data.labels = filtered.map(r=>r.formattedTs);
|
||||
chart.data.datasets = [];
|
||||
if (selected.includes('temperature')) {
|
||||
datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
|
||||
chart.data.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 });
|
||||
chart.data.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.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);
|
||||
}
|
||||
|
||||
// ─── Table ───────────────────────────────────────────────────────────────────
|
||||
function populateTable(data) {
|
||||
// Table
|
||||
const tbody = document.getElementById('trends-table-body');
|
||||
tbody.innerHTML = '';
|
||||
data.forEach(r=>{
|
||||
filtered.forEach(r => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${r.formattedTs}</td>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user