Delta BGs

- Delta 35% font size, right of BG - BG font size reduced from 900% to 800% to fit existing d3.min.js formatting w/o errors - Delta formatted as +N, -N, +/-N - Retro works w/ strike-through - Delta colors do not follow BG trend (per Scott L.'s wip/iob-cob defaults) - 0+4 = grey delta - 5-9 = yellow delta - 10+ = red delta TODO - Finalize HTML/CSS formatting of BG / Delta TODO - Determine color behavior; independent of BG trend or follow BG trend?
jasoncalabrese · Nov 15, 2014 · 6873e6d · 6873e6d
1 parent 17334f7
commit 6873e6d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/static/css/main.css b/static/css/main.css
@@ -49,17 +49,25 @@ body {
 
 .bgStatus {
     float: right;
-    font-size: 900%;
+    font-size: 800%;
     margin-right: 25px;
     text-align: center;
     white-space: nowrap;
 }
 .bgStatus .currentBG {
     text-decoration: line-through;
 }
+.bgStatus .currentDelta {
+    font-size: 35%;
+    text-decoration: line-through;
+}
 .bgStatus.current .currentBG {
     text-decoration: none;
 }
+.bgStatus.current .currentDelta {
+    font-size: 35%;
+    text-decoration: none;
+}
 .currentDirection {
     font-weight: normal;
     text-decoration: none;

diff --git a/static/index.html b/static/index.html
@@ -33,10 +33,12 @@ <h1 class="customTitle">Nightscout</h1>
                 <div class="bgStatus current">
                     <div id="noButton">
                         <span class="currentBG">---</span>
+                        <span class="currentDelta">--</span>
                         <span class="currentDirection">-</span>
                     </div>
                     <div id="bgButton" hidden="true">
                         <span class="currentBG">---</span>
+                        <span class="currentDelta">--</span>
                         <span class="currentDirection">-</span>
                     </div>
                     <ul class="dropdown-menu" id="silenceBtn">

diff --git a/static/js/client.js b/static/js/client.js
@@ -2,6 +2,7 @@
     "use strict";
 
     var latestSGV,
+        prevSGV,
         errorCode,
         treatments,
         padding = { top: 20, right: 10, bottom: 30, left: 10 },
@@ -288,6 +289,7 @@
                 var prediction = predictAR(nowData, lookback);
                 focusData = focusData.concat(prediction);
                 var focusPoint = nowData[nowData.length - 1];
+                var prevfocusPoint = nowData[nowData.length - 2];
 
                 //in this case the SGV is scaled
                 if (focusPoint.y < 40)
@@ -296,8 +298,20 @@
                     $('.container .currentBG').text('HIGH');
                 else
                     $('.container .currentBG').text(focusPoint.sgv);
+                    var retroDelta = scaleBg(focusPoint.y) - scaleBg(prevfocusPoint.y);
+                    if (retroDelta < 0) {
+                        var retroDeltaString = retroDelta;
+                    }
+                    else if (retroDelta > 0 ) {
+                        var retroDeltaString = "+" + retroDelta;
+                    }
+                    else {
+                        var retroDeltaString = "+/-0";
+                    }
+                    $('.container .currentDelta').text(retroDeltaString);
 
                 $('.container .currentBG').css('text-decoration','line-through');
+                $('.container .currentDelta').css('text-decoration','line-through');
                 $('.container .currentDirection')
                     .html(focusPoint.direction)
             } else {
@@ -370,14 +384,30 @@
                     $('.container .currentBG').text('HIGH');
                 else
                     $('.container .currentBG').text(scaleBg(latestSGV.y));
+		        var bgDelta = scaleBg(latestSGV.y) - scaleBg(prevSGV.y);
+                    if (bgDelta < 0) {
+                        var bgDeltaString = bgDelta;
+                    }
+		            else if (bgDelta > 0 ) {
+			            var bgDeltaString = "+" + bgDelta;
+		            }
+                    else {
+                        var bgDeltaString = "+/-0";
+                    }
+                    $('.container .currentDelta').text(bgDeltaString);
 
                 $('.container .currentBG').css('text-decoration', '');
+                $('.container .currentDelta').css('text-decoration','');
                 $('.container .currentDirection')
                     .html(latestSGV.direction);
 
                 var color = sgvToColor(latestSGV.y);
                 $('.container #noButton .currentBG').css({color: color});
                 $('.container #noButton .currentDirection').css({color: color});
+
+                var deltaColor = deltaToColor(bgDelta);
+                $('.container #noButton .currentDelta').css({color: deltaColor});
+                //$('.container #noButton .currentDirection').css({color: color});
             }
         }
 
@@ -859,6 +889,7 @@
             // change the next line so that it uses the prediction if the signal gets lost (max 1/2 hr)
             if (d[0].length) {
                 latestSGV = d[0][d[0].length - 1];
+                prevSGV = d[0][d[0].length - 2];
 
                 //TODO: alarmHigh/alarmLow probably shouldn't be here
                 if (browserSettings.alarmHigh) {
@@ -901,6 +932,22 @@
         }
     });
 
+    function deltaToColor(delta) {
+        var color = 'grey';
+
+        if (browserSettings.theme == "colors") {
+            if (Math.abs(delta) > 10) {
+                color = 'red';
+            } else if (Math.abs(delta) > 5) {
+                color = 'yellow';
+            } else {
+                //color = '#4cff00';
+                color = 'grey';
+            }
+        }
+
+        return color;
+    }
     function sgvToColor(sgv) {
         var color = 'grey';