From 7afc0a14c77f741da21666f9a3888fee1e7cc327 Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 23 Apr 2025 02:06:23 +0000
Subject: [PATCH] Update public/trends.html

---
 public/trends.html | 75 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 12 deletions(-)
diff --git a/public/trends.html b/public/trends.html
index e6169f4..11045ae 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -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>
\ No newline at end of file
+</html>
