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:29:04 +00:00
parent b584087a4e
commit 8780fb2ea4
1 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/scripts/trends.js
View File

@ -1,6 +1,6 @@
// public/scripts/trends.js // public/scripts/trends.js
// ─── Timeframe options ─────────────────────────────────────────────────────── // ─── Timeframes ──────────────────────────────────────────────────────────────
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' },
@ -11,15 +11,16 @@ const tfConfig = [
// ─── Helpers ───────────────────────────────────────────────────────────────── // ─── Helpers ─────────────────────────────────────────────────────────────────
function formatESTTimestamp(ts) { function formatESTTimestamp(ts) {
// ts is "YYYY-MM-DD HH:mm:ss" in Eastern time
const [date, time] = ts.split(' '); const [date, time] = ts.split(' ');
const [Y, M, D] = date.split('-').map(n=>parseInt(n,10)); const [Y, M, D] = date.split('-').map(Number);
const [h, m] = time.split(':'); const [h, m] = time.split(':');
return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`; return `${M}/${D}/${String(Y).slice(-2)} @${h.padStart(2,'0')}:${m}`;
} }
function parseLocalDate(ts) { function parseLocalDate(ts) {
const [date, time] = ts.split(' '); const [date, time] = ts.split(' ');
const [Y, M, D] = date.split('-').map(n=>parseInt(n,10)); const [Y, M, D] = date.split('-').map(Number);
const [h, m, s] = time.split(':').map(n=>parseInt(n,10)); const [h, m, s] = time.split(':').map(Number);
return new Date(Y, M-1, D, h, m, s); return new Date(Y, M-1, D, h, m, s);
} }
function subtract(date, count, unit) { function subtract(date, count, unit) {
@ -34,11 +35,11 @@ function subtract(date, count, unit) {
return d; return d;
} }
// ─── State & Chart Ref ─────────────────────────────────────────────────────── // ─── State ────────────────────────────────────────────────────────────────────
let readings = []; let readings = [];
let chart; let chart;
// ─── On Load ───────────────────────────────────────────────────────────────── // ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
await loadReadings(); await loadReadings();
setupUI(); setupUI();
@ -46,7 +47,7 @@ document.addEventListener('DOMContentLoaded', async() => {
updateView(); updateView();
}); });
// ─── Load & parse readings ─────────────────────────────────────────────────── // ─── Load 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 => ({
@ -56,9 +57,8 @@ async function loadReadings() {
})); }));
} }
// ─── UI wiring ─────────────────────────────────────────────────────────────── // ─── UI Wiring ────────────────────────────────────────────────────────────────
function setupUI() { function setupUI() {
// 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', ()=>{
@ -67,12 +67,10 @@ 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);
}); });
// 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;
@ -80,11 +78,9 @@ function setupUI() {
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 bv = b.cells[idx].textContent;
return asc return asc
? av.localeCompare(bv,undefined,{numeric:true}) ? a.cells[idx].textContent.localeCompare(b.cells[idx].textContent,undefined,{numeric:true})
: bv.localeCompare(av,undefined,{numeric:true}); : b.cells[idx].textContent.localeCompare(a.cells[idx].textContent,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));
@ -92,7 +88,7 @@ function setupUI() {
}); });
} }
// ─── Chart.js setup ────────────────────────────────────────────────────────── // ─── Chart 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,7 +106,7 @@ function initChart() {
}); });
} }
// ─── Render chart & table ─────────────────────────────────────────────────── // ─── Render ───────────────────────────────────────────────────────────────────
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];
@ -140,7 +136,7 @@ function updateView() {
populateTable(filtered); populateTable(filtered);
} }
// ─── Populate the table ───────────────────────────────────────────────────── // ─── 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 = '';