Merge branch 'master' of https://github.com/danvk/dygraphs

Conflicts:
	auto_tests/tests/axis_labels.js
	dygraph-options.js
	plugins/axes.js

diff --git a/Makefile b/Makefile
index 1182b5a..e07bc1d 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -9,7 +9,7 @@ all: test generate-combined generate-documentation
 clean:
        @echo cleaning...
        @cp .dygraph-combined-clean.js dygraph-combined.js
-       rm docs/options.html
+       rm -f docs/options.html
 
 generate-combined:
        @echo Generating dygraph-combined.js

diff --git a/auto_tests/tests/Util.js b/auto_tests/tests/Util.js
index 3eb59e3..08cc88a 100644 (file)
--- a/auto_tests/tests/Util.js
+++ b/auto_tests/tests/Util.js
@@ -58,26 +58,13 @@ 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 d2c819c..6d861e1 100644 (file)
--- a/auto_tests/tests/axis_labels.js
+++ b/auto_tests/tests/axis_labels.js
@@ -573,12 +573,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,
@@ -587,8 +591,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 : { 
@@ -596,8 +600,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 : { 
@@ -608,9 +612,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() {
@@ -620,9 +624,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/dygraph-options.js b/dygraph-options.js
index 81f7667..87632ff 100644 (file)
--- a/dygraph-options.js
+++ b/dygraph-options.js
@@ -193,7 +193,7 @@ DygraphOptions.prototype.reparseSeries = function() {
 /**
  * Get a global value.
  *
- * @param {String} name the name of the option.
+ * @param {string} name the name of the option.
  */
 DygraphOptions.prototype.get = function(name) {
   var result = this.getGlobalUser_(name);
@@ -224,9 +224,9 @@ DygraphOptions.prototype.getGlobalDefault_ = function(name) {
  * Get a value for a specific axis. If there is no specific value for the axis,
  * the global value is returned.
  *
- * @param {String} name the name of the option.
- * @param {String|number} axis the axis to search. Can be the string representation
- * ("x", "y", "y2") or the y-axis number (0, 1). (x-axis can't be specified by number.')
+ * @param {string} name the name of the option.
+ * @param {string|number} axis the axis to search. Can be the string representation
+ * ("y", "y2") or the axis number (0, 1).
  */
 DygraphOptions.prototype.getForAxis = function(name, axis) {
   var axisIdx;
@@ -280,8 +280,8 @@ DygraphOptions.prototype.getForAxis = function(name, axis) {
  * Get a value for a specific series. If there is no specific value for the series,
  * the value for the axis is returned (and afterwards, the global value.)
  *
- * @param {String} name the name of the option.
- * @param {String|number} series the series to search. Can be the string representation
+ * @param {string} name the name of the option.
+ * @param {string|number} series the series to search. Can be the string representation
  * or 0-offset series number.
  */
 DygraphOptions.prototype.getForSeries = function(name, series) {

diff --git a/experimental/palette/options.js b/experimental/palette/options.js
index bb74957..1a3b231 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",
@@ -77,19 +77,19 @@ var opts = {
   },
   axisLabelWidth : {
     type : "int",
-    // scope : [ "x", "y", "y2" ]
+    // scope : [ "global", "x", "y", "y2" ]
   },
   axisLineColor : {
     type : "string",
-    // scope : [ "x", "y", "y2" ]
+    scope : [ "global", "x", "y", "y2" ]
   },
   axisLineWidth : {
     type : "int",
-    // scope : [ "x", "y", "y2" ]
+    scope : [ "global", "x", "y", "y2" ]
   },
   axisTickSize : {
     type : "int",
-    // scope : [ "x", "y", "y2" ]
+    // scope : [ "global", "x", "y", "y2" ]
   },
   clickCallback : {
     type : "function(e, x, points)"

diff --git a/plugins/axes.js b/plugins/axes.js
index 40b826c..e74f289 100644 (file)
--- a/plugins/axes.js
+++ b/plugins/axes.js
@@ -9,12 +9,20 @@ Dygraph.Plugins.Axes = (function() {
 "use strict";
 
 /*
-
 Bits of jankiness:
 - Direct layout access
 - Direct area access
 - Should include calculation of ticks, not just the drawing.
 
+Options left to make axis-friendly.
+  ('axisTickSize')
+  ('drawAxesAtZero')
+  ('xAxisHeight')
+
+These too. What is the difference between axisLablelWidth and {x,y}AxisLabelWidth?
+  ('axisLabelWidth')
+  ('xAxisLabelWidth')
+  ('yAxisLabelWidth')
 */
 
 /**
@@ -49,6 +57,9 @@ axes.prototype.layout = function(e) {
 
   if (g.getOption('drawXAxis')) {
     var h;
+    // NOTE: I think this is probably broken now, since g.getOption() now
+    // hits the dictionary. (That is, g.getOption('xAxisHeight') now always
+    // has a value.)
     if (g.getOption('xAxisHeight')) {
       h = g.getOption('xAxisHeight');
     } else {
@@ -106,7 +117,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.
@@ -122,7 +133,7 @@ axes.prototype.willDrawChart = function(e) {
 
   var makeDiv = function(txt, axis, prec_axis) {
     /*
-     * This seems to be called with the following three sets of axis/perc_axis:
+     * This seems to be called with the following three sets of axis/prec_axis:
      * x: undefined
      * y: y1
      * y: y2
@@ -145,8 +156,6 @@ axes.prototype.willDrawChart = function(e) {
 
   // axis lines
   context.save();
-  context.strokeStyle = g.getOption('axisLineColor');
-  context.lineWidth = g.getOption('axisLineWidth');
 
   var layout = g.layout_;
   var area = e.dygraph.plotter_.area;
@@ -220,6 +229,10 @@ axes.prototype.willDrawChart = function(e) {
     } else {
       axisX = halfUp(area.x);
     }
+
+    context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y');
+    context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y');
+
     context.beginPath();
     context.moveTo(axisX, halfDown(area.y));
     context.lineTo(axisX, halfDown(area.y + area.h));
@@ -228,6 +241,8 @@ axes.prototype.willDrawChart = function(e) {
 
     // if there's a secondary y-axis, draw a vertical line for that, too.
     if (g.numAxes() == 2) {
+      context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y2');
+      context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y2');
       context.beginPath();
       context.moveTo(halfDown(area.x + area.w), halfDown(area.y));
       context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h));
@@ -272,6 +287,8 @@ axes.prototype.willDrawChart = function(e) {
       }
     }
 
+    context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x');
+    context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x');
     context.beginPath();
     var axisY;
     if (g.getOption('drawAxesAtZero')) {