From 3a84670d430444e0fb4b89c6991c3787f2f329dc Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Mon, 31 Dec 2012 15:07:08 -0500 Subject: [PATCH] Label color is now specifiable per-axis. Also, I <3 jquery. --- auto_tests/tests/Util.js | 25 +++------ auto_tests/tests/axis_labels.js | 111 ++++++++++++++++++++++++++++++++++------ experimental/palette/options.js | 2 +- plugins/axes.js | 2 +- 4 files changed, 102 insertions(+), 38 deletions(-) diff --git a/auto_tests/tests/Util.js b/auto_tests/tests/Util.js index 1fce3a0..66daa7f 100644 --- 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 --- 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 --- 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 --- 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. -- 2.7.4