Update public/trends.html
This commit is contained in:
parent
433b7c4681
commit
7afc0a14c7
@ -1,27 +1,78 @@
|
|||||||
<!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.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<link rel="stylesheet" href="styles.css" />
|
||||||
<link rel="stylesheet" href="styles.css">
|
<!-- DataTables CSS for table styling, sorting arrows, etc. -->
|
||||||
<title>| Fuego - Heat Tracker</title>
|
<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" alt="Amazon Logo" class="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>
|
||||||
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
|
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<canvas id="dailyChart"></canvas>
|
<h1>Trend Analysis</h1>
|
||||||
<canvas id="weeklyChart"></canvas>
|
|
||||||
<canvas id="monthlyChart"></canvas>
|
<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>
|
</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>
|
<script src="scripts/trends.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user