plugins/annotations.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6
   7 /*global Dygraph:false */
   8
   9 Dygraph.Plugins.Annotations = (function() {
  10
  11 "use strict";
  12
  13 /**
  14 Current bits of jankiness:
  15 - Uses dygraph.layout_ to get the parsed annotations.
  16 - Uses dygraph.plotter_.area
  17
  18 It would be nice if the plugin didn't require so much special support inside
  19 the core dygraphs classes, but annotations involve quite a bit of parsing and
  20 layout.
  21
  22 TODO(danvk): cache DOM elements.
  23
  24 */
  25
  26 var annotations = function() {
  27   this.annotations_ = [];
  28 };
  29
  30 annotations.prototype.toString = function() {
  31   return "Annotations Plugin";
  32 };
  33
  34 annotations.prototype.activate = function(g) {
  35   return {
  36     clearChart: this.clearChart,
  37     didDrawChart: this.didDrawChart
  38   };
  39 };
  40
  41 annotations.prototype.detachLabels = function() {
  42   for (var i = 0; i < this.annotations_.length; i++) {
  43     var a = this.annotations_[i];
  44     if (a.parentNode) a.parentNode.removeChild(a);
  45     this.annotations_[i] = null;
  46   }
  47   this.annotations_ = [];
  48 };
  49
  50 annotations.prototype.clearChart = function(e) {
  51   this.detachLabels();
  52 };
  53
  54 annotations.prototype.didDrawChart = function(e) {
  55   var g = e.dygraph;
  56
  57   // Early out in the (common) case of zero annotations.
  58   var points = g.layout_.annotated_points;
  59   if (!points || points.length === 0) return;
  60
  61   var containerDiv = e.canvas.parentNode;
  62   var annotationStyle = {
  63     "position": "absolute",
  64     "fontSize": g.getOption('axisLabelFontSize') + "px",
  65     "zIndex": 10,
  66     "overflow": "hidden"
  67   };
  68
  69   var bindEvt = function(eventName, classEventName, pt) {
  70     return function(annotation_event) {
  71       var a = pt.annotation;
  72       if (a.hasOwnProperty(eventName)) {
  73         a[eventName](a, pt, g, annotation_event);
  74       } else if (g.getOption(classEventName)) {
  75         g.getOption(classEventName)(a, pt, g, annotation_event );
  76       }
  77     };
  78   };
  79
  80   // Add the annotations one-by-one.
  81   var area = e.dygraph.plotter_.area;
  82   for (var i = 0; i < points.length; i++) {
  83     var p = points[i];
  84     if (p.canvasx < area.x || p.canvasx > area.x + area.w ||
  85         p.canvasy < area.y || p.canvasy > area.y + area.h) {
  86       continue;
  87     }
  88
  89     var a = p.annotation;
  90     var tick_height = 6;
  91     if (a.hasOwnProperty("tickHeight")) {
  92       tick_height = a.tickHeight;
  93     }
  94
  95     var div = document.createElement("div");
  96     for (var name in annotationStyle) {
  97       if (annotationStyle.hasOwnProperty(name)) {
  98         div.style[name] = annotationStyle[name];
  99       }
 100     }
 101     if (!a.hasOwnProperty('icon')) {
 102       div.className = "dygraphDefaultAnnotation";
 103     }
 104     if (a.hasOwnProperty('cssClass')) {
 105       div.className += " " + a.cssClass;
 106     }
 107
 108     var width = a.hasOwnProperty('width') ? a.width : 16;
 109     var height = a.hasOwnProperty('height') ? a.height : 16;
 110     if (a.hasOwnProperty('icon')) {
 111       var img = document.createElement("img");
 112       img.src = a.icon;
 113       img.width = width;
 114       img.height = height;
 115       div.appendChild(img);
 116     } else if (p.annotation.hasOwnProperty('shortText')) {
 117       div.appendChild(document.createTextNode(p.annotation.shortText));
 118     }
 119     div.style.left = (p.canvasx - width / 2) + "px";
 120     if (a.attachAtBottom) {
 121       div.style.top = (area.y + area.h - height - tick_height) + "px";
 122     } else {
 123       div.style.top = (p.canvasy - height - tick_height) + "px";
 124     }
 125     div.style.width = width + "px";
 126     div.style.height = height + "px";
 127     div.title = p.annotation.text;
 128     div.style.color = g.colorsMap_[p.name];
 129     div.style.borderColor = g.colorsMap_[p.name];
 130     a.div = div;
 131
 132     g.addEvent(div, 'click',
 133         bindEvt('clickHandler', 'annotationClickHandler', p, this));
 134     g.addEvent(div, 'mouseover',
 135         bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
 136     g.addEvent(div, 'mouseout',
 137         bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
 138     g.addEvent(div, 'dblclick',
 139         bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
 140
 141     containerDiv.appendChild(div);
 142     this.annotations_.push(div);
 143
 144     var ctx = e.drawingContext;
 145     ctx.save();
 146     ctx.strokeStyle = g.colorsMap_[p.name];
 147     ctx.beginPath();
 148     if (!a.attachAtBottom) {
 149       ctx.moveTo(p.canvasx, p.canvasy);
 150       ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height);
 151     } else {
 152       ctx.moveTo(p.canvasx, area.h);
 153       ctx.lineTo(p.canvasx, area.h - 2 - tick_height);
 154     }
 155     ctx.closePath();
 156     ctx.stroke();
 157     ctx.restore();
 158   }
 159 };
 160
 161 annotations.prototype.destroy = function() {
 162   this.detachLabels();
 163 };
 164
 165 return annotations;
 166
 167 })();