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

Load dashboard displays using htmx

Browse Source
This commit is contained in:
Peter Stockings
2026-03-10 16:25:52 +11:00
parent 4f1add9154
commit a0abf41ff6
7 changed files with 387 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/templates/partials/dashboard_graph.html Normal file
View File

@@ -0,0 +1,64 @@
<div 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>