From: Dan Vanderkam <danvk@google.com>
Date: Thu, 22 Mar 2012 15:47:51 +0000 (-0400)
Subject: Fix issue 197: Annotations are displayed outside the bounds of the graph
X-Git-Tag: v1.0.0~306
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=4c919f55a9d057278452891a9a6fe5da621e5ce4;p=dygraphs.git

Fix issue 197: Annotations are displayed outside the bounds of the graph
---

diff --git a/auto_tests/tests/annotations.js b/auto_tests/tests/annotations.js
index 7433fd3..939c83f 100644
--- a/auto_tests/tests/annotations.js
+++ b/auto_tests/tests/annotations.js
@@ -96,3 +96,82 @@ annotationsTestCase.prototype.testAnnotationsDontDisappearOnResize = function()
   a1 = a1[0];
   assertEquals('A', a1.textContent);
 };
+
+// Verify that annotations outside of the visible x-range are not shown.
+annotationsTestCase.prototype.testAnnotationsOutOfRangeX = function() {
+  var opts = {
+  };
+  var data = "X,Y\n" +
+      "0,-1\n" +
+      "1,0\n" +
+      "2,1\n" +
+      "3,0\n"
+  ;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  g.setAnnotations([
+    {
+      series: 'Y',
+      x: 1,
+      shortText: 'A',
+      text: 'Long A',
+      cssClass: 'ann1'
+    }
+  ]);
+
+  // Check that it displays at all
+  assertEquals(1, g.annotations().length);
+  var a1 = document.getElementsByClassName('ann1');
+  assertEquals(1, a1.length);
+  a1 = a1[0];
+  assertEquals('A', a1.textContent);
+
+  // ... and that panning right removes the annotation.
+  g.updateOptions({dateWindow: [2, 6]});
+  assertEquals(1, g.annotations().length);
+  a1 = document.getElementsByClassName('ann1');
+  assertEquals(0, a1.length);
+
+  // ... and that panning left brings it back.
+  g.updateOptions({dateWindow: [0, 4]});
+  assertEquals(1, g.annotations().length);
+  a1 = document.getElementsByClassName('ann1');
+  assertEquals(1, a1.length);
+};
+
+// Verify that annotations outside of the visible y-range are not shown.
+annotationsTestCase.prototype.testAnnotationsOutOfRangeY = function() {
+  var opts = {
+  };
+  var data = "X,Y\n" +
+      "0,-1\n" +
+      "1,0\n" +
+      "2,1\n" +
+      "3,0\n"
+  ;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  g.setAnnotations([
+    {
+      series: 'Y',
+      x: 1,
+      shortText: 'A',
+      text: 'Long A',
+      cssClass: 'ann1'
+    }
+  ]);
+
+  // ... check that panning up removes the annotation.
+  g.updateOptions({valueRange: [0.5, 2.5]});
+  assertEquals(1, g.annotations().length);
+  a1 = document.getElementsByClassName('ann1');
+  assertEquals(0, a1.length);
+
+  // ... and that panning down brings it back.
+  g.updateOptions({valueRange: [-1, 1]});
+  assertEquals(1, g.annotations().length);
+  a1 = document.getElementsByClassName('ann1');
+  assertEquals(1, a1.length);
+};
diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 03bc5e3..3c1d40c 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -586,7 +586,8 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() {
   var points = this.layout.annotated_points;
   for (var i = 0; i < points.length; i++) {
     var p = points[i];
-    if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w) {
+    if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w ||
+        p.canvasy < this.area.y || p.canvasy > this.area.y + this.area.h) {
       continue;
     }