D3 upgrade (library for visualizing data such as main view, graphs, etc.)

lib/client/index.js

@@ -276,7 +276,7 @@ client.load = function load (serverSettings, callback) {
 
   function formatTime (time, compact) {
     var timeFormat = getTimeFormat(false, compact);
-    time = d3.time.format(timeFormat)(time);
+    time = d3.timeFormat(timeFormat)(time);
     if (client.settings.timeFormat !== 24) {
       time = time.toLowerCase();
     }
@@ -375,14 +375,14 @@ client.load = function load (serverSettings, callback) {
   // clears the current user brush and resets to the current real time data
   function updateBrushToNow (skipBrushing) {
 
-    // get current time range
-    var dataRange = client.dataExtent();
-
     // update brush and focus chart with recent data
-    d3.select('.brush')
-      .transition()
-      .duration(UPDATE_TRANS_MS)
-      .call(chart.brush.extent([new Date(dataRange[1].getTime() - client.focusRangeMS), dataRange[1]]));
+    var brushExtent = client.dataExtent();
+
+    brushExtent[0] = new Date(brushExtent[1].getTime() - client.focusRangeMS);
+
+    // console.log('Resetting brush in updateBrushToNow: ', brushExtent);
+
+    chart.theBrush && chart.theBrush.call(chart.brush.move, brushExtent.map(chart.xScale2));
 
     if (!skipBrushing) {
       brushed();
@@ -398,21 +398,34 @@ client.load = function load (serverSettings, callback) {
   }
 
   function brushed () {
+    // Brush not initialized
+    if (!chart.theBrush) {
+      return;
+    }
+
+    // default to most recent focus period
+    var brushExtent = client.dataExtent();
+    brushExtent[0] = new Date(brushExtent[1].getTime() - client.focusRangeMS);
 
-    var brushExtent = chart.brush.extent();
+    var brushedRange = d3.brushSelection(chart.theBrush.node());
 
-    // ensure that brush extent is fixed at 3.5 hours
-    if (brushExtent[1].getTime() - brushExtent[0].getTime() !== client.focusRangeMS) {
+    if (brushedRange) {
+      brushExtent = brushedRange.map(chart.xScale2.invert);
+    }
+
+    // console.log('Brushed to: ', brushExtent);
+
+    if (!brushedRange || (brushExtent[1].getTime() - brushExtent[0].getTime() !== client.focusRangeMS)) {
       // ensure that brush updating is with the time range
       if (brushExtent[0].getTime() + client.focusRangeMS > client.dataExtent()[1].getTime()) {
         brushExtent[0] = new Date(brushExtent[1].getTime() - client.focusRangeMS);
-        d3.select('.brush')
-          .call(chart.brush.extent([brushExtent[0], brushExtent[1]]));
       } else {
         brushExtent[1] = new Date(brushExtent[0].getTime() + client.focusRangeMS);
-        d3.select('.brush')
-          .call(chart.brush.extent([brushExtent[0], brushExtent[1]]));
       }
+
+      // console.log('Updating brushed to: ', brushExtent);
+
+      chart.theBrush.call(chart.brush.move, brushExtent.map(chart.xScale2));
     }
 
     function adjustCurrentSGVClasses (value, isCurrent) {
@@ -428,7 +441,6 @@ client.load = function load (serverSettings, callback) {
       currentBG.toggleClass('icon-hourglass', value === 9);
       currentBG.toggleClass('error-code', value < 39);
       currentBG.toggleClass('bg-limit', value === 39 || value > 400);
-      container.removeClass('loading');
     }
 
     function updateCurrentSGV (entry) {
@@ -546,6 +558,8 @@ client.load = function load (serverSettings, callback) {
 
     var top = (client.bottomOfPills() + 5);
     $('#chartContainer').css({ top: top + 'px', height: $(window).height() - top - 10 });
+
+    container.removeClass('loading');
   }
 
   function sgvToColor (sgv) {
@@ -1130,6 +1144,7 @@ client.load = function load (serverSettings, callback) {
   }
 
   function dataUpdate (received) {
+    console.info('got dataUpdate', new Date(client.now));
 
     var lastUpdated = Date.now();
     receiveDData(received, client.ddata, client.settings);
@@ -1171,6 +1186,8 @@ client.load = function load (serverSettings, callback) {
       chart.update(false);
       client.plugins.updateVisualisations(client.nowSBX);
       brushed();
+    } else {
+      chart.updateContext();
     }
   }
 };