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 10:25:27 +00:00
parent bf1f466f6c
commit f33dad2454
1 changed files with 37 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/scripts/trends.js
View File

@ -1,32 +1,32 @@
// public/scripts/trends.js
// Timeframes // Timeframe configurations
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' }
]; ];
let readings = []; let readings = [];
let chart; let chart;
// Helper: subtract time // Subtract helper
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;
} }
// On load
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Grab server-injected data // 1) Use server‐injected data
const data = window.__INITIAL_READINGS__ || []; const data = window.__INITIAL_READINGS__ || [];
readings = data.map(r => { readings = data.map(r => {
@ -56,7 +56,6 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
function setupUI() { function setupUI() {
// 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', () => {
@ -65,35 +64,32 @@ function setupUI() {
}); });
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
// Metric toggles
document.getElementsByName('metric').forEach(cb => { document.getElementsByName('metric').forEach(cb => {
cb.addEventListener('change', updateView); cb.addEventListener('change', updateView);
}); });
// Sortable headers document.querySelectorAll('#trends-table thead th.sortable')
document.querySelectorAll('#trends-table thead th.sortable').forEach(th => { .forEach(th => {
th.addEventListener('click', () => { th.addEventListener('click', () => {
// Determine sort order const asc = !th.classList.contains('asc');
const asc = !th.classList.contains('asc'); document.querySelectorAll('#trends-table thead th')
// Clear other indicators .forEach(h => h.classList.remove('asc','desc'));
document.querySelectorAll('#trends-table thead th') th.classList.add(asc ? 'asc' : 'desc');
.forEach(h => h.classList.remove('asc','desc'));
th.classList.add(asc ? 'asc' : 'desc');
const idx = th.cellIndex; const idx = th.cellIndex;
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 av = a.cells[idx].textContent; const av = a.cells[idx].textContent;
const bv = b.cells[idx].textContent; const bv = b.cells[idx].textContent;
return asc return asc
? av.localeCompare(bv, undefined, { numeric: true }) ? av.localeCompare(bv, undefined, { numeric: true })
: bv.localeCompare(av, undefined, { numeric: true }); : bv.localeCompare(av, undefined, { numeric: true });
});
rows.forEach(r => tbody.appendChild(r));
}); });
rows.forEach(r => tbody.appendChild(r));
}); });
});
} }
function initChart() { function initChart() {
@ -116,26 +112,22 @@ function initChart() {
function updateView() { function updateView() {
if (!chart) return; if (!chart) return;
// Determine 'now' based on latest reading // Use latest reading time as “now”
const maxEpoch = Math.max(...readings.map(r => r.dateObj.getTime())); const maxEpoch = readings.reduce((m, r) => Math.max(m, r.dateObj.getTime()), 0);
const nowDate = new Date(maxEpoch); const now = new Date(maxEpoch);
// Compute 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 = idx === 4 const cutoff = (idx === tfConfig.length - 1)
? new Date(0) ? new Date(0)
: subtract(nowDate, count, unit); : subtract(now, count, unit);
// Filter data
const filtered = readings.filter(r => r.dateObj >= cutoff); const filtered = readings.filter(r => r.dateObj >= cutoff);
// 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);
// Update 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')) {
@ -161,7 +153,6 @@ function updateView() {
} }
chart.update(); chart.update();
// 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 => {