-
+
@@ -467,9 +575,11 @@ function deepMerge(a, b) {
function lineDataset(label, data, color, dashed = false) {
return {
- label, data, borderColor: color, backgroundColor: color + '22',
- borderWidth: 1.5, pointRadius: 0, pointHoverRadius: 4,
- borderDash: dashed ? [4, 3] : [], tension: 0.35, fill: false,
+ label, data, borderColor: color,
+ backgroundColor: dashed ? color + '00' : color + '18',
+ borderWidth: 1.75, pointRadius: 0, pointHoverRadius: 4,
+ borderDash: dashed ? [4, 3] : [], tension: 0.35,
+ fill: dashed ? false : 'origin',
};
}
@@ -697,6 +807,10 @@ function renderCharts(readings, range, yoy = null) {
lbls, '%', { scales: { y: { min: 0, max: 100 } } });
}
+ // Today bar + sparklines use full readings (not downsampled pts)
+ updateTodayBar(readings);
+ updateSparklines(readings);
+
// Wind rose
const roseCanvas = document.getElementById('windRoseCanvas');
if (roseCanvas) {
@@ -767,6 +881,20 @@ async function updateLatest() {
document.getElementById('sTotalRainTile').style.display = '';
}
+ // Hero wind line
+ const heroWind = document.getElementById('heroWindLine');
+ if (heroWind && d.windspeedmph != null) {
+ const dir = d.winddir != null ? cardinal(d.winddir) : '';
+ heroWind.textContent = d.windspeedmph > 0
+ ? `${d.windspeedmph.toFixed(1)} mph ${dir} wind`
+ : 'Calm winds';
+ }
+ // Wind direction on secondary tile
+ const windDirEl = document.getElementById('sWindDir');
+ if (windDirEl && d.winddir != null) windDirEl.textContent = cardinal(d.winddir);
+
+ colorTiles(d);
+
const name = document.getElementById('stationName');
if (name && d.PASSKEY) name.textContent = '';
@@ -1236,6 +1364,116 @@ document.getElementById('saveThreshBtn')?.addEventListener('click', async () =>
} catch { msg.textContent = 'Error'; msg.className = 'save-msg err'; }
});
+// ── Tile color coding ─────────────────────────────────────────────────────────
+function tempColorClass(t) {
+ if (t == null) return '';
+ if (t >= 95) return 'stat-hot';
+ if (t >= 80) return 'stat-warm';
+ if (t <= 32) return 'stat-cold';
+ if (t <= 50) return 'stat-cool';
+ return '';
+}
+function uvColorClass(uv) {
+ if (uv == null || uv < 3) return '';
+ if (uv < 6) return 'stat-uv-mod';
+ if (uv < 8) return 'stat-uv-high';
+ return 'stat-uv-xhigh';
+}
+function applyClass(el, cls) {
+ if (!el) return;
+ el.classList.remove('stat-hot','stat-warm','stat-cool','stat-cold','stat-raining','stat-uv-mod','stat-uv-high','stat-uv-xhigh');
+ if (cls) el.classList.add(cls);
+}
+function colorTiles(d) {
+ // Hero temp color
+ const heroTemp = document.getElementById('sTempF');
+ if (heroTemp && d.tempf != null) {
+ const cls = tempColorClass(d.tempf);
+ const colorMap = { 'stat-hot': 'var(--accent)', 'stat-warm': '#c8a000', 'stat-cold': '#4a7cc7', 'stat-cool': 'var(--cool)', '': 'var(--ink)' };
+ heroTemp.style.color = colorMap[cls] || 'var(--ink)';
+ }
+ // UV tile
+ const uvTile = document.querySelector('[id="sUV"]')?.closest('.hero-stat-val')?.parentElement;
+ // (using the hero-grid cell)
+ const uvParent = document.getElementById('sUV')?.closest('div[class=""]');
+ // Rain rate
+ const rrTile = document.getElementById('statRainRateTile');
+ if (rrTile) applyClass(rrTile, d.rainratein > 0 ? 'stat-raining' : '');
+ const rTile = document.getElementById('statRainTile');
+ if (rTile) applyClass(rTile, d.rainratein > 0 ? 'stat-raining' : '');
+ // Wind tile
+ const wTile = document.getElementById('statWindTile');
+ if (wTile) applyClass(wTile, d.windspeedmph >= 30 ? 'stat-hot' : d.windspeedmph >= 20 ? 'stat-warm' : '');
+}
+
+// ── Sparklines ────────────────────────────────────────────────────────────────
+function drawSparkline(canvasId, values, color) {
+ const canvas = document.getElementById(canvasId);
+ if (!canvas) return;
+ const dpr = window.devicePixelRatio || 1;
+ const W = canvas.offsetWidth || 100, H = 22;
+ canvas.width = W * dpr; canvas.height = H * dpr;
+ canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
+ const ctx = canvas.getContext('2d');
+ ctx.scale(dpr, dpr);
+ const valid = values.filter(v => v != null);
+ if (valid.length < 2) return;
+ const min = Math.min(...valid), max = Math.max(...valid);
+ const range = max - min || 1;
+ const pad = 2;
+ ctx.clearRect(0, 0, W, H);
+ // gradient fill
+ const grad = ctx.createLinearGradient(0, 0, 0, H);
+ grad.addColorStop(0, color + '55'); grad.addColorStop(1, color + '00');
+ ctx.beginPath();
+ const step = (W - pad * 2) / (values.length - 1);
+ let startX = pad, startY;
+ let drawing = false;
+ const pts = [];
+ values.forEach((v, i) => {
+ if (v == null) return;
+ const x = pad + i * step;
+ const y = H - pad - ((v - min) / range) * (H - pad * 3);
+ pts.push([x, y]);
+ });
+ if (!pts.length) return;
+ ctx.beginPath();
+ ctx.moveTo(pts[0][0], pts[0][1]);
+ for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i][0], pts[i][1]);
+ ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.lineJoin = 'round';
+ ctx.stroke();
+ // fill
+ ctx.lineTo(pts[pts.length-1][0], H); ctx.lineTo(pts[0][0], H); ctx.closePath();
+ ctx.fillStyle = grad; ctx.fill();
+}
+
+function updateSparklines(readings) {
+ const step = readings.length > 120 ? Math.ceil(readings.length / 120) : 1;
+ const pts = step > 1 ? readings.filter((_, i) => i % step === 0) : readings;
+ const c = chartColors();
+ drawSparkline('spHum', pts.map(r => r.humidity), c.cool);
+ drawSparkline('spPres', pts.map(r => r.baromrelin), c.accent);
+ drawSparkline('spSolar', pts.map(r => r.solarradiation), c.accent);
+ drawSparkline('spWind', pts.map(r => r.windspeedmph), c.cool);
+}
+
+// ── Today at a glance ─────────────────────────────────────────────────────────
+function updateTodayBar(readings) {
+ const midnightToday = new Date(); midnightToday.setHours(0,0,0,0);
+ const today = readings.filter(r => r.dateutc >= midnightToday.getTime());
+ if (!today.length) return;
+ const temps = today.map(r => r.tempf).filter(v => v != null);
+ const gusts = today.map(r => r.windgustmph).filter(v => v != null);
+ const maxRain = Math.max(...today.map(r => r.dailyrainin || 0));
+ if (temps.length) {
+ document.getElementById('todayHigh').textContent = Math.max(...temps).toFixed(1);
+ document.getElementById('todayLow').textContent = Math.min(...temps).toFixed(1);
+ }
+ document.getElementById('todayRain').textContent = maxRain.toFixed(2);
+ if (gusts.length) document.getElementById('todayGust').textContent = Math.max(...gusts).toFixed(1);
+ document.getElementById('todayBar').style.display = '';
+}
+
// ── NWS Alerts ────────────────────────────────────────────────────────────────
const SEV_CLASS = { Extreme: 'sev-extreme', Severe: 'sev-severe', Moderate: 'sev-moderate', Minor: 'sev-minor' };
async function loadAlerts() {