add a togglable "selected" property to hairlines

diff --git a/extras/hairlines.js b/extras/hairlines.js
index 0a4cd40..b9f0b1a 100644 (file)
--- a/extras/hairlines.js
+++ b/extras/hairlines.js
@@ -21,6 +21,7 @@ Dygraph.Plugins.Hairlines = (function() {
  *   interpolated: bool,  // alternative is to snap to closest
  *   lineDiv: !Element    // vertical hairline div
  *   infoDiv: !Element    // div containing info about the nearest points
+ *   selected: boolean    // whether this hairline is selected
  * } Hairline
  */
 
@@ -76,6 +77,7 @@ hairlines.prototype.hairlineWasDragged = function(h, event, ui) {
   this.moveHairlineToTop(h);
   this.updateHairlineDivPositions();
   this.updateHairlineInfo();
+  this.updateHairlineStyles();
   $(this).triggerHandler('hairlineMoved', {
     oldXVal: oldXVal,
     newXVal: h.xval
@@ -85,7 +87,7 @@ hairlines.prototype.hairlineWasDragged = function(h, event, ui) {
 
 // This creates the hairline object and returns it.
 // It does not position it and does not attach it to the chart.
-hairlines.prototype.createHairline = function(xval) {
+hairlines.prototype.createHairline = function(props) {
   var h;
   var self = this;
 
@@ -121,12 +123,12 @@ hairlines.prototype.createHairline = function(xval) {
       // TODO(danvk): set cursor here
     });
 
-  h = {
-    xval: xval,
+  h = $.extend({
     interpolated: true,
+    selected: false,
     lineDiv: $lineContainerDiv.get(0),
     infoDiv: $infoDiv.get(0)
-  };
+  }, props);
 
   var that = this;
   $infoDiv.on('click', '.hairline-kill-button', function() {
@@ -180,6 +182,13 @@ hairlines.prototype.updateHairlineDivPositions = function() {
   });
 };
 
+// Sets styles on the hairline (i.e. "selected")
+hairlines.prototype.updateHairlineStyles = function() {
+  $.each(this.hairlines_, function(idx, h) {
+    $([h.infoDiv, h.lineDiv]).toggleClass('selected', h.selected);
+  });
+};
+
 // Fills out the info div based on current coordinates.
 hairlines.prototype.updateHairlineInfo = function() {
   var mode = 'closest';
@@ -253,6 +262,7 @@ hairlines.prototype.didDrawChart = function(e) {
   this.updateHairlineDivPositions();
   this.attachHairlinesToChart_();
   this.updateHairlineInfo();
+  this.updateHairlineStyles();
 };
 
 hairlines.prototype.dataDidUpdate = function(e) {
@@ -279,10 +289,11 @@ hairlines.prototype.click = function(e) {
   var that = this;
   this.addTimer_ = setTimeout(function() {
     that.addTimer_ = null;
-    that.hairlines_.push(that.createHairline(xval));
+    that.hairlines_.push(that.createHairline({xval: xval}));
 
     that.updateHairlineDivPositions();
     that.updateHairlineInfo();
+    this.updateHairlineStyles();
     that.attachHairlinesToChart_();
 
     $(that).triggerHandler('hairlineCreated', {
@@ -323,7 +334,8 @@ hairlines.prototype.destroy = function() {
 hairlines.prototype.createPublicHairline_ = function(h) {
   return {
     xval: h.xval,
-    interpolated: h.interpolated
+    interpolated: h.interpolated,
+    selected: h.selected
   };
 };
 
@@ -358,9 +370,13 @@ hairlines.prototype.set = function(hairlines) {
     if (this.hairlines_.length > i) {
       this.hairlines_[i].xval = h.xval;
       this.hairlines_[i].interpolated = h.interpolated;
+      this.hairlines_[i].selected = h.selected;
     } else {
-      // TODO(danvk): pass in |interpolated| value.
-      this.hairlines_.push(this.createHairline(h.xval));
+      this.hairlines_.push(this.createHairline({
+        xval: h.xval,
+        interpolated: h.interpolated,
+        selected: h.selected
+      }));
       anyCreated = true;
     }
   }
@@ -372,6 +388,7 @@ hairlines.prototype.set = function(hairlines) {
 
   this.updateHairlineDivPositions();
   this.updateHairlineInfo();
+  this.updateHairlineStyles();
   if (anyCreated) {
     this.attachHairlinesToChart_();
   }

diff --git a/tests/hairlines.html b/tests/hairlines.html
index 2aade4c..759aa5b 100644 (file)
--- a/tests/hairlines.html
+++ b/tests/hairlines.html
@@ -66,6 +66,15 @@
         cursor: move;
       }
 
+      .dygraph-hairline.selected div {
+        left: 2px !important;
+        width: 2px !important;
+      }
+      .hairline-info.selected {
+        border: 2px solid black;
+        padding: 2px;
+      }
+
       .annotation-info {
         background: white;
         border-width: 1px;
@@ -150,6 +159,7 @@
           var html = Dygraph.Plugins.Legend.generateLegendHTML(
               data.dygraph, data.hairline.xval, data.points, 10);
           $('.hairline-legend', div).html(html);
+          $(div).data({xval: data.hairline.xval});  // see .hover() below.
         }
       });
       annotations = new Dygraph.Plugins.SuperAnnotations({
@@ -255,6 +265,18 @@
         $('input[type=text]', a.infoDiv).focus();
       });
 
+      // Select/Deselect hairlines on click.
+      $('.hairline-info').click(function() {
+        var xval = $(this).data('xval');
+        var hs = hairlines.get();
+        for (var i = 0; i < hs.length; i++) {
+          if (hs[i].xval == xval) {
+            hs[i].selected = !hs[i].selected;
+          }
+        }
+        hairlines.set(hs);
+      });
+
       // Demonstration of how to use various other event listeners
       $(hairlines).on({
         'hairlineMoved': function(e, data) {