Merge branch 'master' of git://github.com/danvk/dygraphs into highlight3

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

diff --git a/auto_tests/tests/multiple_axes.js b/auto_tests/tests/multiple_axes.js
index ed9b362..05e93c7 100644 (file)
--- a/auto_tests/tests/multiple_axes.js
+++ b/auto_tests/tests/multiple_axes.js
@@ -24,6 +24,17 @@ function getLegend() {
   return legend.textContent;
 }
 
+// returns all text in tags w/ a given css class, sorted.
+function getClassTexts(css_class) {
+  var texts = [];
+  var els = document.getElementsByClassName(css_class);
+  for (var i = 0; i < els.length; i++) {
+    texts[i] = els[i].textContent;
+  }
+  texts.sort();
+  return texts;
+}
+
 MultipleAxesTestCase.getData = function() {
   var data = [];
   for (var i = 1; i <= 100; i++) {
@@ -45,7 +56,7 @@ MultipleAxesTestCase.getData = function() {
 MultipleAxesTestCase.prototype.testBasicMultipleAxes = function() {
   var data = MultipleAxesTestCase.getData();
 
-  g = new Dygraph(
+  var g = new Dygraph(
     document.getElementById("graph"),
     data,
     {
@@ -71,7 +82,7 @@ MultipleAxesTestCase.prototype.testBasicMultipleAxes = function() {
 MultipleAxesTestCase.prototype.testNewStylePerAxisOptions = function() {
   var data = MultipleAxesTestCase.getData();
 
-  g = new Dygraph(
+  var g = new Dygraph(
     document.getElementById("graph"),
     data,
     {
@@ -101,7 +112,7 @@ MultipleAxesTestCase.prototype.testMultiAxisLayout = function() {
 
   var el = document.getElementById("graph");
 
-  g = new Dygraph(
+  var g = new Dygraph(
     el,
     data,
     {
@@ -167,3 +178,116 @@ MultipleAxesTestCase.prototype.testTwoAxisVisibility = function() {
   assertTrue(document.getElementsByClassName("dygraph-axis-label-y").length > 0);
   assertTrue(document.getElementsByClassName("dygraph-axis-label-y2").length > 0);
 };
+
+// verifies that all four chart labels (title, x-, y-, y2-axis label) can be
+// used simultaneously.
+MultipleAxesTestCase.prototype.testMultiChartLabels = function() {
+  var data = MultipleAxesTestCase.getData();
+
+  var el = document.getElementById("graph");
+  el.style.border = '1px solid black';
+  el.style.marginLeft = '200px';
+  el.style.marginTop = '200px';
+
+  var g = new Dygraph(
+    el,
+    data,
+    {
+      labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+      width: 640,
+      height: 350,
+      'Y3': {
+        axis: { }
+      },
+      'Y4': {
+        axis: 'Y3'  // use the same y-axis as series Y3
+      },
+      xlabel: 'x-axis',
+      ylabel: 'y-axis',
+      y2label: 'y2-axis',
+      title: 'Chart title'
+    }
+  );
+
+  assertEquals(["Chart title", "x-axis", "y-axis", "y2-axis"],
+               getClassTexts("dygraph-label"));
+  assertEquals(["Chart title"], getClassTexts("dygraph-title"));
+  assertEquals(["x-axis"], getClassTexts("dygraph-xlabel"));
+  assertEquals(["y-axis"], getClassTexts("dygraph-ylabel"));
+  assertEquals(["y2-axis"], getClassTexts("dygraph-y2label"));
+
+  // TODO(danvk): check relative positioning here: title on top, y left of y2.
+};
+
+// Check that a chart w/o a secondary y-axis will not get a y2label, even if one
+// is specified.
+MultipleAxesTestCase.prototype.testNoY2LabelWithoutSecondaryAxis = function() {
+  var g = new Dygraph(
+    document.getElementById("graph"),
+    MultipleAxesTestCase.getData(),
+    {
+      labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+      width: 640,
+      height: 350,
+      xlabel: 'x-axis',
+      ylabel: 'y-axis',
+      y2label: 'y2-axis',
+      title: 'Chart title'
+    }
+  );
+
+  assertEquals(["Chart title", "x-axis", "y-axis"],
+               getClassTexts("dygraph-label"));
+  assertEquals(["Chart title"], getClassTexts("dygraph-title"));
+  assertEquals(["x-axis"], getClassTexts("dygraph-xlabel"));
+  assertEquals(["y-axis"], getClassTexts("dygraph-ylabel"));
+  assertEquals([], getClassTexts("dygraph-y2label"));
+};
+
+MultipleAxesTestCase.prototype.testValueRangePerAxisOptions = function() {
+  var data = MultipleAxesTestCase.getData();
+
+  g = new Dygraph(
+    document.getElementById("graph"),
+    data,
+    {
+      labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
+      'Y3': {
+        axis: {
+        }
+      },
+      'Y4': {
+        axis: 'Y3'  // use the same y-axis as series Y3
+      },
+      axes: {
+        y: {
+          valueRange: [40, 70]
+        },
+        y2: {
+          // set axis-related properties here
+          labelsKMB: true
+        }
+      },
+      ylabel: 'Primary y-axis',
+      y2label: 'Secondary y-axis',
+      yAxisLabelWidth: 60
+    }
+  );
+  assertEquals(["40", "45", "50", "55", "60", "65"], getYLabelsForAxis("1"));
+  assertEquals(["900K","1.1M","1.3M","1.5M","1.7M","1.9M"], getYLabelsForAxis("2"));
+  
+  g.updateOptions(
+    {
+      axes: {
+        y: {
+          valueRange: [40, 80]
+        },
+        y2: {
+          valueRange: [1e6, 1.2e6]
+        }
+     }
+    }
+  );
+  assertEquals(["40", "45", "50", "55", "60", "65", "70", "75"], getYLabelsForAxis("1"));
+  assertEquals(["1M", "1.02M", "1.05M", "1.08M", "1.1M", "1.13M", "1.15M", "1.18M"], getYLabelsForAxis("2"));
+};
\ No newline at end of file