JoshBaneyCS/Heat-Tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update public/trends.html

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-23 02:06:23 +00:00
parent 433b7c4681
commit 7afc0a14c7
1 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
public/trends.html
View File

@ -1,27 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="styles.css">
<title>| Fuego - Heat Tracker</title>
<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" />
<!-- DataTables CSS for table styling, sorting arrows, etc. -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<title>Trend Graph & Table</title>
</head>
<body>
<header class="main-header">
<img src="/image/logo.png" alt="Amazon Logo" class="logo">
<span class="header-title">| Fuego - Heat Tracker</span>
<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">
<canvas id="dailyChart"></canvas>
<canvas id="weeklyChart"></canvas>
<canvas id="monthlyChart"></canvas>
<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;">
<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>
<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>
<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>
<!-- Table container -->
<div class="table-container">
<table id="trendTable" class="display" style="width:100%">
<thead>
<tr>
<th>Date/Time</th>
<th>Temperature (°F)</th>
<th>Humidity (%)</th>
<th>Heat Index</th>
<th>Location</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<!-- populated dynamically -->
</tbody>
</table>
</div>
</div>
<!-- Chart.js and zoom plugin -->
<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>
<!-- jQuery + DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- Your trends logic -->
<script src="scripts/trends.js"></script>
</body>
</html>
</html>