From 64c1400465874a40a4ade6eae40b01746b259c48 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 26 Dec 2024 17:55:43 +1100
Subject: [PATCH] Include graphs into tabbed section

---
 app/templates/dashboard.html | 151 ++++++++++++++++-------------------
 1 file changed, 68 insertions(+), 83 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 7e63b0f..9e30ffb 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -42,89 +42,6 @@
         </div>
     </div>
 
-    <!-- Graphs -->
-    <div x-data="{ open: false }" class="bg-white rounded-lg shadow-md p-4">
-        <!-- Header with Toggle Button -->
-        <div class="flex justify-between items-center">
-            <h2 class="text-lg font-bold text-gray-800">Graphs</h2>
-            <button @click="open = !open" class="text-blue-600 hover:underline flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                    stroke="currentColor" class="w-4 h-4 mr-2">
-                    <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
-                    <path x-show="open" x-cloak stroke-linecap="round" stroke-linejoin="round" d="M18 15l-6-6-6 6" />
-                </svg>
-                <span x-show="!open">Show Graphs</span>
-                <span x-show="open" x-cloak>Hide Graphs</span>
-            </button>
-        </div>
-
-        <!-- Collapsible Graph Section -->
-        <div x-show="open" x-transition.duration.50ms class="mt-4 space-y-6">
-            <!-- Blood Pressure Graph -->
-            <div>
-                <h3 class="text-sm font-semibold text-gray-600 mb-2">Blood Pressure (mmHg)</h3>
-                <svg viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" class="w-full">
-                    <!-- Axes -->
-                    <line x1="50" y1="200" x2="550" y2="200" stroke="black" stroke-width="1" /> <!-- X-axis -->
-                    <line x1="50" y1="20" x2="50" y2="200" stroke="black" stroke-width="1" /> <!-- Y-axis -->
-
-                    <!-- Y-axis Labels (Blood Pressure Values) -->
-                    {% for value in range(50, 201, 50) %}
-                    <text x="40" y="{{ 200 - (value / 200 * 180) }}" font-size="10" text-anchor="end">{{ value }}</text>
-                    {% endfor %}
-
-                    <!-- X-axis Labels (Timestamps) -->
-                    {% for i in range(timestamps|length) %}
-                    <text x="{{ 50 + i * 50 }}" y="215" font-size="10" text-anchor="middle">{{ timestamps[i] }}</text>
-                    {% endfor %}
-
-                    <!-- Graph Lines -->
-                    <!-- Systolic Line -->
-                    <polyline fill="none" stroke="blue" stroke-width="2"
-                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (systolic[i] / 200 * 180) }} {% endfor %}" />
-
-                    <!-- Diastolic Line -->
-                    <polyline fill="none" stroke="red" stroke-width="2"
-                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (diastolic[i] / 200 * 180) }} {% endfor %}" />
-
-                    <!-- Axis Labels -->
-                    <text x="25" y="110" font-size="12" transform="rotate(-90, 25, 110)" text-anchor="middle">Blood
-                        Pressure (mmHg)</text>
-                    <text x="300" y="240" font-size="12" text-anchor="middle">Date</text>
-                </svg>
-            </div>
-
-            <!-- Heart Rate Graph -->
-            <div>
-                <h3 class="text-sm font-semibold text-gray-600 mb-2">Heart Rate (bpm)</h3>
-                <svg viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" class="w-full">
-                    <!-- Axes -->
-                    <line x1="50" y1="200" x2="550" y2="200" stroke="black" stroke-width="1" /> <!-- X-axis -->
-                    <line x1="50" y1="20" x2="50" y2="200" stroke="black" stroke-width="1" /> <!-- Y-axis -->
-
-                    <!-- Y-axis Labels (Heart Rate Values) -->
-                    {% for value in range(50, 201, 50) %}
-                    <text x="40" y="{{ 200 - (value / 200 * 180) }}" font-size="10" text-anchor="end">{{ value }}</text>
-                    {% endfor %}
-
-                    <!-- X-axis Labels (Timestamps) -->
-                    {% for i in range(timestamps|length) %}
-                    <text x="{{ 50 + i * 50 }}" y="215" font-size="10" text-anchor="middle">{{ timestamps[i] }}</text>
-                    {% endfor %}
-
-                    <!-- Heart Rate Line -->
-                    <polyline fill="none" stroke="green" stroke-width="2"
-                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (heart_rate[i] / 200 * 180) }} {% endfor %}" />
-
-                    <!-- Axis Labels -->
-                    <text x="25" y="110" font-size="12" transform="rotate(-90, 25, 110)" text-anchor="middle">Heart Rate
-                        (bpm)</text>
-                    <text x="300" y="240" font-size="12" text-anchor="middle">Date</text>
-                </svg>
-            </div>
-        </div>
-    </div>
-
     <div x-data="{ open: {{ 'true' if request.method == 'POST' else 'false' }} }"
         class="p-4 bg-white rounded-lg shadow-md">
         <!-- Collapsible Header -->
@@ -174,6 +91,8 @@
                 class="px-4 py-2 text-sm font-medium border-b-2">Weekly View</button>
             <button @click="activeView = 'monthly'" :class="{'border-blue-600 text-blue-600': activeView === 'monthly'}"
                 class="px-4 py-2 text-sm font-medium border-b-2">Monthly View</button>
+            <button @click="activeView = 'graph'" :class="{'border-blue-600 text-blue-600': activeView === 'monthly'}"
+                class="px-4 py-2 text-sm font-medium border-b-2">Graph View</button>
         </div>
 
         <!-- List -->
@@ -315,6 +234,72 @@
             </div>
         </div>
 
+        <!-- Graph Section -->
+        <div x-show="activeView === 'graph'" x-transition.duration.50ms class="space-y-6">
+            <!-- Blood Pressure Graph -->
+            <div>
+                <h3 class="text-sm font-semibold text-gray-600 mb-2">Blood Pressure (mmHg)</h3>
+                <svg viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" class="w-full">
+                    <!-- Axes -->
+                    <line x1="50" y1="200" x2="550" y2="200" stroke="black" stroke-width="1" /> <!-- X-axis -->
+                    <line x1="50" y1="20" x2="50" y2="200" stroke="black" stroke-width="1" /> <!-- Y-axis -->
+
+                    <!-- Y-axis Labels (Blood Pressure Values) -->
+                    {% for value in range(50, 201, 50) %}
+                    <text x="40" y="{{ 200 - (value / 200 * 180) }}" font-size="10" text-anchor="end">{{ value }}</text>
+                    {% endfor %}
+
+                    <!-- X-axis Labels (Timestamps) -->
+                    {% for i in range(timestamps|length) %}
+                    <text x="{{ 50 + i * 50 }}" y="215" font-size="10" text-anchor="middle">{{ timestamps[i] }}</text>
+                    {% endfor %}
+
+                    <!-- Graph Lines -->
+                    <!-- Systolic Line -->
+                    <polyline fill="none" stroke="blue" stroke-width="2"
+                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (systolic[i] / 200 * 180) }} {% endfor %}" />
+
+                    <!-- Diastolic Line -->
+                    <polyline fill="none" stroke="red" stroke-width="2"
+                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (diastolic[i] / 200 * 180) }} {% endfor %}" />
+
+                    <!-- Axis Labels -->
+                    <text x="25" y="110" font-size="12" transform="rotate(-90, 25, 110)" text-anchor="middle">Blood
+                        Pressure (mmHg)</text>
+                    <text x="300" y="240" font-size="12" text-anchor="middle">Date</text>
+                </svg>
+            </div>
+
+            <!-- Heart Rate Graph -->
+            <div>
+                <h3 class="text-sm font-semibold text-gray-600 mb-2">Heart Rate (bpm)</h3>
+                <svg viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" class="w-full">
+                    <!-- Axes -->
+                    <line x1="50" y1="200" x2="550" y2="200" stroke="black" stroke-width="1" /> <!-- X-axis -->
+                    <line x1="50" y1="20" x2="50" y2="200" stroke="black" stroke-width="1" /> <!-- Y-axis -->
+
+                    <!-- Y-axis Labels (Heart Rate Values) -->
+                    {% for value in range(50, 201, 50) %}
+                    <text x="40" y="{{ 200 - (value / 200 * 180) }}" font-size="10" text-anchor="end">{{ value }}</text>
+                    {% endfor %}
+
+                    <!-- X-axis Labels (Timestamps) -->
+                    {% for i in range(timestamps|length) %}
+                    <text x="{{ 50 + i * 50 }}" y="215" font-size="10" text-anchor="middle">{{ timestamps[i] }}</text>
+                    {% endfor %}
+
+                    <!-- Heart Rate Line -->
+                    <polyline fill="none" stroke="green" stroke-width="2"
+                        points="{% for i in range(timestamps|length) %}{{ 50 + i * 50 }},{{ 200 - (heart_rate[i] / 200 * 180) }} {% endfor %}" />
+
+                    <!-- Axis Labels -->
+                    <text x="25" y="110" font-size="12" transform="rotate(-90, 25, 110)" text-anchor="middle">Heart Rate
+                        (bpm)</text>
+                    <text x="300" y="240" font-size="12" text-anchor="middle">Date</text>
+                </svg>
+            </div>
+        </div>
+
 
     </div>