JoshBaneyCS/Heat-Tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update public/scripts/trends.js

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-30 02:38:25 +00:00
parent 04100e8d5f
commit 68b421bdac
1 changed files with 43 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
public/scripts/trends.js
View File

@ -10,18 +10,16 @@ const tfConfig = [
]; ];
// ─── Helpers ───────────────────────────────────────────────────────────────── // ─── Helpers ─────────────────────────────────────────────────────────────────
function formatESTTimestamp(ts) { function formatEST(epoch) {
// ts is "YYYY-MM-DD HH:mm:ss" in Eastern time return new Date(epoch).toLocaleString('en-US', {
const [date, time] = ts.split(' '); timeZone: 'America/New_York',
const [Y, M, D] = date.split('-').map(Number); month: 'numeric',
const [h, m] = time.split(':'); day: 'numeric',
return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`; year: '2-digit',
} hour12: false,
function parseLocalDate(ts) { hour: '2-digit',
const [date, time] = ts.split(' '); minute: '2-digit'
const [Y, M, D] = date.split('-').map(Number); }).replace(',', ' @');
const [h, m, s] = time.split(':').map(Number);
return new Date(Y, M-1, D, h, m, s);
} }
function subtract(date, count, unit) { function subtract(date, count, unit) {
const d = new Date(date); const d = new Date(date);
@ -39,23 +37,16 @@ function subtract(date, count, unit) {
let readings = []; let readings = [];
let chart; let chart;
// ─── Init ───────────────────────────────────────────────────────────────────── // ─── On Load ─────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async() => { document.addEventListener('DOMContentLoaded', async() => {
await loadReadings();
setupUI();
initChart();
updateView();
});
// ─── Load readings ────────────────────────────────────────────────────────────
async function loadReadings() {
const data = await fetch('/api/readings').then(r=>r.json()); const data = await fetch('/api/readings').then(r=>r.json());
readings = data.map(r=>({ readings = data.map(r=>({
...r, ...r,
formattedTs: formatESTTimestamp(r.timestamp), ts: formatEST(r.epoch_ms),
dateObj: parseLocalDate(r.timestamp) date: new Date(r.epoch_ms)
})); }));
} setupUI(); initChart(); updateView();
});
// ─── UI Wiring ──────────────────────────────────────────────────────────────── // ─── UI Wiring ────────────────────────────────────────────────────────────────
function setupUI(){ function setupUI(){
@ -67,9 +58,7 @@ function setupUI() {
}); });
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
document.getElementsByName('metric').forEach(cb=>{ document.getElementsByName('metric').forEach(cb=>cb.addEventListener('change',updateView));
cb.addEventListener('change', updateView);
});
document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{ document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{
th.addEventListener('click', ()=>{ th.addEventListener('click', ()=>{
@ -88,7 +77,7 @@ function setupUI() {
}); });
} }
// ─── Chart Setup ────────────────────────────────────────────────────────────── // ─── Chart.js Setup ──────────────────────────────────────────────────────────
function initChart(){ function initChart(){
const ctx = document.getElementById('trend-chart').getContext('2d'); const ctx = document.getElementById('trend-chart').getContext('2d');
chart = new Chart(ctx,{ chart = new Chart(ctx,{
@ -110,40 +99,31 @@ function initChart() {
function updateView(){ function updateView(){
const idx = +document.getElementById('timeframe-slider').value; const idx = +document.getElementById('timeframe-slider').value;
const {unit,count} = tfConfig[idx]; const {unit,count} = tfConfig[idx];
const cutoff = subtract(new Date(), count, unit); const cutoff = subtract(Date.now(),count,unit);
const filtered = readings.filter(r=>r.dateObj >= cutoff);
const filtered = readings.filter(r=>r.date>=cutoff);
const selected = Array.from(document.getElementsByName('metric')) const selected = Array.from(document.getElementsByName('metric'))
.filter(cb=>cb.checked).map(cb=>cb.value); .filter(cb=>cb.checked).map(cb=>cb.value);
const labels = filtered.map(r=>r.formattedTs); const labels = filtered.map(r=>r.ts);
const datasets = []; const datasets = [];
if (selected.includes('temperature')) { if (selected.includes('temperature'))
datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 }); datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
} if (selected.includes('humidity'))
if (selected.includes('humidity')) {
datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 }); datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 });
} if (selected.includes('heatIndex'))
if (selected.includes('heatIndex')) {
datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 }); datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 });
}
chart.data.labels = labels; chart.data.labels = labels;
chart.data.datasets = datasets; chart.data.datasets = datasets;
chart.update(); chart.update();
populateTable(filtered);
}
// ─── Table ───────────────────────────────────────────────────────────────────
function populateTable(data) {
const tbody = document.getElementById('trends-table-body'); const tbody = document.getElementById('trends-table-body');
tbody.innerHTML = ''; tbody.innerHTML = '';
data.forEach(r=>{ filtered.forEach(r=>{
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = ` tr.innerHTML = `
<td>${r.formattedTs}</td> <td>${r.ts}</td>
<td>${r.temperature.toFixed(1)}</td> <td>${r.temperature.toFixed(1)}</td>
<td>${r.humidity.toFixed(1)}</td> <td>${r.humidity.toFixed(1)}</td>
<td>${r.heatIndex.toFixed(2)}</td> <td>${r.heatIndex.toFixed(2)}</td>