Update app.py

app.py

@@ -214,29 +214,24 @@ def dashboard():
             <input type="text" id="mrd" placeholder="Enter MRD number" />
             <button onclick="loadData()">Load</button>
         </div>
-
         <div class="grid-container">
             <div class="chart-box" id="hr_chart"></div>
             <div class="chart-box" id="rr_chart"></div>
             <div class="chart-box" id="spo2_chart"></div>
             <div class="chart-box" id="bp_chart"></div>
         </div>
-
         <script>
             async function loadData() {
                 const mrd = document.getElementById("mrd").value.trim();
                 if (!mrd) return alert("Please enter an MRD number.");
                 const res = await fetch(`/vitals_data?mrd=${mrd}`);
                 const data = await res.json();
-
                 const timestamps = [], hr = [], rr = [], spo2 = [], sys = [], dia = [];
-
                 for (let v of data) {
                     timestamps.push(v.timestamp);
                     hr.push(v.heart_rate);
                     rr.push(v.respiratory_rate);
                     spo2.push(v.oxygen_saturation);
-
                     if (v.blood_pressure && v.blood_pressure.includes("/")) {
                         const [s, d] = v.blood_pressure.split("/");
                         sys.push(parseInt(s));
@@ -247,30 +242,79 @@ def dashboard():
                     }
                 }
 
-                const layout = (title) => ({
-                    title,
+                // Layouts with fixed y-axis ranges
+                const layoutHR = {
+                    title: "Heart Rate",
                     height: 280,
                     margin: { t: 30, l: 40, r: 20, b: 40 },
                     xaxis: { title: "Time", tickangle: -45 },
-                    yaxis: { title: "Value" }
-                });
+                    yaxis: { title: "bpm", range: [40, 130] }
+                };
+
+                const layoutRR = {
+                    title: "Respiratory Rate",
+                    height: 280,
+                    margin: { t: 30, l: 40, r: 20, b: 40 },
+                    xaxis: { title: "Time", tickangle: -45 },
+                    yaxis: { title: "breaths/min", range: [5, 30] }
+                };
+
+                const layoutSpO2 = {
+                    title: "Oxygen Saturation",
+                    height: 280,
+                    margin: { t: 30, l: 40, r: 20, b: 40 },
+                    xaxis: { title: "Time", tickangle: -45 },
+                    yaxis: { title: "%", range: [60, 100] }
+                };
+
+                const layoutBP = {
+                    title: "Blood Pressure",
+                    height: 280,
+                    margin: { t: 30, l: 40, r: 20, b: 40 },
+                    xaxis: { title: "Time", tickangle: -45 },
+                    yaxis: { title: "mmHg", range: [40, 200] }
+                };
 
                 Plotly.newPlot("hr_chart", [{
-                    x: timestamps, y: hr, name: "Heart Rate", type: "scatter", mode: "lines+markers"
-                }], layout("Heart Rate"));
+                    x: timestamps,
+                    y: hr,
+                    name: "Heart Rate",
+                    type: "scatter",
+                    mode: "lines+markers"
+                }], layoutHR);
 
                 Plotly.newPlot("rr_chart", [{
-                    x: timestamps, y: rr, name: "Respiratory Rate", type: "scatter", mode: "lines+markers"
-                }], layout("Respiratory Rate"));
+                    x: timestamps,
+                    y: rr,
+                    name: "Respiratory Rate",
+                    type: "scatter",
+                    mode: "lines+markers"
+                }], layoutRR);
 
                 Plotly.newPlot("spo2_chart", [{
-                    x: timestamps, y: spo2, name: "Oxygen Saturation", type: "scatter", mode: "lines+markers"
-                }], layout("Oxygen Saturation"));
+                    x: timestamps,
+                    y: spo2,
+                    name: "Oxygen Saturation",
+                    type: "scatter",
+                    mode: "lines+markers"
+                }], layoutSpO2);
 
                 Plotly.newPlot("bp_chart", [
-                    { x: timestamps, y: sys, name: "Systolic", type: "scatter", mode: "lines+markers" },
-                    { x: timestamps, y: dia, name: "Diastolic", type: "scatter", mode: "lines+markers" }
-                ], layout("Blood Pressure"));
+                    {
+                        x: timestamps,
+                        y: sys,
+                        name: "Systolic",
+                        type: "scatter",
+                        mode: "lines+markers"
+                    },
+                    {
+                        x: timestamps,
+                        y: dia,
+                        name: "Diastolic",
+                        type: "scatter",
+                        mode: "lines+markers"
+                    }
+                ], layoutBP);
             }
         </script>
     </body>
@@ -279,6 +323,7 @@ def dashboard():
     return render_template_string(html)
 
 
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)