Add graphs on dashboard

app/routes.py

@@ -66,13 +66,23 @@ def dashboard():
         badges.append("100 Readings Milestone")
     if len(weekly_readings) >= 7:
         badges.append("Logged Readings for 7 Days")
+    
+    # Prepare data for the graphs
+    timestamps = [reading.timestamp.strftime('%b %d') for reading in readings]
+    systolic = [reading.systolic for reading in readings]
+    diastolic = [reading.diastolic for reading in readings]
+    heart_rate = [reading.heart_rate for reading in readings]
 
     # Pass the delete form to the template
     delete_form = DeleteForm()
 
     return render_template('dashboard.html', readings=readings, profile=profile, badges=badges,
                            systolic_avg=systolic_avg, diastolic_avg=diastolic_avg, heart_rate_avg=heart_rate_avg,
-                           delete_form=delete_form)
+                           delete_form=delete_form,
+        timestamps=timestamps,
+        systolic=systolic,
+        diastolic=diastolic,
+        heart_rate=heart_rate)
 
 @main.route('/dashboard/filter', methods=['POST'])
 @login_required

app/templates/dashboard.html

@@ -42,11 +42,99 @@
         </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.300ms 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: false }" class="p-4 bg-white rounded-lg shadow-md">
         <!-- Collapsible Header -->
         <div class="flex justify-between items-center">
             <h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
-            <button @click="open = !open" class="text-blue-600 hover:underline">
+            <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 Filters</span>
                 <span x-show="open" x-cloak>Hide Filters</span>
             </button>