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