Permalink
Browse files

Use CSS for styling

  • Loading branch information...
1 parent 2d0fdf6 commit f0e472002843b5e61aa9467f97f755280c91a46b @danvk committed Sep 28, 2016
@@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>dygraphs tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+ <link rel="stylesheet" href="../css/dygraph.css" />
</head>
<body>
<div id="graph"></div>
@@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>dygraphs tests</title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+ <link rel="stylesheet" href="../css/dygraph.css" />
</head>
<body>
<div id="graph"></div>
@@ -798,75 +798,6 @@ it('testAxisLabelFontSizeNull', function() {
assertFontSize(document.querySelectorAll(".dygraph-axis-label-y"), "14px");
});
-it('testAxisLabelColor', function() {
- var graph = document.getElementById("graph");
- var g = new Dygraph(graph, simpleData, {});
-
- // Be sure we're dealing with a black default.
- assert.equal("black", DEFAULT_ATTRS.axisLabelColor);
-
- var assertColor = function(selector, expected) {
- Util.assertStyleOfChildren(selector, "color", expected);
- }
-
- assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
-
- g.updateOptions({ axisLabelColor : "red"});
- assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(255, 0, 0)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(255, 0, 0)");
-
- g.updateOptions({
- axisLabelColor : null,
- axes : {
- x : { axisLabelColor : "blue" },
- }
- });
-
- assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
-
- g.updateOptions({
- axes : {
- y : { axisLabelColor : "green" },
- }
- });
-
- assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
- assertColor(document.querySelectorAll(".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(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 255)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y1"), "rgb(0, 128, 0)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y2"), "rgb(255, 255, 0)");
-});
-
-it('testAxisLabelColorNull', function() {
- var graph = document.getElementById("graph");
- var g = new Dygraph(graph, simpleData,
- {
- axisLabelColor: null
- });
-
- var assertColor = function(selector, expected) {
- Util.assertStyleOfChildren(selector, "color", expected);
- }
-
- // Be sure we're dealing with a 14-point default.
- assert.equal(14, DEFAULT_ATTRS.axisLabelFontSize);
-
- assertColor(document.querySelectorAll(".dygraph-axis-label-x"), "rgb(0, 0, 0)");
- assertColor(document.querySelectorAll(".dygraph-axis-label-y"), "rgb(0, 0, 0)");
-});
-
/*
* This test shows that the label formatter overrides labelsKMB for all values.
*/
@@ -90,7 +90,6 @@ it('testCombinations', function() {
var opts = {
width: 300,
height: 150,
- labelsDivWidth: 100,
pointSize: 10
};
for (var key in base) {
View
@@ -0,0 +1,117 @@
+/**
+ * Default styles for the dygraphs charting library.
+ */
+
+.dygraph-legend {
+ position: absolute;
+ font-size: 14px;
+ z-index: 10;
+ width: 250px; /* labelsDivWidth */
+ /*
+ dygraphs determines these based on the presence of chart labels.
+ It might make more sense to create a wrapper div around the chart proper.
+ top: 0px;
+ right: 2px;
+ */
+ background: white;
+ line-height: normal;
+ text-align: left;
+ overflow: hidden;
+}
+
+/* styles for a solid line in the legend */
+.dygraph-legend-line {
+ display: inline-block;
+ position: relative;
+ bottom: .5ex;
+ padding-left: 1em;
+ height: 1px;
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ /* border-bottom-color is set based on the series color */
+}
+
+/* styles for a dashed line in the legend, e.g. when strokePattern is set */
+.dygraph-legend-dash {
+ display: inline-block;
+ position: relative;
+ bottom: .5ex;
+ height: 1px;
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ /* border-bottom-color is set based on the series color */
+ /* margin-right is set based on the stroke pattern */
+ /* padding-left is set based on the stroke pattern */
+}
+
+.dygraph-roller {
+ position: absolute;
+ z-index: 10;
+}
+
+/* This class is shared by all annotations, including those with icons */
+.dygraph-annotation {
+ position: absolute;
+ z-index: 10;
+ overflow: hidden;
+}
+
+/* This class only applies to annotations without icons */
+/* Old class name: .dygraphDefaultAnnotation */
+.dygraph-default-annotation {
+ border: 1px solid black;
+ background-color: white;
+ text-align: center;
+}
+
+.dygraph-axis-label {
+ /* position: absolute; */
+ /* font-size: 14px; */
+ z-index: 10;
+ line-height: normal;
+ overflow: hidden;
+ color: black; /* replaces old axisLabelColor option */
+}
+
+.dygraph-axis-label-x {
+}
+
+.dygraph-axis-label-y {
+}
+
+.dygraph-axis-label-y2 {
+}
+
+.dygraph-title {
+ font-weight: bold;
+ z-index: 10;
+ text-align: center;
+ /* font-size: based on titleHeight option */
+}
+
+.dygraph-xlabel {
+ text-align: center;
+ /* font-size: based on xLabelHeight option */
+}
+
+/* For y-axis label */
+.dygraph-label-rotate-left {
+ text-align: center;
+ /* See http://caniuse.com/#feat=transforms2d */
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+.dygraph-label-rotate-right {
+ text-align: center;
+ /* See http://caniuse.com/#feat=transforms2d */
+ transform: rotate(-90deg);
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+}
@@ -12,10 +12,6 @@ var DEFAULT_ATTRS = {
highlightSeriesBackgroundAlpha: 0.5,
highlightSeriesBackgroundColor: 'rgb(255, 255, 255)',
- labelsDivWidth: 250,
- labelsDivStyles: {
- // TODO(danvk): move defaults from createStatusMessage_ here.
- },
labelsSeparateLines: false,
labelsShowZeroValues: true,
labelsKMB: false,
@@ -67,7 +63,6 @@ var DEFAULT_ATTRS = {
axisLineColor: "black",
axisLineWidth: 0.3,
gridLineWidth: 0.3,
- axisLabelColor: "black",
axisLabelWidth: 50,
gridLineColor: "rgb(128,128,128)",
@@ -41,12 +41,6 @@ OPTIONS_REFERENCE = // <JSON>
"type": "integer",
"description": "The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is \"isolated\", i.e. there is a missing point on either side of it. This also controls the size of those dots."
},
- "labelsDivStyles": {
- "default": "null",
- "labels": ["Legend"],
- "type": "{}",
- "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'fontWeight': 'bold' } will make the labels bold. In general, it is better to use CSS to style the .dygraph-legend class than to use this property."
- },
"drawPoints": {
"default": "false",
"labels": ["Data Line display"],
@@ -439,12 +433,6 @@ OPTIONS_REFERENCE = // <JSON>
"example": "[10, 110]",
"description": "Explicitly set the vertical range of the graph to [low, high]. This may be set on a per-axis basis to define each y-axis separately. If either limit is unspecified, it will be calculated automatically (e.g. [null, 30] to automatically calculate just the lower bound)"
},
- "labelsDivWidth": {
- "default": "250",
- "labels": ["Legend"],
- "type": "integer",
- "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
- },
"colorSaturation": {
"default": "1.0",
"labels": ["Data Series Colors"],
@@ -695,12 +683,6 @@ OPTIONS_REFERENCE = // <JSON>
"type": "float (0.0 - 1.0)",
"description" : "Error bars (or custom bars) for each series are drawn in the same color as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the error bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point."
},
- "axisLabelColor": {
- "default": "black",
- "labels": ["Axis display"],
- "type": "string",
- "description" : "Color for x- and y-axis labels. This is a CSS color string."
- },
"axisLabelWidth": {
"default": "50 (y-axis), 60 (x-axis)",
"labels": ["Axis display", "Chart labels"],
@@ -837,7 +837,6 @@ var pixelSafeOptions = {
'annotationDblClickHandler': true,
'annotationMouseOutHandler': true,
'annotationMouseOverHandler': true,
- 'axisLabelColor': true,
'axisLineColor': true,
'axisLineWidth': true,
'clickCallback': true,
@@ -855,8 +854,6 @@ var pixelSafeOptions = {
'interactionModel': true,
'isZoomedIgnoreProgrammaticZoom': true,
'labelsDiv': true,
- 'labelsDivStyles': true,
- 'labelsDivWidth': true,
'labelsKMB': true,
'labelsKMG2': true,
'labelsSeparateLines': true,
View
@@ -1029,32 +1029,28 @@ Dygraph.prototype.getPropertiesForSeries = function(series_name) {
*/
Dygraph.prototype.createRollInterface_ = function() {
// Create a roller if one doesn't exist already.
- if (!this.roller_) {
- this.roller_ = document.createElement("input");
- this.roller_.type = "text";
- this.roller_.style.display = "none";
- this.graphDiv.appendChild(this.roller_);
+ var roller = this.roller_;
+ if (!roller) {
+ this.roller_ = roller = document.createElement("input");
+ roller.type = "text";
+ roller.style.display = "none";
+ roller.className = 'dygraph-roller';
+ this.graphDiv.appendChild(roller);
}
var display = this.getBooleanOption('showRoller') ? 'block' : 'none';
- var area = this.plotter_.area;
- var textAttr = { "position": "absolute",
- "zIndex": 10,
+ var area = this.getArea();
+ var textAttr = {
"top": (area.y + area.h - 25) + "px",
"left": (area.x + 1) + "px",
"display": display
- };
- this.roller_.size = "2";
- this.roller_.value = this.rollPeriod_;
- for (var name in textAttr) {
- if (textAttr.hasOwnProperty(name)) {
- this.roller_.style[name] = textAttr[name];
- }
- }
+ };
+ roller.size = "2";
+ roller.value = this.rollPeriod_;
+ utils.update(roller.style, textAttr);
- var dygraph = this;
- this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
+ roller.onchange = () => this.adjustRoll(roller.value);
};
/**
@@ -3340,7 +3336,6 @@ Dygraph.prototype.size = function() {
*/
Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
// Only add the annotation CSS rule once we know it will be used.
- Dygraph.addAnnotationRule();
this.annotations_ = ann;
if (!this.layout_) {
console.warn("Tried to setAnnotations before dygraph was ready. " +
@@ -3431,48 +3426,6 @@ Dygraph.prototype.ready = function(callback) {
};
/**
- * @private
- * Adds a default style for the annotation CSS classes to the document. This is
- * only executed when annotations are actually used. It is designed to only be
- * called once -- all calls after the first will return immediately.
- */
-Dygraph.addAnnotationRule = function() {
- // TODO(danvk): move this function into plugins/annotations.js?
- if (Dygraph.addedAnnotationCSS) return;
-
- var rule = "border: 1px solid black; " +
- "background-color: white; " +
- "text-align: center;";
-
- var styleSheetElement = document.createElement("style");
- styleSheetElement.type = "text/css";
- document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
-
- // Find the first style sheet that we can access.
- // We may not add a rule to a style sheet from another domain for security
- // reasons. This sometimes comes up when using gviz, since the Google gviz JS
- // adds its own style sheets from google.com.
- for (var i = 0; i < document.styleSheets.length; i++) {
- if (document.styleSheets[i].disabled) continue;
- var mysheet = document.styleSheets[i];
- try {
- if (mysheet.insertRule) { // Firefox
- var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
- mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
- } else if (mysheet.addRule) { // IE
- mysheet.addRule(".dygraphDefaultAnnotation", rule);
- }
- Dygraph.addedAnnotationCSS = true;
- return;
- } catch(err) {
- // Was likely a security exception.
- }
- }
-
- console.warn("Unable to add default annotation CSS rule; display may be off.");
-};
-
-/**
* Add an event handler. This event handler is kept until the graph is
* destroyed with a call to graph.destroy().
*
Oops, something went wrong.

0 comments on commit f0e4720

Please sign in to comment.