Vitals graph UI (wip)

app/Http/Controllers/PatientController.php

@@ -332,6 +332,11 @@ class PatientController extends Controller
         return view('app.patient.flowsheets', compact('patient', 'pros', 'filter'));
     }
 
+    public function vitalsGraph(Request $request, Client $patient, $filter = '') {
+        $pros = $this->pros;
+        return view('app.patient.vitals-graph', compact('patient', 'pros', 'filter'));
+    }
+
     public function tickets(Request $request, Client $patient) {
         $pros = $this->pros;
         $allPros = Pro::all();

public/css/style.css

@@ -1394,3 +1394,15 @@ button.note-templates-trigger-assessment {
     width: 80px;
     text-align: left;
 }
+
+/* vitals graph */
+.stag-chart {
+    min-height: 300px;
+}
+.stag-chart .safe-region>rect {
+    fill: #d9ffee;
+    fill-opacity: 0.5 !important;
+}
+.stag-chart .safe-region>text {
+    fill: #888;
+}

resources/views/app/patient/vitals-graph.blade.php

@@ -0,0 +1,120 @@
+@extends ('layouts.patient')
+@section('inner-content')
+
+    <link href="/c3/c3.min.css" rel="stylesheet">
+    <script src="/c3/d3.v5.min.js" charset="utf-8"></script>
+    <script src="/c3/c3.min.js"></script>
+
+    <div id="vitalsGraphComponent" class="stag-chart">
+        <h4 class="font-weight-bold mb-3 text-secondary font-size-16">Blood Pressure</h4>
+        <div id="bp-chart" class="mb-4">BP Graph</div>
+        <hr class="m-neg-4">
+        <h4 class="font-weight-bold mb-3 text-secondary font-size-16">Weight</h4>
+        <div id="weight-chart">Weight Graph</div>
+    </div>
+
+    <?php
+    $dates = [];
+    // todo: get from filter/query
+    for ($i=30; $i>=0; $i--) {
+        $d = date_sub(date_create(), date_interval_create_from_date_string($i . " day" . ($i === 1 ? '' : 's')));
+        $dates[] = date_format($d, "Y-m-d");
+    }
+
+    function getMeasurementOfTypeForDate($patient, $category, $date) {
+        $allMeasurements = $patient->allMeasurements->toArray();
+        if(!$allMeasurements) return null;
+        $filtered = array_filter($allMeasurements, function($_measurement) use ($category, $date) {
+            $measurementDate = date('Y-m-d', strtotime($_measurement['effective_date']));
+            return $_measurement['label'] === $category && $measurementDate === $date;
+        });
+        if($filtered && count($filtered)) {
+            $filtered = array_values($filtered);
+            return $filtered[0];
+        }
+        return null;
+    }
+    ?>
+
+    <script>
+        (function() {
+            function init() {
+                bpChart();
+                weightChart();
+            }
+            function bpChart() {
+                var chart = c3.generate({
+                    bindto: '#bp-chart',
+                    data: {
+                        x: 'x',
+                        // xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
+                        columns: [
+                            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
+                            // ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
+                            ['Systolic BP', 120, 130, 125, 135, 145, 130],
+                            ['Diastolic BP', 80, 85, 87, 82, 65, 80]
+                        ]
+                    },
+                    axis: {
+                        x: {
+                            type: 'timeseries',
+                            tick: {
+                                format: '%Y-%m-%d',
+                                multiline: true,
+                                fit: true,
+                                rotate: -45
+                            },
+                        },
+                        y: {
+                            show: true,
+                            label: {
+                                text: 'Blood Pressure (mmHg)',
+                                position: 'outer-middle'
+                            }
+                        },
+                    },
+                    regions: [
+                        {axis: 'y', start: 100, end: 140, class: 'safe-region', label: 'Safe Systolic BP: 100 to 140 mmHg'},
+                        {axis: 'y', start: 70, end: 90, class: 'safe-region', label: 'Safe Diastolic BP: 70 to 90 mmHg'}
+                    ]
+                });
+            }
+            function weightChart() {
+                var chart = c3.generate({
+                    bindto: '#weight-chart',
+                    data: {
+                        x: 'x',
+                        // xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
+                        columns: [
+                            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
+                            ['Weight', 120, 130, 125, 135, 145, 130],
+                        ]
+                    },
+                    axis: {
+                        x: {
+                            type: 'timeseries',
+                            tick: {
+                                format: '%Y-%m-%d',
+                                multiline: true,
+                                fit: true,
+                                rotate: -45
+                            },
+                        },
+                        y: {
+                            show: true,
+                            label: {
+                                text: 'Weight (lbs)',
+                                position: 'outer-middle'
+                            }
+                        },
+                    },
+                    regions: [
+                        {axis: 'y', start: 125, end: 140, class: 'safe-region', label: 'Safe Weight: 100 to 140 lbs'},
+                    ]
+                });
+            }
+            addMCInitializer('vitalsGraph', init, '#vitalsGraphComponent');
+        }).call(window);
+    </script>
+
+@endsection

resources/views/layouts/patient.blade.php

@@ -25,6 +25,10 @@
                             <a class="nav-link {{ strpos($routeName, 'patients.view.flowsheets') === 0 ? 'active' : '' }}"
                                href="{{ route('patients.view.flowsheets', ['patient' => $patient]) }}">Flowsheets</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link {{ strpos($routeName, 'patients.view.vitals-graph') === 0 ? 'active' : '' }}"
+                               href="{{ route('patients.view.vitals-graph', ['patient' => $patient]) }}">Vitals Graph</a>
+                        </li>
                         <li class="nav-item">
                             <a class="nav-link {{ strpos($routeName, 'patients.view.care-months') === 0 ? 'active' : '' }}"
                                href="{{ route('patients.view.care-months', ['patient' => $patient]) }}">Care Months</a>

routes/web.php

@@ -144,6 +144,9 @@ Route::middleware('pro.auth')->group(function () {
         // flowsheets
         Route::get('flowsheets/{filter?}', 'PatientController@flowsheets')->name('flowsheets');
 
+        // vitals-graph
+        Route::get('vitals-graph/{filter?}', 'PatientController@vitalsGraph')->name('vitals-graph');
+
         // tickets
         Route::get('tickets', 'PatientController@tickets')->name('patient-tickets');
     });