RPM manager - bp and weight graphs

resources/views/app/practice-management/rpm-manager/index.blade.php

@@ -6,8 +6,9 @@
             padding-top: 10px;
         }
     </style>
-    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
-    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
+    <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 class="p-3 mcp-theme-1" id="practice-rpm-manager">
 
@@ -445,7 +446,9 @@
                 <div class="stag-popup-content-inner">
                     <div class="popup-content-container px-3">
                         <h3 class="m-0 font-size-16" id="rpm-manager-bp-caremonth"></h3>
-                        <div id="rpm-manager-bp-graph"></div>
+                        <div id="rpm-manager-bp-graph-container" class="mt-3 mr-3">
+                            <div id="rpm-manager-bp-graph"></div>
+                        </div>
                         <table class="table table-condensed table-sm table-bordered mt-3 cm-tab" id="rpm-manager-bp-matrix">
                             <thead>
                             <tr>
@@ -474,7 +477,9 @@
                 <div class="stag-popup-content-inner">
                     <div class="popup-content-container px-3">
                         <h3 class="m-0 font-size-16" id="rpm-manager-weight-caremonth"></h3>
-                        <div id="rpm-manager-weight-graph"></div>
+                        <div id="rpm-manager-weight-graph-container" class="mt-3 mr-3">
+                            <div id="rpm-manager-weight-graph"></div>
+                        </div>
                         <table class="table table-condensed table-sm table-bordered mt-3 cm-tab" id="rpm-manager-weight-matrix">
                             <thead>
                             <tr>
@@ -532,6 +537,7 @@
                     for ($i = 0; $i < count($iPatient->measurements_bp_json); $i++) {
                         $timestampInSec = floor($iPatient->measurements_bp_json[$i]->ts / 1000);
                         $iPatient->measurements_bp_json[$i]->date_display = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'm/d/y');
+                        $iPatient->measurements_bp_json[$i]->date_standard = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'Y-m-d');
                         $iPatient->measurements_bp_json[$i]->time_display = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'h:i A') . ' EST';
                     }
                 }
@@ -540,6 +546,7 @@
                     for ($i = 0; $i < count($iPatient->measurements_weight_json); $i++) {
                         $timestampInSec = floor($iPatient->measurements_weight_json[$i]->ts / 1000);
                         $iPatient->measurements_weight_json[$i]->date_display = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'm/d/y');
+                        $iPatient->measurements_weight_json[$i]->date_standard = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'Y-m-d');
                         $iPatient->measurements_weight_json[$i]->time_display = friendly_date_time_short_with_tz_from_timestamp($timestampInSec, 'EASTERN', '-', 'h:i A') . ' EST';
                         $iPatient->measurements_weight_json[$i]->numericValue = round($iPatient->measurements_weight_json[$i]->numericValue, 1);
                     }
@@ -558,16 +565,16 @@
                 parent
                     .off('click', '.btn-bp-popup')
                     .on('click', '.btn-bp-popup', function() {
-                        prepareMeasurementsPopup($(this).attr('data-uid'), 'bp');
                         showStagPopup('rpm-manager-bp-popup');
+                        prepareMeasurementsPopup($(this).attr('data-uid'), 'bp');
                         return false;
                     });
 
                 parent
                     .off('click', '.btn-weight-popup')
                     .on('click', '.btn-weight-popup', function() {
-                        prepareMeasurementsPopup($(this).attr('data-uid'), 'weight');
                         showStagPopup('rpm-manager-weight-popup');
+                        prepareMeasurementsPopup($(this).attr('data-uid'), 'weight');
                         return false;
                     });
 
@@ -589,6 +596,12 @@
                 $('#rpm-manager-' + _type + '-caremonth').text('Care Month of: ' + careMonth.month_display + '  |  ' + (_type === 'bp' ? 'Blood Pressure' : 'Weight'));
 
                 // graph
+                if(_type === 'bp') {
+                    initBpGraph(measurements);
+                }
+                else if(_type === 'weight') {
+                    initWeightGraph(measurements);
+                }
 
                 // matrix
                 if(!measurements) measurements = [];
@@ -680,6 +693,87 @@
                 initMoes();
             }
 
+            function initBpGraph(_measurements) {
+                console.log(_measurements.map(_x => _x.date_standard));
+                $('#rpm-manager-bp-graph-container')
+                    .empty()
+                    .append('<div id="rpm-manager-bp-graph"></div>');
+                c3.generate({
+                    bindto: '#rpm-manager-bp-graph',
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', ..._measurements.map(_x => _x.date_standard)],
+                            ['Systolic BP', ..._measurements.map(_x => _x.sbpMmHg)],
+                            ['Diastolic BP', ..._measurements.map(_x => _x.dbpMmHg)]
+                        ]
+                    },
+                    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'
+                            },
+                            min: 60,
+                            max: 220
+                        },
+                    },
+                    regions: [
+                        {axis: 'y', start: 100, end: 130, class: 'safe-region', label: 'Safe Systolic BP: 100 to 130 mmHg'},
+                        {axis: 'y', start: 60, end: 90, class: 'safe-region', label: 'Safe Diastolic BP: 60 to 90 mmHg'}
+                    ]
+                });
+            }
+
+            function initWeightGraph(_measurements) {
+                $('#rpm-manager-weight-graph-container')
+                    .empty()
+                    .append('<div id="rpm-manager-weight-graph"></div>');
+                c3.generate({
+                    bindto: '#rpm-manager-weight-graph',
+                    data: {
+                        x: 'x',
+                        columns: [
+                            ['x', ..._measurements.map(_x => _x.date_standard)],
+                            ['Weight', ..._measurements.map(_x => _x.numericValue)]
+                        ]
+                    },
+                    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'
+                            },
+                            min: 70,
+                            max: 250
+                        },
+                    },
+                    regions: [
+                        // {axis: 'y', start: 100, end: 140, class: 'safe-region', label: 'Safe Weight: 100 to 140 lbs'},
+                    ]
+                });
+            }
+
             addMCInitializer('practice-rpm-manager', init, '#practice-rpm-manager');
         }).call(window);
     </script>