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 06:04:20 +00:00
parent cc1c77930b
commit 8e54c4d1ec
1 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
public/scripts/trends.js
View File

@ -1,3 +1,4 @@
// Timeframes // Timeframes
const tfConfig = [ const tfConfig = [
{ unit: 'hours', count: 24, label: 'Last 24 Hours' }, { unit: 'hours', count: 24, label: 'Last 24 Hours' },
@ -10,7 +11,7 @@ const tfConfig = [
let readings = []; let readings = [];
let chart; let chart;
// Subtract helper // Helper: subtract time
function subtract(date, count, unit) { function subtract(date, count, unit) {
const d = new Date(date); const d = new Date(date);
switch (unit) { switch (unit) {
@ -23,14 +24,11 @@ function subtract(date, count, unit) {
return d; return d;
} }
// On load
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// 1) Grab the server‐injected readings // Grab server-injected data
const data = window.__INITIAL_READINGS__ || []; const data = window.__INITIAL_READINGS__ || [];
if (!data.length) {
console.warn('No initial readings found.');
}
// 2) Map into local array with Date objs & formatted strings
readings = data.map(r => { readings = data.map(r => {
const dt = new Date(r.epoch_ms); const dt = new Date(r.epoch_ms);
return { return {
@ -45,9 +43,9 @@ document.addEventListener('DOMContentLoaded', () => {
month: 'numeric', month: 'numeric',
day: 'numeric', day: 'numeric',
year: '2-digit', year: '2-digit',
hour12: false,
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit'
hour12: false
}).replace(',', ' @') }).replace(',', ' @')
}; };
}); });
@ -58,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
function setupUI() { function setupUI() {
// Slider + label // 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', () => {
@ -67,24 +65,33 @@ function setupUI() {
}); });
label.textContent = tfConfig[slider.value].label; label.textContent = tfConfig[slider.value].label;
// Metric checkboxes // Metric toggles
document.getElementsByName('metric').forEach(cb => { document.getElementsByName('metric').forEach(cb => {
cb.addEventListener('change', updateView); cb.addEventListener('change', updateView);
}); });
// Table sorting // Sortable headers
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; // Determine sort order
const asc = !th.classList.contains('asc'); const asc = !th.classList.contains('asc');
// Clear other indicators
document.querySelectorAll('#trends-table thead th')
.forEach(h => h.classList.remove('asc','desc'));
th.classList.add(asc ? 'asc' : 'desc');
const idx = th.cellIndex;
const tbody = document.getElementById('trends-table-body'); const tbody = document.getElementById('trends-table-body');
Array.from(tbody.rows) const rows = Array.from(tbody.rows);
.sort((a,b) => asc
? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent, undefined, {numeric:true}) rows.sort((a, b) => {
: b.cells[idx].textContent.localeCompare(a.cells[idx].textContent, undefined, {numeric:true}) const av = a.cells[idx].textContent;
) const bv = b.cells[idx].textContent;
.forEach(r => tbody.appendChild(r)); return asc
th.classList.toggle('asc', asc); ? av.localeCompare(bv, undefined, { numeric: true })
: bv.localeCompare(av, undefined, { numeric: true });
});
rows.forEach(r => tbody.appendChild(r));
}); });
}); });
} }
@ -109,21 +116,21 @@ function initChart() {
function updateView() { function updateView() {
if (!chart) return; if (!chart) return;
// Determine "now" from the latest reading, not the browser clock // Determine 'now' based on latest reading
const maxEpoch = Math.max(...readings.map(r => r.dateObj.getTime())); const maxEpoch = Math.max(...readings.map(r => r.dateObj.getTime()));
const nowDate = new Date(maxEpoch); const nowDate = new Date(maxEpoch);
// Compute cutoff // 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 === 4
? new Date(0) // "All Time" ? new Date(0)
: subtract(nowDate, count, unit); : subtract(nowDate, count, unit);
// Filter // Filter data
const filtered = readings.filter(r => r.dateObj >= cutoff); const filtered = readings.filter(r => r.dateObj >= cutoff);
// Which metrics? // 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);
@ -170,4 +177,3 @@ function updateView() {
tbody.appendChild(tr); tbody.appendChild(tr);
}); });
} }