Add support for closest-series highlighting

[dygraphs.git] / auto_tests / tests / callback.js

diff --git a/auto_tests/tests/callback.js b/auto_tests/tests/callback.js
index 1697e21..9643da5 100644 (file)
--- a/auto_tests/tests/callback.js
+++ b/auto_tests/tests/callback.js
@@ -7,7 +7,10 @@
 var CallbackTestCase = TestCase("callback");
 
 CallbackTestCase.prototype.setUp = function() {
-  document.body.innerHTML = "<div id='graph'></div>";
+  document.body.innerHTML = "<div id='graph'></div><div id='selection'></div>";
+  this.styleSheet = document.createElement("style");
+  this.styleSheet.type = "text/css";
+  document.getElementsByTagName("head")[0].appendChild(this.styleSheet);
 };
 
 CallbackTestCase.prototype.tearDown = function() {
@@ -42,7 +45,7 @@ CallbackTestCase.prototype.tearDown = function() {
          width: 100,
          height : 100,
          visibility: [false, true, true],
-         highlightCallback : highlightCallback,
+         highlightCallback : highlightCallback
        });
 
    DygraphOps.dispatchMouseMove(g, 13, 10);
@@ -52,3 +55,109 @@ CallbackTestCase.prototype.tearDown = function() {
    //check there are only two points (because first series is hidden)
    assertEquals(2, h_pts.length);
  };
+
+var runClosestTest = function(isStacked, widthNormal, widthHighlighted) {
+  var h_row;
+  var h_pts;
+  var h_series;
+
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data,
+      {
+        width: 600,
+        height : 400,
+        visibility: [false, true, true],
+        stackedGraph: isStacked,
+        strokeWidth: widthNormal,
+        strokeBorderWidth: 2,
+        highlightCircleSize: widthNormal * 2,
+        highlightSeriesBackgroundFade: 0.7,
+        highlightSeriesAnimate: true,
+
+        highlightSeriesOpts: {
+          strokeWidth: widthHighlighted,
+          highlightCircleSize: widthHighlighted * 2
+        }
+      });
+
+  var highlightCallback  =  function(e, x, pts, row, set) {
+    h_row = row;
+    h_pts = pts;
+    h_series = set;
+    document.getElementById('selection').innerHTML='row=' + row + ', set=' + set;
+  };
+
+  g.updateOptions({highlightCallback: highlightCallback}, true);
+
+  if (isStacked) {
+    DygraphOps.dispatchMouseMove(g, 11.45, 1.4);
+    assertEquals(1, h_row);
+    assertEquals('c', h_series);
+
+    //now move up in the same row
+    DygraphOps.dispatchMouseMove(g, 11.45, 1.5);
+    assertEquals(1, h_row);
+    assertEquals('b', h_series);
+
+    //and a bit to the right
+    DygraphOps.dispatchMouseMove(g, 11.55, 1.5);
+    assertEquals(2, h_row);
+    assertEquals('c', h_series);
+  } else {
+    DygraphOps.dispatchMouseMove(g, 11, 1.5);
+    assertEquals(1, h_row);
+    assertEquals('c', h_series);
+
+    //now move up in the same row
+    DygraphOps.dispatchMouseMove(g, 11, 2.5);
+    assertEquals(1, h_row);
+    assertEquals('b', h_series);
+  }
+
+  return g;
+};
+
+/**
+ * Test basic closest-point highlighting.
+ */
+CallbackTestCase.prototype.testClosestPointCallback = function() {
+  runClosestTest(false, 1, 3);
+}
+
+/**
+ * Test setSelection() with series name
+ */
+CallbackTestCase.prototype.testSetSelection = function() {
+  var g = runClosestTest(false, 1, 3);
+  assertEquals(1, g.attr_('strokeWidth', 'c'));
+  g.setSelection(false, 'c');
+  assertEquals(3, g.attr_('strokeWidth', 'c'));
+}
+
+/**
+ * Test closest-point highlighting for stacked graph
+ */
+CallbackTestCase.prototype.testClosestPointStackedCallback = function() {
+  runClosestTest(true, 1, 3);
+}
+
+/**
+ * Closest-point highlighting with legend CSS - border around active series.
+ */
+CallbackTestCase.prototype.testClosestPointCallbackCss1 = function() {
+  var css = "div.dygraph-legend > span { display: block; }\n" +
+    "div.dygraph-legend > span.highlight { border: 1px solid grey; }\n";
+  this.styleSheet.innerHTML = css;
+  runClosestTest(false, 2, 4);
+}
+
+/**
+ * Closest-point highlighting with legend CSS - show only closest series.
+ */
+CallbackTestCase.prototype.testClosestPointCallbackCss2 = function() {
+  var css = "div.dygraph-legend > span { display: none; }\n" +
+    "div.dygraph-legend > span.highlight { display: inline; }\n";
+  this.styleSheet.innerHTML = css;
+  runClosestTest(false, 10, 15);
+  // TODO(klausw): verify that the highlighted line is drawn on top?
+}