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 05:05:01 +00:00
parent ee378087e1
commit 1a5c73264c
1 changed files with 61 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
public/scripts/trends.js
View File

@ -1,63 +1,57 @@
// public/scripts/trends.js // Timeframe configurations
// --- 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' }
]; ];
// --- State ---
let readings = []; let readings = [];
let chart; let chart;
// --- Helpers --- // Subtract a given amount 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;
} }
// --- Load & initialize --- document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', async () => { // 1) Grab embedded data
console.log('📡 Loading readings from /api/readings…'); const data = window.__INITIAL_READINGS__ || [];
try {
const data = await fetch('/api/readings').then(r => r.json()); readings = data.map(r => ({
console.log('✅ Received readings:', data); stationDockDoor: r.stationDockDoor,
readings = data.map(r => ({ location: r.location,
stationDockDoor: r.stationDockDoor, temperature: r.temperature,
location: r.location, humidity: r.humidity,
temperature: r.temperature, heatIndex: r.heatIndex,
humidity: r.humidity, dateObj: new Date(r.epoch_ms),
heatIndex: r.heatIndex, formattedTs: new Date(r.epoch_ms).toLocaleString('en-US', {
dateObj: new Date(r.epoch_ms), timeZone: 'America/New_York',
formattedTs: new Date(r.epoch_ms).toLocaleString('en-US', { month: 'numeric',
timeZone:'America/New_York', day: 'numeric',
month:'numeric', day:'numeric', year:'2-digit', year: '2-digit',
hour:'2-digit', minute:'2-digit', hour12:false hour12: false,
}).replace(',',' @') hour: '2-digit',
})); minute: '2-digit'
console.log('✔ Parsed readings:', readings); }).replace(',', ' @')
}));
setupUI(); setupUI();
initChart(); initChart();
updateView(); updateView();
} catch (err) {
console.error('❌ Failed to load readings:', err);
}
}); });
// --- UI wiring ---
function setupUI() { function setupUI() {
// Slider // 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', () => {
@ -66,7 +60,7 @@ function setupUI() {
}); });
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
// Metrics toggles // Metric toggles
document.getElementsByName('metric').forEach(cb => { document.getElementsByName('metric').forEach(cb => {
cb.addEventListener('change', updateView); cb.addEventListener('change', updateView);
}); });
@ -78,87 +72,79 @@ function setupUI() {
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');
Array.from(tbody.rows) Array.from(tbody.rows)
.sort((a,b) => asc .sort((a, b) => {
? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent, undefined, {numeric:true}) const av = a.cells[idx].textContent;
: b.cells[idx].textContent.localeCompare(a.cells[idx].textContent, undefined, {numeric:true}) const bv = b.cells[idx].textContent;
) return asc
? av.localeCompare(bv, undefined, { numeric: true })
: bv.localeCompare(av, undefined, { numeric: true });
})
.forEach(r => tbody.appendChild(r)); .forEach(r => tbody.appendChild(r));
th.classList.toggle('asc', asc); th.classList.toggle('asc', asc);
}); });
}); });
} }
// --- Chart.js init ---
function initChart() { function initChart() {
if (typeof Chart === 'undefined') {
console.error('❌ Chart.js not loaded!');
return;
}
console.log('📊 Initializing Chart.js');
const ctx = document.getElementById('trend-chart').getContext('2d'); const ctx = document.getElementById('trend-chart').getContext('2d');
chart = new Chart(ctx, { chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { labels: [], datasets: [] }, data: { labels: [], datasets: [] },
options: { options: {
scales: { scales: {
x: { title:{ display:true, text:'Time (EST)' } }, x: { title: { display: true, text: 'Time (EST)' } },
y: { 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
} }
}); });
} }
// --- Render chart & table ---
function updateView() { function updateView() {
if (!chart) return; if (!chart) return;
console.log('🔄 updateView called');
// Timeframe cutoff // Determine 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(Date.now(), count, unit);
console.log(` Showing data since ${cutoff.toISOString()}`);
// Filter readings // Filter readings
const filtered = readings.filter(r => r.dateObj >= cutoff); const filtered = readings.filter(r => r.dateObj >= cutoff);
console.log(` ${filtered.length}/${readings.length} points after filtering`);
// Metrics selected // Determine selected metrics
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)
console.log(' Metrics selected:', selected); .map(cb => cb.value);
// Update chart // Build chart
chart.data.labels = filtered.map(r => r.formattedTs); chart.data.labels = filtered.map(r => r.formattedTs);
chart.data.datasets = []; chart.data.datasets = [];
if (selected.includes('temperature')) { if (selected.includes('temperature')) {
chart.data.datasets.push({ chart.data.datasets.push({
label:'Temperature (°F)', label: 'Temperature (°F)',
data: filtered.map(r => r.temperature), data: filtered.map(r => r.temperature),
tension: 0.3 tension: 0.3
}); });
} }
if (selected.includes('humidity')) { if (selected.includes('humidity')) {
chart.data.datasets.push({ chart.data.datasets.push({
label:'Humidity (%)', label: 'Humidity (%)',
data: filtered.map(r => r.humidity), data: filtered.map(r => r.humidity),
tension: 0.3 tension: 0.3
}); });
} }
if (selected.includes('heatIndex')) { if (selected.includes('heatIndex')) {
chart.data.datasets.push({ chart.data.datasets.push({
label:'Heat Index (°F)', label: 'Heat Index (°F)',
data: filtered.map(r => r.heatIndex), data: filtered.map(r => r.heatIndex),
tension: 0.3 tension: 0.3
}); });
} }
console.log(' Chart update:', chart.data);
chart.update(); chart.update();
// Update table // Populate table
const tbody = document.getElementById('trends-table-body'); const tbody = document.getElementById('trends-table-body');
tbody.innerHTML = ''; tbody.innerHTML = '';
filtered.forEach(r => { filtered.forEach(r => {
@ -173,5 +159,4 @@ function updateView() {
`; `;
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
console.log(' Table populated with', filtered.length, 'rows');
} }