Use CSS for styling

[dygraphs.git] / src / plugins / annotations.js

diff --git a/src/plugins/annotations.js b/src/plugins/annotations.js
index 8576104..87153c8 100644 (file)
--- a/src/plugins/annotations.js
+++ b/src/plugins/annotations.js
@@ -6,8 +6,6 @@
 
 /*global Dygraph:false */
 
-Dygraph.Plugins.Annotations = (function() {
-
 "use strict";
 
 /**
@@ -20,7 +18,6 @@ the core dygraphs classes, but annotations involve quite a bit of parsing and
 layout.
 
 TODO(danvk): cache DOM elements.
-
 */
 
 var annotations = function() {
@@ -59,12 +56,6 @@ annotations.prototype.didDrawChart = function(e) {
   if (!points || points.length === 0) return;
 
   var containerDiv = e.canvas.parentNode;
-  var annotationStyle = {
-    "position": "absolute",
-    "fontSize": g.getOption('axisLabelFontSize') + "px",
-    "zIndex": 10,
-    "overflow": "hidden"
-  };
 
   var bindEvt = function(eventName, classEventName, pt) {
     return function(annotation_event) {
@@ -78,7 +69,7 @@ annotations.prototype.didDrawChart = function(e) {
   };
 
   // Add the annotations one-by-one.
-  var area = e.dygraph.plotter_.area;
+  var area = e.dygraph.getArea();
 
   // x-coord to sum of previous annotation's heights (used for stacking).
   var xToUsedHeight = {};
@@ -96,18 +87,18 @@ annotations.prototype.didDrawChart = function(e) {
       tick_height = a.tickHeight;
     }
 
+    // TODO: deprecate axisLabelFontSize in favor of CSS
     var div = document.createElement("div");
-    for (var name in annotationStyle) {
-      if (annotationStyle.hasOwnProperty(name)) {
-        div.style[name] = annotationStyle[name];
-      }
-    }
+    div.style['fontSize'] = g.getOption('axisLabelFontSize') + "px";
+    var className = 'dygraph-annotation';
     if (!a.hasOwnProperty('icon')) {
-      div.className = "dygraphDefaultAnnotation";
+      // camelCase class names are deprecated.
+      className += ' dygraphDefaultAnnotation dygraph-default-annotation';
     }
     if (a.hasOwnProperty('cssClass')) {
-      div.className += " " + a.cssClass;
+      className += " " + a.cssClass;
     }
+    div.className = className;
 
     var width = a.hasOwnProperty('width') ? a.width : 16;
     var height = a.hasOwnProperty('height') ? a.height : 16;
@@ -177,6 +168,4 @@ annotations.prototype.destroy = function() {
   this.detachLabels();
 };
 
-return annotations;
-
-})();
+export default annotations;