peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add graphs on dashboard

Browse Source
This commit is contained in:
Peter Stockings
2024-12-24 13:31:01 +11:00
parent 03510190ea
commit 7626ec4c94
2 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/routes.py
View File

@@ -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

90
app/templates/dashboard.html
View File

@@ -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>