app/core/templates/core/navbar.html

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

app/medwings/templates/medwings/dashboard.html

@@ -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">
+  <div class="flex flex-col justify-center items-center gap-8 py-4 px-8 w-full h-full">
-    <h1>Dashboard</h1>
+
-    <p1>There is nothing here yet.</p1>
+    <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 %}

app/medwings/views.py

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