Label color is now specifiable per-axis. Also, I <3 jquery.

diff --git a/auto_tests/tests/Util.js b/auto_tests/tests/Util.js
index 1fce3a0..66daa7f 100644 (file)
--- a/auto_tests/tests/Util.js
+++ b/auto_tests/tests/Util.js
@@ -58,24 +58,11 @@ Util.getLegend = function(parent) {
 };
 
 /**
- * Assert that all the elements in 'parent' with class 'className' is
- * the expected font size.
+ * Assert that all elements have a certain style property.
  */
-Util.assertFontSizes = function(parent, className, expectedSize) {
-  var expectedSizePx = expectedSize + "px";
-  var labels = parent.getElementsByClassName(className);
-  assertTrue(labels.length > 0);
-
-  // window.getComputedStyle is apparently compatible with all browsers
-  // (IE first became compatible with IE9.)
-  // If this test fails on earlier browsers, then enable something like this,
-  // because the font size is set by the parent div.
-  // if (!window.getComputedStyle) {
-  //   fontSize = label.parentElement.style.fontSize;
-  // }
-  for (var idx = 0; idx < labels.length; idx++) {
-    var label = labels[idx];
-    var fontSize = window.getComputedStyle(label).fontSize;
-    assertEquals(expectedSizePx, fontSize);
-  }
+Util.assertStyleOfChildren = function(selector, property, expectedValue) {
+  assertTrue(selector.length > 0);
+  $.each(selector, function(idx, child) {
+    assertEquals(expectedValue,  $(child).css(property));
+  });
 };

diff --git a/auto_tests/tests/axis_labels.js b/auto_tests/tests/axis_labels.js
index 98f48bb..7020475 100644 (file)
--- a/auto_tests/tests/axis_labels.js
+++ b/auto_tests/tests/axis_labels.js
@@ -14,10 +14,10 @@ AxisLabelsTestCase.prototype.tearDown = function() {
 
 AxisLabelsTestCase.simpleData =
     "X,Y,Y2\n" +
-      "0,-1,0.25\n" +
-      "1,0,0.5\n" +
-      "2,1,0.9\n" +
-      "3,0,0.7\n";
+    "0,-1,0.25\n" +
+    "1,0,0.5\n" +
+    "2,1,0.9\n" +
+    "3,0,0.7\n";
 
 /**
  * Takes in an array of strings and returns an array of floats.
@@ -584,12 +584,16 @@ AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
   // Be sure we're dealing with a 14-point default.
   assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
 
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 14);
-  Util.assertFontSizes(graph, "dygraph-axis-label-y", 14);
+  var assertFontSize = function(selector, expected) {
+    Util.assertStyleOfChildren(selector, "font-size", expected);
+  }
+  
+  assertFontSize($(".dygraph-axis-label-x"), "14px");
+  assertFontSize($(".dygraph-axis-label-y") , "14px");
 
   g.updateOptions({ axisLabelFontSize : 8});
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 8); 
-  Util.assertFontSizes(graph, "dygraph-axis-label-y", 8); 
+  assertFontSize($(".dygraph-axis-label-x"), "8px"); 
+  assertFontSize($(".dygraph-axis-label-y"), "8px"); 
 
   g.updateOptions({
     axisLabelFontSize : null,
@@ -598,8 +602,8 @@ AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
     }   
   }); 
 
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 5); 
-  Util.assertFontSizes(graph, "dygraph-axis-label-y", 14);
+  assertFontSize($(".dygraph-axis-label-x"), "5px"); 
+  assertFontSize($(".dygraph-axis-label-y"), "14px");
 
   g.updateOptions({
     axes : { 
@@ -607,8 +611,8 @@ AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
     }   
   }); 
 
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 5); 
-  Util.assertFontSizes(graph, "dygraph-axis-label-y", 20); 
+  assertFontSize($(".dygraph-axis-label-x"), "5px"); 
+  assertFontSize($(".dygraph-axis-label-y"), "20px"); 
 
   g.updateOptions({
     series : { 
@@ -619,9 +623,9 @@ AxisLabelsTestCase.prototype.testAxisLabelFontSize = function() {
     }   
   }); 
 
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 5); 
-  Util.assertFontSizes(graph, "dygraph-axis-label-y1", 20); 
-  Util.assertFontSizes(graph, "dygraph-axis-label-y2", 12); 
+  assertFontSize($(".dygraph-axis-label-x"), "5px"); 
+  assertFontSize($(".dygraph-axis-label-y1"), "20px"); 
+  assertFontSize($(".dygraph-axis-label-y2"), "12px"); 
 }
 
 AxisLabelsTestCase.prototype.testAxisLabelFontSizeNull = function() {
@@ -631,9 +635,82 @@ AxisLabelsTestCase.prototype.testAxisLabelFontSizeNull = function() {
       axisLabelFontSize: null
     });
 
+  var assertFontSize = function(selector, expected) {
+    Util.assertStyleOfChildren(selector, "font-size", expected);
+  }
+
+  // Be sure we're dealing with a 14-point default.
+  assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
+
+  assertFontSize($(".dygraph-axis-label-x"), "14px");
+  assertFontSize($(".dygraph-axis-label-y"), "14px");
+}
+
+AxisLabelsTestCase.prototype.testAxisLabelColor = function() {
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, AxisLabelsTestCase.simpleData, {});
+
+  // Be sure we're dealing with a black default.
+  assertEquals("black", Dygraph.DEFAULT_ATTRS.axisLabelColor);
+
+  var assertColor = function(selector, expected) {
+    Util.assertStyleOfChildren(selector, "color", expected);
+  }
+
+  assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
+  assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
+
+  g.updateOptions({ axisLabelColor : "red"});
+  assertColor($(".dygraph-axis-label-x"), "rgb(255, 0, 0)"); 
+  assertColor($(".dygraph-axis-label-y"), "rgb(255, 0, 0)"); 
+
+  g.updateOptions({
+    axisLabelColor : null,
+    axes : { 
+      x : { axisLabelColor : "blue" },
+    }   
+  }); 
+
+  assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); 
+  assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
+
+  g.updateOptions({
+    axes : { 
+      y : { axisLabelColor : "green" },
+    }   
+  }); 
+
+  assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); 
+  assertColor($(".dygraph-axis-label-y"), "rgb(0, 128, 0)"); 
+
+  g.updateOptions({
+    series : { 
+      Y2 : { axis : "y2" } // copy y2 series to y2 axis.
+    },  
+    axes : { 
+      y2 : { axisLabelColor : "yellow" },
+    }   
+  }); 
+
+  assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 255)"); 
+  assertColor($(".dygraph-axis-label-y1"), "rgb(0, 128, 0)"); 
+  assertColor($(".dygraph-axis-label-y2"), "rgb(255, 255, 0)"); 
+}
+
+AxisLabelsTestCase.prototype.testAxisLabelColorNull = function() {
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, AxisLabelsTestCase.simpleData,
+    {
+      axisLabelColor: null
+    });
+
+  var assertColor = function(selector, expected) {
+    Util.assertStyleOfChildren(selector, "color", expected);
+  }
+
   // Be sure we're dealing with a 14-point default.
   assertEquals(14, Dygraph.DEFAULT_ATTRS.axisLabelFontSize);
 
-  Util.assertFontSizes(graph, "dygraph-axis-label-x", 14);
-  Util.assertFontSizes(graph, "dygraph-axis-label-y", 14);
+  assertColor($(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
+  assertColor($(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
 }

diff --git a/experimental/palette/options.js b/experimental/palette/options.js
index bb74957..d627adf 100644 (file)
--- a/experimental/palette/options.js
+++ b/experimental/palette/options.js
@@ -65,7 +65,7 @@ var opts = {
   },
   axisLabelColor : {
     type : "string",
-    // scope : [ "x", "y", "y2" ]
+    scope : [ "global", "x", "y", "y2" ]
   },
   axisLabelFontSize : {
     type : "int",

diff --git a/plugins/axes.js b/plugins/axes.js
index 40b826c..2e1834c 100644 (file)
--- a/plugins/axes.js
+++ b/plugins/axes.js
@@ -106,7 +106,7 @@ axes.prototype.willDrawChart = function(e) {
       position: "absolute",
       fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + "px",
       zIndex: 10,
-      color: g.getOption('axisLabelColor'),
+      color: g.getOptionForAxis('axisLabelColor', axis),
       width: g.getOption('axisLabelWidth') + "px",
       // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px",
       lineHeight: "normal",  // Something other than "normal" line-height screws up label positioning.