feat: implement dashboard
This commit is contained in:
parent
f28f9179f3
commit
a153642f72
@ -45,6 +45,12 @@
|
||||
</div>
|
||||
</a>
|
||||
<a href="/">Home</a>
|
||||
{% if request.user.is_authenticated %}
|
||||
<a href="{% url 'dashboard' %}">Dashboard</a>
|
||||
{% endif %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<a class="btn text-lg" href="{% url 'mews-init' %}">Record Vitals</a>
|
||||
{% endif %}
|
||||
<div class="grow"></div>
|
||||
{% if request.user.is_authenticated %}
|
||||
<a class="btn-outline text-lg" href="{% url 'logout' %}">Log Out</a>
|
||||
|
||||
@ -5,8 +5,141 @@
|
||||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-col justify-center items-center gap-2 py-4 mx-4 max-w-4xl">
|
||||
<h1>Dashboard</h1>
|
||||
<p1>There is nothing here yet.</p1>
|
||||
<div class="flex flex-col justify-center items-center gap-8 py-4 px-8 w-full h-full">
|
||||
|
||||
<h1 class="w-full text-center">Dashboard</h1>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">MEWS Measurements</h2>
|
||||
{% if mews_data %}
|
||||
<canvas id="mewsChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">Blood Pressure Measurements</h2>
|
||||
{% if blood_pressure_data %}
|
||||
<canvas id="bloodPressureChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">Body Temperature Measurements</h2>
|
||||
{% if body_temp_data %}
|
||||
<canvas id="bodyTempChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">Heart Rate Measurements</h2>
|
||||
{% if heart_rate_data %}
|
||||
<canvas id="heartRateChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">Blood Oxygenation Measurements</h2>
|
||||
{% if spo2_level_data %}
|
||||
<canvas id="spo2LevelChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-2 p-4 w-full max-h-96">
|
||||
<h2 class="w-full text-center">Respiration Score Measurements</h2>
|
||||
{% if respiration_score_data %}
|
||||
<canvas id="respirationScoreChart"></canvas>
|
||||
{% else %}
|
||||
<div class="flex flex-col justify-center items-center h-32 bg-primary-200/25 px-16 rounded-lg">
|
||||
<p class="italic text-center text-primary/25 font-semibold text-lg px-4">There is no data yet</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/index.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||
<script>
|
||||
async function createChart(id, data, label) {
|
||||
new Chart(document.getElementById(id), {
|
||||
type: 'scatter',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: label,
|
||||
data: data,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)', // color for point fill
|
||||
borderColor: 'rgba(75, 192, 192, 1)', // color for point border
|
||||
pointBackgroundColor: 'rgba(75, 192, 192, 1)', // color for point fill (on hover)
|
||||
pointBorderColor: '#fff', // color for point border (on hover)
|
||||
pointBorderWidth: 1, // border width for point (on hover)
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time',
|
||||
position: 'bottom'
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'left'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const mewsData = JSON.parse('{{ mews_data|safe }}');
|
||||
const bloodPressureData = JSON.parse('{{ blood_pressure_data|safe }}');
|
||||
const bodyTempData = JSON.parse('{{ body_temp_data|safe }}');
|
||||
const heartRateData = JSON.parse('{{ heart_rate_data|safe }}');
|
||||
const spo2LevelData = JSON.parse('{{ spo2_level_data|safe }}');
|
||||
const respirationScoreData = JSON.parse('{{ respiration_score_data|safe }}');
|
||||
|
||||
for (let dataset of [mewsData, bloodPressureData, bodyTempData, heartRateData, spo2LevelData, respirationScoreData]) {
|
||||
dataset.forEach((data) => {
|
||||
data.x = new Date(data.x * 1000).toISOString();
|
||||
});
|
||||
}
|
||||
|
||||
{% if mews_data %}
|
||||
createChart("mewsChart", mewsData, "Modified Early Warning Score");
|
||||
{% endif %}
|
||||
{% if blood_pressure_data %}
|
||||
createChart("bloodPressureChart", bloodPressureData, "Systolic Blood Pressure (mmHg)");
|
||||
{% endif %}
|
||||
{% if body_temp_data %}
|
||||
createChart("bodyTempChart", bodyTempData, "Body Temperature (°C)");
|
||||
{% endif %}
|
||||
{% if heart_rate_data %}
|
||||
createChart("heartRateChart", heartRateData, "Heart Rate (bpm)");
|
||||
{% endif %}
|
||||
{% if spo2_level_data %}
|
||||
createChart("spo2LevelChart", spo2LevelData, "Blood Oxygenation (%)");
|
||||
{% endif %}
|
||||
{% if respiration_score_data %}
|
||||
createChart("respirationScoreChart", respirationScoreData, "Respiration Score");
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
from datetime import timedelta
|
||||
import json
|
||||
|
||||
from django.shortcuts import redirect, render
|
||||
from django.http import HttpResponse, JsonResponse
|
||||
@ -18,7 +19,23 @@ def index(request):
|
||||
@login_required
|
||||
@require_http_methods(["GET"])
|
||||
def dashboard(request):
|
||||
return render(request, 'medwings/dashboard.html')
|
||||
mews_records = models.MewsRecord.objects.filter(user=request.user)
|
||||
blood_pressure_records = models.BloodPressureRecord.objects.filter(user=request.user)
|
||||
body_temp_records = models.BodyTempRecord.objects.filter(user=request.user)
|
||||
heart_rate_records = models.HeartRateRecord.objects.filter(user=request.user)
|
||||
spo2_level_records = models.Spo2LevelRecord.objects.filter(user=request.user)
|
||||
respiration_score_records = models.RespirationScoreRecord.objects.filter(user=request.user)
|
||||
|
||||
context = {
|
||||
"mews_data": json.dumps([{"x": record.recorded.timestamp(), "y": record.value_n} for record in mews_records]),
|
||||
"blood_pressure_data": json.dumps([{"x": record.recorded.timestamp(), "y": record.value_systolic_mmhg} for record in blood_pressure_records]),
|
||||
"body_temp_data": json.dumps([{"x": record.recorded.timestamp(), "y": float(record.value_celsius)} for record in body_temp_records]),
|
||||
"heart_rate_data": json.dumps([{"x": record.recorded.timestamp(), "y": record.value_bpm} for record in heart_rate_records]),
|
||||
"spo2_level_data": json.dumps([{"x": record.recorded.timestamp(), "y": record.value_percent} for record in spo2_level_records]),
|
||||
"respiration_score_data": json.dumps([{"x": record.recorded.timestamp(), "y": record.value_severity} for record in respiration_score_records]),
|
||||
}
|
||||
|
||||
return render(request, 'medwings/dashboard.html', context)
|
||||
|
||||
|
||||
@login_required
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user