64 lines
3.2 KiB
HTML
64 lines
3.2 KiB
HTML
<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> |