Fix d3 portrait to landscape brush failure (nightscout#5638)

* fix d3 portrait to landscape brush failure * fix client.renderer.test for highlighBrushPoints function prototype change * fix highlightBrush * move brush reset inside check for valid brush
njmo · May 5, 2020 · 7c5a69d · 7c5a69d
1 parent 17eb4ae
commit 7c5a69d
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 75 deletions.
diff --git a/lib/client/chart.js b/lib/client/chart.js
@@ -84,9 +84,13 @@ function init (client, d3, $) {
 
   function brushEnded () {
     // update the opacity of the context data points to brush extent
+    var selectedRange = chart.createAdjustedRange();
+    var from = selectedRange[0].getTime();
+    var to = selectedRange[1].getTime();
+
     chart.context.selectAll('circle')
       .data(client.entries)
-      .style('opacity', function(d) { return renderer.highlightBrushPoints(d) });
+      .style('opacity', function(d) { return renderer.highlightBrushPoints(d, from, to) });
   }
 
   var extent = client.dataExtent();
@@ -251,6 +255,7 @@ function init (client, d3, $) {
 
   chart.createBrushedRange = function() {
     var brushedRange = chart.theBrush && d3.brushSelection(chart.theBrush.node()) || null;
+
     var range = brushedRange && brushedRange.map(chart.xScale2.invert);
     var dataExtent = client.dataExtent();
 
@@ -267,6 +272,8 @@ function init (client, d3, $) {
     range[1] = new Date(end);
     range[0] = new Date(end - client.focusRangeMS);
 
+    // console.log('createBrushedRange: ', brushedRange, range);
+
     return range;
   }
 
@@ -375,7 +382,8 @@ function init (client, d3, $) {
 
         chart.theBrush.selectAll('rect')
           .attr('y', 0)
-          .attr('height', contextHeight);
+          .attr('height', contextHeight)
+          .attr('width', '100%');
 
         // disable resizing of brush
         chart.context.select('.x.brush').select('.overlay').style('cursor', 'move');
@@ -507,7 +515,7 @@ function init (client, d3, $) {
           .attr('y', 0)
           .attr('height', contextHeight);
 
-        // console.log('Redrawing old brush with new dimensions: ', currentBrushExtent);
+        // console.log('chart.update(): Redrawing old brush with new dimensions: ', currentBrushExtent);
 
         // redraw old brush with new dimensions
         chart.theBrush.call(chart.brush.move, currentBrushExtent.map(chart.xScale2));
@@ -578,7 +586,7 @@ function init (client, d3, $) {
 
     chart.xScaleBasals.domain(dataRange);
 
-    // console.log('Redrawing brush due to update: ', currentBrushExtent);
+    // console.log('chart.update(): Redrawing brush due to update: ', currentBrushExtent);
 
     chart.theBrush.call(chart.brush.move, currentBrushExtent.map(chart.xScale2));
   };
@@ -663,8 +671,7 @@ function init (client, d3, $) {
     renderer.addTreatmentProfiles(client);
     renderer.drawTreatments(client);
 
-
-    // console.log('Redrawing brush due to update: ', currentBrushExtent);
+    // console.log('scrollUpdate(): Redrawing brush due to update: ', currentBrushExtent);
 
     chart.theBrush.call(chart.brush.move, currentBrushExtent.map(chart.xScale2));
 

diff --git a/lib/client/index.js b/lib/client/index.js
@@ -390,9 +390,12 @@ client.load = function load (serverSettings, callback) {
 
     brushExtent[0] = new Date(brushExtent[1].getTime() - client.focusRangeMS);
 
-    // console.log('Resetting brush in updateBrushToNow: ', brushExtent);
+    // console.log('updateBrushToNow(): Resetting brush: ', brushExtent);
 
-    chart.theBrush && chart.theBrush.call(chart.brush.move, brushExtent.map(chart.xScale2));
+    if (chart.theBrush) {
+      chart.theBrush.call(chart.brush)
+      chart.theBrush.call(chart.brush.move, brushExtent.map(chart.xScale2));
+    }
 
     if (!skipBrushing) {
       brushed();
@@ -415,7 +418,6 @@ client.load = function load (serverSettings, callback) {
 
   function brushed () {
     // Brush not initialized
-    console.log("brushed");
     if (!chart.theBrush) {
       return;
     }
@@ -426,11 +428,13 @@ client.load = function load (serverSettings, callback) {
 
     var brushedRange = d3.brushSelection(chart.theBrush.node());
 
+    // console.log("brushed(): coordinates: ", brushedRange);
+
     if (brushedRange) {
       brushExtent = brushedRange.map(chart.xScale2.invert);
     }
 
-    // console.log('Brushed to: ', brushExtent);
+    console.log('brushed(): Brushed to: ', brushExtent);
 
     if (!brushedRange || (brushExtent[1].getTime() - brushExtent[0].getTime() !== client.focusRangeMS)) {
       // ensure that brush updating is with the time range
@@ -440,7 +444,7 @@ client.load = function load (serverSettings, callback) {
         brushExtent[1] = new Date(brushExtent[0].getTime() + client.focusRangeMS);
       }
 
-      // console.log('Updating brushed to: ', brushExtent);
+      // console.log('brushed(): updating to: ', brushExtent);
 
       chart.theBrush.call(chart.brush.move, brushExtent.map(chart.xScale2));
     }

diff --git a/lib/client/renderer.js b/lib/client/renderer.js
@@ -58,11 +58,7 @@ function init (client, d3) {
   }
 
   // get the desired opacity for context chart based on the brush extent
-  renderer.highlightBrushPoints = function highlightBrushPoints (data) {
-    var selectedRange = chart().createAdjustedRange();
-    var from = selectedRange[0].getTime();
-    var to = selectedRange[1].getTime();
-
+  renderer.highlightBrushPoints = function highlightBrushPoints (data, from, to) {
     if (client.latestSGV && data.mills >= from && data.mills <= to) {
       return chart().futureOpacity(data.mills - client.latestSGV.mills);
     } else {

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "css-loader": "^1.0.1",
     "cssmin": "^0.4.3",
     "csv-stringify": "^5.3.5",
-    "d3": "^5.12.0",
+    "d3": "^5.16.0",
     "easyxml": "^2.0.1",
     "ejs": "^2.6.2",
     "errorhandler": "^1.5.1",

diff --git a/tests/client.renderer.test.js b/tests/client.renderer.test.js
@@ -64,7 +64,10 @@ describe('renderer', () => {
 
       describe(`data.mills ${extent.mills} and chart().brush.extent() times ${extent.times}`, () => {
         it(extent.expectation, () => {
-          renderer(mockClient, {}).highlightBrushPoints(mockData).should.equal(extent.expectedOpacity);
+          var selectedRange = mockClient.chart.createAdjustedRange();
+          var from = selectedRange[0].getTime();
+          var to = selectedRange[1].getTime();
+          renderer(mockClient, {}).highlightBrushPoints(mockData, from, to).should.equal(extent.expectedOpacity);
         });
       });
     });