From af5915c973215218c8157fe7c8b854e0af6d754a Mon Sep 17 00:00:00 2001 From: ELUTE Date: Mon, 9 Jun 2014 07:23:30 -0400 Subject: [PATCH 1/5] Update client.js --- static/js/client.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/js/client.js b/static/js/client.js index bf2a7599612..c9e88eb86a5 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -36,6 +36,8 @@ var useMetricBg = true; // true means use mmol/L, false means mg/dL + var useMetricBg = true; // true means use mmol/L, false means mg/dL + // create svg and g to contain the chart contents var charts = d3.select('#chartContainer').append('svg') .append('g') From f9154bf08fe684c3873b2256cc2db910b06d86a9 Mon Sep 17 00:00:00 2001 From: ELUTE Date: Mon, 9 Jun 2014 07:36:24 -0400 Subject: [PATCH 2/5] Update client.js --- static/js/client.js | 123 ++++++++++++++++++++------------------------ 1 file changed, 55 insertions(+), 68 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index c9e88eb86a5..68b3efb6f87 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1,14 +1,14 @@ -(function () { +(function() { "use strict"; var retrospectivePredictor = true, latestSGV, treatments, padding = {top: 20, right: 10, bottom: 80, left: 10}, - opacity = {current: 1, DAY: 1, NIGHT: 0.8}, + opacity = {current: 1, DAY: 1, NIGHT: 0.5}, now = Date.now(), data = [], - dateFn = function (d) { return new Date(d.date) }, + dateFn = function (d) { return new Date(d.date)}, xScale, xScale2, yScale, yScale2, xAxis, yAxis, xAxis2, yAxis2, prevChartWidth = 0, @@ -36,8 +36,6 @@ var useMetricBg = true; // true means use mmol/L, false means mg/dL - var useMetricBg = true; // true means use mmol/L, false means mg/dL - // create svg and g to contain the chart contents var charts = d3.select('#chartContainer').append('svg') .append('g') @@ -64,14 +62,6 @@ context.append('g') .attr('class', 'y axis'); - // lixgbg: Convert mg/dL BG value to metric mmol - function scaleBg(bg) { - if (useMetricBg) { - return (Math.round((bg / 18) * 10) / 10).toFixed(1); - } else - return bg; - } - // initial setup of chart when data is first made available function initializeCharts() { @@ -86,7 +76,7 @@ .domain(d3.extent(data, function (d) { return d.date; })); yScale2 = d3.scale.log() - .domain([scaleBg(36), scaleBg(420)]); + .domain([36, 420]); xAxis = d3.svg.axis() .scale(xScale) @@ -96,8 +86,7 @@ yAxis = d3.svg.axis() .scale(yScale) .tickFormat(d3.format('d')) - /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ - .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) + .tickValues([40, 60, 80, 120, 180, 300, 400]) .orient('left'); xAxis2 = d3.svg.axis() @@ -108,8 +97,7 @@ yAxis2 = d3.svg.axis() .scale(yScale2) .tickFormat(d3.format('d')) - /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ - .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) + .tickValues([40, 60, 80, 120, 180, 300, 400]) .orient('right'); // setup a brush @@ -152,7 +140,7 @@ // update the opacity of the context data points to brush extent context.selectAll('circle') .data(data) - .style('opacity', function (d) { return 1; }); + .style('opacity', function(d) {return 1;} ); } function brushEnded() { @@ -244,14 +232,14 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }); + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }); // if new circle then just display focusCircles.enter().append('circle') .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }) + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }) .attr('r', 3); focusCircles.exit() @@ -264,14 +252,14 @@ var bubbleSize = prevChartWidth < 400 ? 4 : (prevChartWidth < 600 ? 3 : 2); focus.selectAll('circle') .data(treatments) - .each(function (d) { drawTreatment(d, bubbleSize, true) }); + .each(function (d) { drawTreatment(d, bubbleSize, true)}); // transition open-top line to correct location focus.select('.open-top') .attr('x1', xScale2(brush.extent()[0])) - .attr('y1', yScale(scaleBg(30))) + .attr('y1', yScale(30)) .attr('x2', xScale2(brush.extent()[1])) - .attr('y2', yScale(scaleBg(30))); + .attr('y2', yScale(30)); // transition open-left line to correct location focus.select('.open-left') @@ -379,9 +367,9 @@ focus.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale(scaleBg(36))) + .attr('y1', yScale(36)) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale(scaleBg(420))) + .attr('y2', yScale(420)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -389,9 +377,9 @@ focus.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(scaleBg(180))) + .attr('y1', yScale(180)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(scaleBg(180))) + .attr('y2', yScale(180)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -399,9 +387,9 @@ focus.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(scaleBg(80))) + .attr('y1', yScale(80)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(scaleBg(80))) + .attr('y2', yScale(80)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -425,9 +413,9 @@ context.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale2(scaleBg(36))) + .attr('y1', yScale2(36)) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale2(scaleBg(420))) + .attr('y2', yScale2(420)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -435,9 +423,9 @@ context.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(scaleBg(180))) + .attr('y1', yScale2(180)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(scaleBg(180))) + .attr('y2', yScale2(180)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -445,9 +433,9 @@ context.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(scaleBg(80))) + .attr('y1', yScale2(80)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(scaleBg(80))) + .attr('y2', yScale2(80)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -492,27 +480,27 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(180))) + .attr('y1', yScale(180)) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(180))); + .attr('y2', yScale(180)); // transition low line to correct location focus.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(80))) + .attr('y1', yScale(80)) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(80))); + .attr('y2', yScale(80)); // transition open-top line to correct location focus.select('.open-top') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(30))) + .attr('y1', yScale(30)) .attr('x2', xScale2(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(30))); + .attr('y2', yScale(30)); // transition open-left line to correct location focus.select('.open-left') @@ -537,18 +525,18 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(scaleBg(180))) + .attr('y1', yScale2(180)) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(scaleBg(180))); + .attr('y2', yScale2(180)); // transition low line to correct location context.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(scaleBg(80))) + .attr('y1', yScale2(80)) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(scaleBg(80))); + .attr('y2', yScale2(80)); } } @@ -559,9 +547,9 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(new Date(now))) - .attr('y1', yScale2(scaleBg(36))) + .attr('y1', yScale2(36)) .attr('x2', xScale2(new Date(now))) - .attr('y2', yScale2(scaleBg(420))); + .attr('y2', yScale2(420)); // only if a user brush is not active, update brush and focus chart with recent data // else, just transition brush @@ -584,16 +572,16 @@ contextCircles.transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }); + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }); // if new circle then just display contextCircles.enter().append('circle') - .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }) + .attr('cx', function (d) { return xScale2(d.date); }) + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }) .attr('r', 2); contextCircles.exit() @@ -615,11 +603,11 @@ var silenceDropdown = new Dropdown(".dropdown-menu"); - $('#bgButton').click(function (e) { + $('#bgButton').click(function(e) { silenceDropdown.open(e); }); - $("#silenceBtn").find("a").click(function () { + $("#silenceBtn").find("a").click(function() { stopAlarm(true, $(this).data("snooze-time")); }); @@ -634,14 +622,13 @@ socket.on('now', function (d) { now = d; var dateTime = new Date(now); - // lixgbg old: $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); - $('#currentTime').text(d3.time.format('%H:%M')(dateTime)); + $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); // Dim the screen by reducing the opacity when at nighttime - if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7)) { - $('body').css({ 'opacity': opacity.NIGHT }); + if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7 )) { + $('body').css({'opacity': opacity.NIGHT}); } else { - $('body').css({ 'opacity': opacity.DAY }); + $('body').css({'opacity': opacity.DAY}); } }); @@ -700,21 +687,21 @@ socket.on('connect', function () { console.log('Client connected to server.') }); - socket.on('alarm', function () { + socket.on('alarm', function() { console.log("Alarm raised!"); currentAlarmType = 'alarm'; generateAlarm(alarmSound); brushInProgress = false; updateChart(false); }); - socket.on('urgent_alarm', function () { + socket.on('urgent_alarm', function() { console.log("Urgent alarm raised!"); currentAlarmType = 'urgent_alarm'; generateAlarm(urgentAlarmSound); brushInProgress = false; updateChart(false); }); - socket.on('clear_alarm', function () { + socket.on('clear_alarm', function() { if (alarmInProgress) { console.log('clearing alarm'); stopAlarm(); @@ -829,7 +816,7 @@ .data(arc_data) .enter() .append('g') - .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(scaleBg(treatment.y)) + ')'); + .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(treatment.y) + ')'); var arcs = treatmentDots.append('path') .attr('class', 'path') From 184a5bcf88c1539444b49c9ff0fdec4aeb11a637 Mon Sep 17 00:00:00 2001 From: ELUTE Date: Mon, 9 Jun 2014 20:09:11 -0400 Subject: [PATCH 3/5] Update client.js --- static/js/client.js | 123 ++++++++++++++++++++++++-------------------- 1 file changed, 68 insertions(+), 55 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 68b3efb6f87..6d74eef452f 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1,14 +1,14 @@ -(function() { +(function () { "use strict"; var retrospectivePredictor = true, latestSGV, treatments, - padding = {top: 20, right: 10, bottom: 80, left: 10}, + padding = { top: 20, right: 10, bottom: 30, left: 10 }, opacity = {current: 1, DAY: 1, NIGHT: 0.5}, now = Date.now(), data = [], - dateFn = function (d) { return new Date(d.date)}, + dateFn = function (d) { return new Date(d.date) }, xScale, xScale2, yScale, yScale2, xAxis, yAxis, xAxis2, yAxis2, prevChartWidth = 0, @@ -36,6 +36,8 @@ var useMetricBg = true; // true means use mmol/L, false means mg/dL + var useMetricBg = true; // true means use mmol/L, false means mg/dL + // create svg and g to contain the chart contents var charts = d3.select('#chartContainer').append('svg') .append('g') @@ -62,6 +64,14 @@ context.append('g') .attr('class', 'y axis'); + // lixgbg: Convert mg/dL BG value to metric mmol + function scaleBg(bg) { + if (useMetricBg) { + return (Math.round((bg / 18) * 10) / 10).toFixed(1); + } else + return bg; + } + // initial setup of chart when data is first made available function initializeCharts() { @@ -76,7 +86,7 @@ .domain(d3.extent(data, function (d) { return d.date; })); yScale2 = d3.scale.log() - .domain([36, 420]); + .domain([scaleBg(36), scaleBg(420)]); xAxis = d3.svg.axis() .scale(xScale) @@ -86,7 +96,8 @@ yAxis = d3.svg.axis() .scale(yScale) .tickFormat(d3.format('d')) - .tickValues([40, 60, 80, 120, 180, 300, 400]) + /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ + .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) .orient('left'); xAxis2 = d3.svg.axis() @@ -97,7 +108,8 @@ yAxis2 = d3.svg.axis() .scale(yScale2) .tickFormat(d3.format('d')) - .tickValues([40, 60, 80, 120, 180, 300, 400]) + /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ + .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) .orient('right'); // setup a brush @@ -140,7 +152,7 @@ // update the opacity of the context data points to brush extent context.selectAll('circle') .data(data) - .style('opacity', function(d) {return 1;} ); + .style('opacity', function (d) { return 1; }); } function brushEnded() { @@ -232,14 +244,14 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }); + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }); // if new circle then just display focusCircles.enter().append('circle') .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }) + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }) .attr('r', 3); focusCircles.exit() @@ -252,14 +264,14 @@ var bubbleSize = prevChartWidth < 400 ? 4 : (prevChartWidth < 600 ? 3 : 2); focus.selectAll('circle') .data(treatments) - .each(function (d) { drawTreatment(d, bubbleSize, true)}); + .each(function (d) { drawTreatment(d, bubbleSize, true) }); // transition open-top line to correct location focus.select('.open-top') .attr('x1', xScale2(brush.extent()[0])) - .attr('y1', yScale(30)) + .attr('y1', yScale(scaleBg(30))) .attr('x2', xScale2(brush.extent()[1])) - .attr('y2', yScale(30)); + .attr('y2', yScale(scaleBg(30))); // transition open-left line to correct location focus.select('.open-left') @@ -367,9 +379,9 @@ focus.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale(36)) + .attr('y1', yScale(scaleBg(36))) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale(420)) + .attr('y2', yScale(scaleBg(420))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -377,9 +389,9 @@ focus.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(180)) + .attr('y1', yScale(scaleBg(180))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(180)) + .attr('y2', yScale(scaleBg(180))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -387,9 +399,9 @@ focus.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(80)) + .attr('y1', yScale(scaleBg(80))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(80)) + .attr('y2', yScale(scaleBg(80))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -413,9 +425,9 @@ context.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale2(36)) + .attr('y1', yScale2(scaleBg(36))) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale2(420)) + .attr('y2', yScale2(scaleBg(420))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -423,9 +435,9 @@ context.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(180)) + .attr('y1', yScale2(scaleBg(180))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(180)) + .attr('y2', yScale2(scaleBg(180))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -433,9 +445,9 @@ context.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(80)) + .attr('y1', yScale2(scaleBg(80))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(80)) + .attr('y2', yScale2(scaleBg(80))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -480,27 +492,27 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(180)) + .attr('y1', yScale(scaleBg(180))) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(180)); + .attr('y2', yScale(scaleBg(180))); // transition low line to correct location focus.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(80)) + .attr('y1', yScale(scaleBg(80))) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(80)); + .attr('y2', yScale(scaleBg(80))); // transition open-top line to correct location focus.select('.open-top') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(currentBrushExtent[0])) - .attr('y1', yScale(30)) + .attr('y1', yScale(scaleBg(30))) .attr('x2', xScale2(currentBrushExtent[1])) - .attr('y2', yScale(30)); + .attr('y2', yScale(scaleBg(30))); // transition open-left line to correct location focus.select('.open-left') @@ -525,18 +537,18 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(180)) + .attr('y1', yScale2(scaleBg(180))) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(180)); + .attr('y2', yScale2(scaleBg(180))); // transition low line to correct location context.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(80)) + .attr('y1', yScale2(scaleBg(80))) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(80)); + .attr('y2', yScale2(scaleBg(80))); } } @@ -547,9 +559,9 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(new Date(now))) - .attr('y1', yScale2(36)) + .attr('y1', yScale2(scaleBg(36))) .attr('x2', xScale2(new Date(now))) - .attr('y2', yScale2(420)); + .attr('y2', yScale2(scaleBg(420))); // only if a user brush is not active, update brush and focus chart with recent data // else, just transition brush @@ -572,16 +584,16 @@ contextCircles.transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }); + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }); // if new circle then just display contextCircles.enter().append('circle') - .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }) + .attr('cx', function (d) { return xScale2(d.date); }) + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }) .attr('r', 2); contextCircles.exit() @@ -603,11 +615,11 @@ var silenceDropdown = new Dropdown(".dropdown-menu"); - $('#bgButton').click(function(e) { + $('#bgButton').click(function (e) { silenceDropdown.open(e); }); - $("#silenceBtn").find("a").click(function() { + $("#silenceBtn").find("a").click(function () { stopAlarm(true, $(this).data("snooze-time")); }); @@ -622,13 +634,14 @@ socket.on('now', function (d) { now = d; var dateTime = new Date(now); - $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); + // lixgbg old: $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); + $('#currentTime').text(d3.time.format('%H:%M')(dateTime)); // Dim the screen by reducing the opacity when at nighttime - if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7 )) { - $('body').css({'opacity': opacity.NIGHT}); + if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7)) { + $('body').css({ 'opacity': opacity.NIGHT }); } else { - $('body').css({'opacity': opacity.DAY}); + $('body').css({ 'opacity': opacity.DAY }); } }); @@ -687,21 +700,21 @@ socket.on('connect', function () { console.log('Client connected to server.') }); - socket.on('alarm', function() { + socket.on('alarm', function () { console.log("Alarm raised!"); currentAlarmType = 'alarm'; generateAlarm(alarmSound); brushInProgress = false; updateChart(false); }); - socket.on('urgent_alarm', function() { + socket.on('urgent_alarm', function () { console.log("Urgent alarm raised!"); currentAlarmType = 'urgent_alarm'; generateAlarm(urgentAlarmSound); brushInProgress = false; updateChart(false); }); - socket.on('clear_alarm', function() { + socket.on('clear_alarm', function () { if (alarmInProgress) { console.log('clearing alarm'); stopAlarm(); @@ -816,7 +829,7 @@ .data(arc_data) .enter() .append('g') - .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(treatment.y) + ')'); + .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(scaleBg(treatment.y)) + ')'); var arcs = treatmentDots.append('path') .attr('class', 'path') From 3b8694e080691a2fc9fae23b84eebac26448fd43 Mon Sep 17 00:00:00 2001 From: ELUTE Date: Mon, 9 Jun 2014 22:00:52 -0400 Subject: [PATCH 4/5] Update client.js --- static/js/client.js | 121 ++++++++++++++++++++------------------------ 1 file changed, 54 insertions(+), 67 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 6d74eef452f..48394b86d05 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1,4 +1,4 @@ -(function () { +(function() { "use strict"; var retrospectivePredictor = true, @@ -8,7 +8,7 @@ opacity = {current: 1, DAY: 1, NIGHT: 0.5}, now = Date.now(), data = [], - dateFn = function (d) { return new Date(d.date) }, + dateFn = function (d) { return new Date(d.date)}, xScale, xScale2, yScale, yScale2, xAxis, yAxis, xAxis2, yAxis2, prevChartWidth = 0, @@ -36,8 +36,6 @@ var useMetricBg = true; // true means use mmol/L, false means mg/dL - var useMetricBg = true; // true means use mmol/L, false means mg/dL - // create svg and g to contain the chart contents var charts = d3.select('#chartContainer').append('svg') .append('g') @@ -64,14 +62,6 @@ context.append('g') .attr('class', 'y axis'); - // lixgbg: Convert mg/dL BG value to metric mmol - function scaleBg(bg) { - if (useMetricBg) { - return (Math.round((bg / 18) * 10) / 10).toFixed(1); - } else - return bg; - } - // initial setup of chart when data is first made available function initializeCharts() { @@ -86,7 +76,7 @@ .domain(d3.extent(data, function (d) { return d.date; })); yScale2 = d3.scale.log() - .domain([scaleBg(36), scaleBg(420)]); + .domain([36, 420]); xAxis = d3.svg.axis() .scale(xScale) @@ -96,8 +86,7 @@ yAxis = d3.svg.axis() .scale(yScale) .tickFormat(d3.format('d')) - /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ - .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) + .tickValues([40, 60, 80, 120, 180, 300, 400]) .orient('left'); xAxis2 = d3.svg.axis() @@ -108,8 +97,7 @@ yAxis2 = d3.svg.axis() .scale(yScale2) .tickFormat(d3.format('d')) - /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ - .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) + .tickValues([40, 60, 80, 120, 180, 300, 400]) .orient('right'); // setup a brush @@ -152,7 +140,7 @@ // update the opacity of the context data points to brush extent context.selectAll('circle') .data(data) - .style('opacity', function (d) { return 1; }); + .style('opacity', function(d) {return 1;} ); } function brushEnded() { @@ -244,14 +232,14 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }); + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }); // if new circle then just display focusCircles.enter().append('circle') .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }) + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }) .attr('r', 3); focusCircles.exit() @@ -264,14 +252,14 @@ var bubbleSize = prevChartWidth < 400 ? 4 : (prevChartWidth < 600 ? 3 : 2); focus.selectAll('circle') .data(treatments) - .each(function (d) { drawTreatment(d, bubbleSize, true) }); + .each(function (d) { drawTreatment(d, bubbleSize, true)}); // transition open-top line to correct location focus.select('.open-top') .attr('x1', xScale2(brush.extent()[0])) - .attr('y1', yScale(scaleBg(30))) + .attr('y1', yScale(30)) .attr('x2', xScale2(brush.extent()[1])) - .attr('y2', yScale(scaleBg(30))); + .attr('y2', yScale(30)); // transition open-left line to correct location focus.select('.open-left') @@ -379,9 +367,9 @@ focus.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale(scaleBg(36))) + .attr('y1', yScale(36)) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale(scaleBg(420))) + .attr('y2', yScale(420)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -389,9 +377,9 @@ focus.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(scaleBg(180))) + .attr('y1', yScale(180)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(scaleBg(180))) + .attr('y2', yScale(180)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -399,9 +387,9 @@ focus.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(scaleBg(80))) + .attr('y1', yScale(80)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(scaleBg(80))) + .attr('y2', yScale(80)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -425,9 +413,9 @@ context.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale2(scaleBg(36))) + .attr('y1', yScale2(36)) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale2(scaleBg(420))) + .attr('y2', yScale2(420)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -435,9 +423,9 @@ context.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(scaleBg(180))) + .attr('y1', yScale2(180)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(scaleBg(180))) + .attr('y2', yScale2(180)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -445,9 +433,9 @@ context.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(scaleBg(80))) + .attr('y1', yScale2(80)) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(scaleBg(80))) + .attr('y2', yScale2(80)) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -492,27 +480,27 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(180))) + .attr('y1', yScale(180)) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(180))); + .attr('y2', yScale(180)); // transition low line to correct location focus.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(80))) + .attr('y1', yScale(80)) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(80))); + .attr('y2', yScale(80)); // transition open-top line to correct location focus.select('.open-top') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(currentBrushExtent[0])) - .attr('y1', yScale(scaleBg(30))) + .attr('y1', yScale(30)) .attr('x2', xScale2(currentBrushExtent[1])) - .attr('y2', yScale(scaleBg(30))); + .attr('y2', yScale(30)); // transition open-left line to correct location focus.select('.open-left') @@ -537,18 +525,18 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(scaleBg(180))) + .attr('y1', yScale2(180)) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(scaleBg(180))); + .attr('y2', yScale2(180)); // transition low line to correct location context.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(scaleBg(80))) + .attr('y1', yScale2(80)) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(scaleBg(80))); + .attr('y2', yScale2(80)); } } @@ -559,9 +547,9 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(new Date(now))) - .attr('y1', yScale2(scaleBg(36))) + .attr('y1', yScale2(36)) .attr('x2', xScale2(new Date(now))) - .attr('y2', yScale2(scaleBg(420))); + .attr('y2', yScale2(420)); // only if a user brush is not active, update brush and focus chart with recent data // else, just transition brush @@ -584,16 +572,16 @@ contextCircles.transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }); + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }); // if new circle then just display contextCircles.enter().append('circle') - .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }) + .attr('cx', function (d) { return xScale2(d.date); }) + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }) .attr('r', 2); contextCircles.exit() @@ -615,11 +603,11 @@ var silenceDropdown = new Dropdown(".dropdown-menu"); - $('#bgButton').click(function (e) { + $('#bgButton').click(function(e) { silenceDropdown.open(e); }); - $("#silenceBtn").find("a").click(function () { + $("#silenceBtn").find("a").click(function() { stopAlarm(true, $(this).data("snooze-time")); }); @@ -634,14 +622,13 @@ socket.on('now', function (d) { now = d; var dateTime = new Date(now); - // lixgbg old: $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); - $('#currentTime').text(d3.time.format('%H:%M')(dateTime)); + $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); // Dim the screen by reducing the opacity when at nighttime - if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7)) { - $('body').css({ 'opacity': opacity.NIGHT }); + if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7 )) { + $('body').css({'opacity': opacity.NIGHT}); } else { - $('body').css({ 'opacity': opacity.DAY }); + $('body').css({'opacity': opacity.DAY}); } }); @@ -700,21 +687,21 @@ socket.on('connect', function () { console.log('Client connected to server.') }); - socket.on('alarm', function () { + socket.on('alarm', function() { console.log("Alarm raised!"); currentAlarmType = 'alarm'; generateAlarm(alarmSound); brushInProgress = false; updateChart(false); }); - socket.on('urgent_alarm', function () { + socket.on('urgent_alarm', function() { console.log("Urgent alarm raised!"); currentAlarmType = 'urgent_alarm'; generateAlarm(urgentAlarmSound); brushInProgress = false; updateChart(false); }); - socket.on('clear_alarm', function () { + socket.on('clear_alarm', function() { if (alarmInProgress) { console.log('clearing alarm'); stopAlarm(); @@ -829,7 +816,7 @@ .data(arc_data) .enter() .append('g') - .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(scaleBg(treatment.y)) + ')'); + .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(treatment.y) + ')'); var arcs = treatmentDots.append('path') .attr('class', 'path') From f495873866274c3bc8d6e2d008a5d76f96feea78 Mon Sep 17 00:00:00 2001 From: ELUTE Date: Wed, 11 Jun 2014 07:29:34 -0400 Subject: [PATCH 5/5] Update client.js --- static/js/client.js | 121 ++++++++++++++++++++++++-------------------- 1 file changed, 67 insertions(+), 54 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 48394b86d05..6d74eef452f 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1,4 +1,4 @@ -(function() { +(function () { "use strict"; var retrospectivePredictor = true, @@ -8,7 +8,7 @@ opacity = {current: 1, DAY: 1, NIGHT: 0.5}, now = Date.now(), data = [], - dateFn = function (d) { return new Date(d.date)}, + dateFn = function (d) { return new Date(d.date) }, xScale, xScale2, yScale, yScale2, xAxis, yAxis, xAxis2, yAxis2, prevChartWidth = 0, @@ -36,6 +36,8 @@ var useMetricBg = true; // true means use mmol/L, false means mg/dL + var useMetricBg = true; // true means use mmol/L, false means mg/dL + // create svg and g to contain the chart contents var charts = d3.select('#chartContainer').append('svg') .append('g') @@ -62,6 +64,14 @@ context.append('g') .attr('class', 'y axis'); + // lixgbg: Convert mg/dL BG value to metric mmol + function scaleBg(bg) { + if (useMetricBg) { + return (Math.round((bg / 18) * 10) / 10).toFixed(1); + } else + return bg; + } + // initial setup of chart when data is first made available function initializeCharts() { @@ -76,7 +86,7 @@ .domain(d3.extent(data, function (d) { return d.date; })); yScale2 = d3.scale.log() - .domain([36, 420]); + .domain([scaleBg(36), scaleBg(420)]); xAxis = d3.svg.axis() .scale(xScale) @@ -86,7 +96,8 @@ yAxis = d3.svg.axis() .scale(yScale) .tickFormat(d3.format('d')) - .tickValues([40, 60, 80, 120, 180, 300, 400]) + /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ + .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) .orient('left'); xAxis2 = d3.svg.axis() @@ -97,7 +108,8 @@ yAxis2 = d3.svg.axis() .scale(yScale2) .tickFormat(d3.format('d')) - .tickValues([40, 60, 80, 120, 180, 300, 400]) + /*.tickValues([scaleBg(40), scaleBg(60), scaleBg(80), scaleBg(120), scaleBg(180), scaleBg(300), scaleBg(400)])*/ + .tickValues([2.0, 3.0, 4.0, 6.0, 10.0, 15.0, 22.0]) .orient('right'); // setup a brush @@ -140,7 +152,7 @@ // update the opacity of the context data points to brush extent context.selectAll('circle') .data(data) - .style('opacity', function(d) {return 1;} ); + .style('opacity', function (d) { return 1; }); } function brushEnded() { @@ -232,14 +244,14 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }); + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }); // if new circle then just display focusCircles.enter().append('circle') .attr('cx', function (d) { return xScale(d.date); }) - .attr('cy', function (d) { return yScale(d.sgv); }) - .attr('fill', function (d) { return d.color; }) + .attr('cy', function (d) { return yScale(d.sgv); }) + .attr('fill', function (d) { return d.color; }) .attr('r', 3); focusCircles.exit() @@ -252,14 +264,14 @@ var bubbleSize = prevChartWidth < 400 ? 4 : (prevChartWidth < 600 ? 3 : 2); focus.selectAll('circle') .data(treatments) - .each(function (d) { drawTreatment(d, bubbleSize, true)}); + .each(function (d) { drawTreatment(d, bubbleSize, true) }); // transition open-top line to correct location focus.select('.open-top') .attr('x1', xScale2(brush.extent()[0])) - .attr('y1', yScale(30)) + .attr('y1', yScale(scaleBg(30))) .attr('x2', xScale2(brush.extent()[1])) - .attr('y2', yScale(30)); + .attr('y2', yScale(scaleBg(30))); // transition open-left line to correct location focus.select('.open-left') @@ -367,9 +379,9 @@ focus.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale(36)) + .attr('y1', yScale(scaleBg(36))) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale(420)) + .attr('y2', yScale(scaleBg(420))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -377,9 +389,9 @@ focus.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(180)) + .attr('y1', yScale(scaleBg(180))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(180)) + .attr('y2', yScale(scaleBg(180))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -387,9 +399,9 @@ focus.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale(80)) + .attr('y1', yScale(scaleBg(80))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale(80)) + .attr('y2', yScale(scaleBg(80))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -413,9 +425,9 @@ context.append('line') .attr('class', 'now-line') .attr('x1', xScale(new Date(now))) - .attr('y1', yScale2(36)) + .attr('y1', yScale2(scaleBg(36))) .attr('x2', xScale(new Date(now))) - .attr('y2', yScale2(420)) + .attr('y2', yScale2(scaleBg(420))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -423,9 +435,9 @@ context.append('line') .attr('class', 'high-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(180)) + .attr('y1', yScale2(scaleBg(180))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(180)) + .attr('y2', yScale2(scaleBg(180))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -433,9 +445,9 @@ context.append('line') .attr('class', 'low-line') .attr('x1', xScale(dataRange[0])) - .attr('y1', yScale2(80)) + .attr('y1', yScale2(scaleBg(80))) .attr('x2', xScale(dataRange[1])) - .attr('y2', yScale2(80)) + .attr('y2', yScale2(scaleBg(80))) .style('stroke-dasharray', ('3, 3')) .attr('stroke', 'grey'); @@ -480,27 +492,27 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(180)) + .attr('y1', yScale(scaleBg(180))) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(180)); + .attr('y2', yScale(scaleBg(180))); // transition low line to correct location focus.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale(currentBrushExtent[0])) - .attr('y1', yScale(80)) + .attr('y1', yScale(scaleBg(80))) .attr('x2', xScale(currentBrushExtent[1])) - .attr('y2', yScale(80)); + .attr('y2', yScale(scaleBg(80))); // transition open-top line to correct location focus.select('.open-top') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(currentBrushExtent[0])) - .attr('y1', yScale(30)) + .attr('y1', yScale(scaleBg(30))) .attr('x2', xScale2(currentBrushExtent[1])) - .attr('y2', yScale(30)); + .attr('y2', yScale(scaleBg(30))); // transition open-left line to correct location focus.select('.open-left') @@ -525,18 +537,18 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(180)) + .attr('y1', yScale2(scaleBg(180))) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(180)); + .attr('y2', yScale2(scaleBg(180))); // transition low line to correct location context.select('.low-line') .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(dataRange[0])) - .attr('y1', yScale2(80)) + .attr('y1', yScale2(scaleBg(80))) .attr('x2', xScale2(dataRange[1])) - .attr('y2', yScale2(80)); + .attr('y2', yScale2(scaleBg(80))); } } @@ -547,9 +559,9 @@ .transition() .duration(UPDATE_TRANS_MS) .attr('x1', xScale2(new Date(now))) - .attr('y1', yScale2(36)) + .attr('y1', yScale2(scaleBg(36))) .attr('x2', xScale2(new Date(now))) - .attr('y2', yScale2(420)); + .attr('y2', yScale2(scaleBg(420))); // only if a user brush is not active, update brush and focus chart with recent data // else, just transition brush @@ -572,16 +584,16 @@ contextCircles.transition() .duration(UPDATE_TRANS_MS) .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }); + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }); // if new circle then just display contextCircles.enter().append('circle') - .attr('cx', function (d) { return xScale2(d.date); }) - .attr('cy', function (d) { return yScale2(d.sgv); }) - .attr('fill', function (d) { return d.color; }) - .style('opacity', function (d) { return highlightBrushPoints(d) }) + .attr('cx', function (d) { return xScale2(d.date); }) + .attr('cy', function (d) { return yScale2(d.sgv); }) + .attr('fill', function (d) { return d.color; }) + .style('opacity', function (d) { return highlightBrushPoints(d) }) .attr('r', 2); contextCircles.exit() @@ -603,11 +615,11 @@ var silenceDropdown = new Dropdown(".dropdown-menu"); - $('#bgButton').click(function(e) { + $('#bgButton').click(function (e) { silenceDropdown.open(e); }); - $("#silenceBtn").find("a").click(function() { + $("#silenceBtn").find("a").click(function () { stopAlarm(true, $(this).data("snooze-time")); }); @@ -622,13 +634,14 @@ socket.on('now', function (d) { now = d; var dateTime = new Date(now); - $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); + // lixgbg old: $('#currentTime').text(d3.time.format('%I:%M%p')(dateTime)); + $('#currentTime').text(d3.time.format('%H:%M')(dateTime)); // Dim the screen by reducing the opacity when at nighttime - if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7 )) { - $('body').css({'opacity': opacity.NIGHT}); + if (opacity.current != opacity.NIGHT && (dateTime.getHours() > 21 || dateTime.getHours() < 7)) { + $('body').css({ 'opacity': opacity.NIGHT }); } else { - $('body').css({'opacity': opacity.DAY}); + $('body').css({ 'opacity': opacity.DAY }); } }); @@ -687,21 +700,21 @@ socket.on('connect', function () { console.log('Client connected to server.') }); - socket.on('alarm', function() { + socket.on('alarm', function () { console.log("Alarm raised!"); currentAlarmType = 'alarm'; generateAlarm(alarmSound); brushInProgress = false; updateChart(false); }); - socket.on('urgent_alarm', function() { + socket.on('urgent_alarm', function () { console.log("Urgent alarm raised!"); currentAlarmType = 'urgent_alarm'; generateAlarm(urgentAlarmSound); brushInProgress = false; updateChart(false); }); - socket.on('clear_alarm', function() { + socket.on('clear_alarm', function () { if (alarmInProgress) { console.log('clearing alarm'); stopAlarm(); @@ -816,7 +829,7 @@ .data(arc_data) .enter() .append('g') - .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(treatment.y) + ')'); + .attr('transform', 'translate(' + xScale(treatment.x) + ', ' + yScale(scaleBg(treatment.y)) + ')'); var arcs = treatmentDots.append('path') .attr('class', 'path')