54 lines
2.3 KiB
HTML
54 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<title>Trend Graph</title>
|
||
</head>
|
||
<body>
|
||
<header class="main-header">
|
||
<img src="/image/logo.png" class="logo" alt="Amazon Logo">
|
||
<span class="header-title"> | Fuego - Heat Tracker</span>
|
||
<button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
|
||
<button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
|
||
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
|
||
</header>
|
||
|
||
<div class="page-container">
|
||
<h1>Trend Analysis</h1>
|
||
|
||
<div id="trend-controls" style="text-align:center; margin-bottom:1rem;">
|
||
<!-- Interval slider -->
|
||
<label for="periodSlider">Interval: <strong><span id="periodLabel">Daily</span></strong></label><br/>
|
||
<input type="range" id="periodSlider" min="0" max="4" step="1" value="1">
|
||
|
||
<!-- Metric/stat toggles -->
|
||
<div id="metricToggles" style="margin-top:1rem;">
|
||
<!-- temperature -->
|
||
<label><input type="checkbox" data-metric="temp" data-stat="avg" checked> Temp Avg</label>
|
||
<label><input type="checkbox" data-metric="temp" data-stat="min" checked> Temp Min</label>
|
||
<label><input type="checkbox" data-metric="temp" data-stat="max" checked> Temp Max</label>
|
||
<!-- humidity -->
|
||
<label><input type="checkbox" data-metric="hum" data-stat="avg" checked> Hum Avg</label>
|
||
<label><input type="checkbox" data-metric="hum" data-stat="min" checked> Hum Min</label>
|
||
<label><input type="checkbox" data-metric="hum" data-stat="max" checked> Hum Max</label>
|
||
<!-- heat index -->
|
||
<label><input type="checkbox" data-metric="hi" data-stat="avg" checked> HI Avg</label>
|
||
<label><input type="checkbox" data-metric="hi" data-stat="min" checked> HI Min</label>
|
||
<label><input type="checkbox" data-metric="hi" data-stat="max" checked> HI Max</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="trendChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
|
||
<script src="scripts/trends.js"></script>
|
||
</body>
|
||
</html>
|