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:21:43 +00:00
parent 9283a6d31a
commit 1c312ab0a5
1 changed files with 62 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
public/scripts/trends.js
View File

@ -1,96 +1,98 @@
// public/scripts/trends.js // public/scripts/trends.js
// ─── Configuration for timeframes ───────────────────────────────────────────── // ─── Timeframe options ───────────────────────────────────────────────────────
const tfConfig = [ const tfConfig = [
{ unit: 'hours', count: 24, label: 'Last 24 Hours' }, { unit:'hours', count:24, label:'Last 24 Hours' },
{ unit: 'days', count: 7, label: 'Last 7 Days' }, { unit:'days', count:7, label:'Last 7 Days' },
{ unit: 'weeks', count: 4, label: 'Last 4 Weeks' }, { unit:'weeks', count:4, label:'Last 4 Weeks' },
{ unit: 'months', count: 12, label: 'Last 12 Months' }, { unit:'months', count:12, label:'Last 12 Months' },
{ unit: 'years', count: 1, label: 'All Time' } { unit:'years', count:1, label:'All Time' }
]; ];
// ─── Helpers ────────────────────────────────────────────────────────────────── // ─── Helpers ─────────────────────────────────────────────────────────────────
// Reformat EST SQL timestamp "YYYY-MM-DD HH:mm:ss" → "M/D/YY @HH:mm"
function formatESTTimestamp(ts) { function formatESTTimestamp(ts) {
const [datePart, timePart] = ts.split(' '); const [date, time] = ts.split(' ');
const [Y, M, D] = datePart.split('-').map(n => parseInt(n, 10)); const [Y, M, D] = date.split('-').map(n=>parseInt(n,10));
const [h, m] = timePart.split(':'); const [h, m] = time.split(':');
const YY = String(Y).slice(-2); return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`;
return `${M}/${D}/${YY} @${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);
} }
// Subtract count units from a Date
function subtract(date, count, unit) { function subtract(date, count, unit) {
const d = new Date(date); const d = new Date(date);
switch (unit) { switch(unit) {
case 'hours': d.setHours(d.getHours() - count); break; case 'hours': d.setHours(d.getHours() - count); break;
case 'days': d.setDate(d.getDate() - count); break; case 'days': d.setDate(d.getDate() - count); break;
case 'weeks': d.setDate(d.getDate() - 7 * count); break; case 'weeks': d.setDate(d.getDate() - 7*count); break;
case 'months': d.setMonth(d.getMonth() - count); break; case 'months': d.setMonth(d.getMonth() - count); break;
case 'years': d.setFullYear(d.getFullYear() - count); break; case 'years': d.setFullYear(d.getFullYear() - count); break;
} }
return d; return d;
} }
// ─── State ──────────────────────────────────────────────────────────────────── // ─── State & Chart Ref ───────────────────────────────────────────────────────
let readings = []; let readings = [];
let chart; let chart;
// ─── Initialize on page load ───────────────────────────────────────────────── // ─── On Load ─────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async() => {
await loadReadings(); await loadReadings();
setupUI(); setupUI();
initChart(); initChart();
updateView(); updateView();
}); });
// ─── Load readings from API ─────────────────────────────────────────────────── // ─── Load & parse readings ───────────────────────────────────────────────────
async function loadReadings() { 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), formattedTs: formatESTTimestamp(r.timestamp),
dateObj: new Date(r.timestamp.replace(' ', 'T')) dateObj: parseLocalDate(r.timestamp)
})); }));
} }
// ─── UI Wiring ──────────────────────────────────────────────────────────────── // ─── UI wiring ───────────────────────────────────────────────────────────────
function setupUI() { function setupUI() {
// Timeframe slider + label // timeframe slider
const slider = document.getElementById('timeframe-slider'); const slider = document.getElementById('timeframe-slider');
const label = document.getElementById('timeframe-label'); const label = document.getElementById('timeframe-label');
slider.addEventListener('input', () => { slider.addEventListener('input', ()=>{
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
updateView(); updateView();
}); });
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
// Metric toggles // metric toggles
document.getElementsByName('metric').forEach(cb => { document.getElementsByName('metric').forEach(cb => {
cb.addEventListener('change', updateView); cb.addEventListener('change', updateView);
}); });
// Table sorting // table sorting
document.querySelectorAll('#trends-table thead th.sortable').forEach(th => { document.querySelectorAll('#trends-table thead th.sortable').forEach(th=>{
th.addEventListener('click', () => { th.addEventListener('click', ()=>{
const idx = th.cellIndex; const idx = th.cellIndex;
const asc = !th.classList.contains('asc'); const asc = !th.classList.contains('asc');
const tbody = document.getElementById('trends-table-body'); const tbody = document.getElementById('trends-table-body');
const rows = Array.from(tbody.rows); const rows = Array.from(tbody.rows);
rows.sort((a, b) => { rows.sort((a,b)=>{
const aText = a.cells[idx].textContent; const av = a.cells[idx].textContent;
const bText = b.cells[idx].textContent; const bv = b.cells[idx].textContent;
return asc return asc
? aText.localeCompare(bText, undefined, { numeric: true }) ? av.localeCompare(bv,undefined,{numeric:true})
: bText.localeCompare(aText, undefined, { numeric: true }); : bv.localeCompare(av,undefined,{numeric:true});
}); });
th.classList.toggle('asc', asc); th.classList.toggle('asc', asc);
rows.forEach(r => tbody.appendChild(r)); rows.forEach(r=>tbody.appendChild(r));
}); });
}); });
} }
// ─── Initialize Chart.js line chart ─────────────────────────────────────────── // ─── 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, {
@ -98,55 +100,37 @@ function initChart() {
data: { labels: [], datasets: [] }, data: { labels: [], datasets: [] },
options: { options: {
scales: { scales: {
x: { display: true, title: { display: true, text: 'Time (EST)' } }, x: { title: { display:true, text:'Time (EST)' } },
y: { display: true, title: { display: true, text: 'Value' } } y: { title: { display:true, text:'Value' } }
}, },
interaction: { mode: 'index', intersect: false }, interaction: { mode:'index', intersect:false },
plugins: { legend: { position: 'top' } }, plugins: { legend:{ position:'top' } },
maintainAspectRatio: false maintainAspectRatio:false
} }
}); });
} }
// ─── Update both chart & table based on UI state ───────────────────────────── // ─── Render chart & table ───────────────────────────────────────────────────
function updateView() { function updateView() {
// Determine timeframe cutoff
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(new Date(), count, unit);
// Filter readings
const filtered = readings.filter(r => r.dateObj >= cutoff); const filtered = readings.filter(r => r.dateObj >= cutoff);
// Determine selected metrics
const selected = Array.from(document.getElementsByName('metric')) const selected = Array.from(document.getElementsByName('metric'))
.filter(cb => cb.checked) .filter(cb=>cb.checked).map(cb=>cb.value);
.map(cb => cb.value);
// Prepare chart labels & datasets const labels = filtered.map(r=>r.formattedTs);
const labels = filtered.map(r => r.formattedTs);
const datasets = []; const datasets = [];
if (selected.includes('temperature')) { if (selected.includes('temperature')) {
datasets.push({ datasets.push({ label:'Temperature (°F)', data:filtered.map(r=>r.temperature), tension:0.3 });
label: 'Temperature (°F)',
data: filtered.map(r => r.temperature),
tension: 0.3
});
} }
if (selected.includes('humidity')) { if (selected.includes('humidity')) {
datasets.push({ datasets.push({ label:'Humidity (%)', data:filtered.map(r=>r.humidity), tension:0.3 });
label: 'Humidity (%)',
data: filtered.map(r => r.humidity),
tension: 0.3
});
} }
if (selected.includes('heatIndex')) { if (selected.includes('heatIndex')) {
datasets.push({ datasets.push({ label:'Heat Index (°F)', data:filtered.map(r=>r.heatIndex), tension:0.3 });
label: 'Heat Index (°F)',
data: filtered.map(r => r.heatIndex),
tension: 0.3
});
} }
chart.data.labels = labels; chart.data.labels = labels;
@ -156,11 +140,11 @@ function updateView() {
populateTable(filtered); populateTable(filtered);
} }
// ─── Populate the trends table ──────────────────────────────────────────────── // ─── Populate the table ─────────────────────────────────────────────────────
function populateTable(data) { function populateTable(data) {
const tbody = document.getElementById('trends-table-body'); const tbody = document.getElementById('trends-table-body');
tbody.innerHTML = ''; tbody.innerHTML = '';
data.forEach(r => { data.forEach(r=>{
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = ` tr.innerHTML = `
<td>${r.formattedTs}</td> <td>${r.formattedTs}</td>