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

Update public/trends.html

Browse Source
This commit is contained in:
JoshBaneyCS 2025-04-23 02:07:21 +00:00
parent 3c26875e5e
commit ab5f5d2dfc
1 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/trends.html
View File

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