Commit | Line | Data |
---|---|---|
3a7f87be DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
6 | Dygraph.Plugins.ChartLabels = (function() { | |
7 | ||
8 | // TODO(danvk): move chart label options out of dygraphs and into the plugin. | |
9 | ||
10 | var chart_labels = function() { | |
11 | this.title_div_ = null; | |
12 | this.xlabel_div_ = null; | |
13 | this.ylabel_div_ = null; | |
14 | this.y2label_div_ = null; | |
15 | }; | |
16 | ||
17 | chart_labels.prototype.toString = function() { | |
18 | return "ChartLabels Plugin"; | |
19 | }; | |
20 | ||
21 | chart_labels.prototype.activate = function(g) { | |
22 | return { | |
1748a51c DV |
23 | layout: this.layout, |
24 | // clearChart: this.clearChart, | |
25 | drawChart: this.drawChart | |
3a7f87be DV |
26 | }; |
27 | }; | |
28 | ||
29 | // QUESTION: should there be a plugin-utils.js? | |
30 | var createDivInRect = function(r) { | |
31 | var div = document.createElement('div'); | |
32 | div.style.position = 'absolute'; | |
33 | div.style.left = r.x + 'px'; | |
34 | div.style.top = r.y + 'px'; | |
35 | div.style.width = r.w + 'px'; | |
36 | div.style.height = r.h + 'px'; | |
37 | return div; | |
38 | }; | |
39 | ||
1748a51c DV |
40 | // Detach and null out any existing nodes. |
41 | chart_labels.prototype.detachLabels_ = function() { | |
42 | var els = [ this.title_div_, | |
43 | this.xlabel_div_, | |
44 | this.ylabel_div_, | |
45 | this.y2label_div_ ]; | |
46 | for (var i = 0; i < els.length; i++) { | |
47 | var el = els[i]; | |
48 | if (!el) continue; | |
49 | if (el.parentNode) el.parentNode.removeChild(el); | |
50 | } | |
51 | ||
52 | this.title_div_ = null; | |
53 | this.xlabel_div_ = null; | |
54 | this.ylabel_div_ = null; | |
55 | this.y2label_div_ = null; | |
56 | }; | |
57 | ||
441e4a56 DV |
58 | var createRotatedDiv = function(g, box, axis, classes, html) { |
59 | // TODO(danvk): is this outer div actually necessary? | |
60 | div = document.createElement("div"); | |
61 | div.style.position = 'absolute'; | |
62 | if (axis == 1) { | |
1c177b6a DV |
63 | // NOTE: this is cheating. Should be positioned relative to the box. |
64 | div.style.left = '0px'; | |
441e4a56 | 65 | } else { |
1c177b6a | 66 | div.style.left = box.x + 'px'; |
441e4a56 | 67 | } |
1c177b6a DV |
68 | div.style.top = box.y + 'px'; |
69 | div.style.width = box.w + 'px'; | |
70 | div.style.height = box.h + 'px'; | |
441e4a56 DV |
71 | div.style.fontSize = (g.getOption('yLabelWidth') - 2) + 'px'; |
72 | ||
73 | var inner_div = document.createElement("div"); | |
74 | inner_div.style.position = 'absolute'; | |
1c177b6a DV |
75 | inner_div.style.width = box.h + 'px'; |
76 | inner_div.style.height = box.w + 'px'; | |
77 | inner_div.style.top = (box.h / 2 - box.w / 2) + 'px'; | |
78 | inner_div.style.left = (box.w / 2 - box.h / 2) + 'px'; | |
441e4a56 DV |
79 | inner_div.style.textAlign = 'center'; |
80 | ||
81 | // CSS rotation is an HTML5 feature which is not standardized. Hence every | |
82 | // browser has its own name for the CSS style. | |
83 | var val = 'rotate(' + (axis == 1 ? '-' : '') + '90deg)'; | |
84 | inner_div.style.transform = val; // HTML5 | |
85 | inner_div.style.WebkitTransform = val; // Safari/Chrome | |
86 | inner_div.style.MozTransform = val; // Firefox | |
87 | inner_div.style.OTransform = val; // Opera | |
88 | inner_div.style.msTransform = val; // IE9 | |
89 | ||
90 | if (typeof(document.documentMode) !== 'undefined' && | |
91 | document.documentMode < 9) { | |
92 | // We're dealing w/ an old version of IE, so we have to rotate the text | |
93 | // using a BasicImage transform. This uses a different origin of rotation | |
94 | // than HTML5 rotation (top left of div vs. its center). | |
95 | inner_div.style.filter = | |
96 | 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + | |
97 | (axis == 1 ? '3' : '1') + ')'; | |
98 | inner_div.style.left = '0px'; | |
99 | inner_div.style.top = '0px'; | |
100 | } | |
101 | ||
102 | class_div = document.createElement("div"); | |
103 | class_div.className = classes; | |
104 | class_div.innerHTML = html; | |
105 | ||
106 | inner_div.appendChild(class_div); | |
107 | div.appendChild(inner_div); | |
108 | return div; | |
109 | } | |
110 | ||
6dca682f | 111 | chart_labels.prototype.layout = function(e) { |
1748a51c DV |
112 | this.detachLabels_(); |
113 | ||
3a7f87be DV |
114 | var g = e.dygraph; |
115 | var div = e.chart_div; | |
116 | if (g.getOption('title')) { | |
117 | // QUESTION: should this return an absolutely-positioned div instead? | |
118 | var title_rect = e.reserveSpaceTop(g.getOption('titleHeight')); | |
119 | this.title_div_ = createDivInRect(title_rect); | |
3a7f87be DV |
120 | this.title_div_.style.textAlign = 'center'; |
121 | this.title_div_.style.fontSize = (g.getOption('titleHeight') - 8) + 'px'; | |
122 | this.title_div_.style.fontWeight = 'bold'; | |
1c177b6a DV |
123 | |
124 | var class_div = document.createElement("div"); | |
125 | class_div.className = 'dygraph-label dygraph-title'; | |
126 | class_div.innerHTML = g.getOption('title'); | |
127 | this.title_div_.appendChild(class_div); | |
3a7f87be DV |
128 | div.appendChild(this.title_div_); |
129 | } | |
130 | ||
1c177b6a DV |
131 | if (g.getOption('xlabel')) { |
132 | var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight')); | |
133 | this.xlabel_div_ = createDivInRect(x_rect); | |
134 | this.xlabel_div_.style.textAlign = 'center'; | |
135 | this.xlabel_div_.style.fontSize = (g.getOption('xLabelHeight') - 2) + 'px'; | |
136 | ||
137 | var class_div = document.createElement("div"); | |
138 | class_div.className = 'dygraph-label dygraph-xlabel'; | |
139 | class_div.innerHTML = g.getOption('xlabel'); | |
140 | this.xlabel_div_.appendChild(class_div); | |
141 | div.appendChild(this.xlabel_div_); | |
142 | } | |
143 | ||
3a7f87be | 144 | if (g.getOption('ylabel')) { |
441e4a56 DV |
145 | // It would make sense to shift the chart here to make room for the y-axis |
146 | // label, but the default yAxisLabelWidth is large enough that this results | |
147 | // in overly-padded charts. The y-axis label should fit fine. If it | |
148 | // doesn't, the yAxisLabelWidth option can be increased. | |
3a7f87be | 149 | var y_rect = e.reserveSpaceLeft(0); |
441e4a56 DV |
150 | |
151 | this.ylabel_div_ = createRotatedDiv( | |
152 | g, y_rect, | |
153 | 1, // primary (left) y-axis | |
154 | 'dygraph-label dygraph-ylabel', | |
155 | g.getOption('ylabel')); | |
156 | div.appendChild(this.ylabel_div_); | |
157 | } | |
158 | ||
1c177b6a DV |
159 | if (g.getOption('y2label') && g.numAxes() == 2) { |
160 | // same logic applies here as for ylabel. | |
3a7f87be | 161 | var y2_rect = e.reserveSpaceRight(0); |
1c177b6a DV |
162 | this.y2label_div_ = createRotatedDiv( |
163 | g, y2_rect, | |
164 | 2, // secondary (right) y-axis | |
165 | 'dygraph-label dygraph-y2label', | |
166 | g.getOption('y2label')); | |
167 | div.appendChild(this.y2label_div_); | |
3a7f87be | 168 | } |
3a7f87be DV |
169 | }; |
170 | ||
1748a51c DV |
171 | chart_labels.prototype.drawChart = function(e) { |
172 | var g = e.dygraph; | |
173 | if (this.title_div_) { | |
1c177b6a DV |
174 | this.title_div_.children[0].innerHTML = g.getOption('title'); |
175 | } | |
176 | if (this.xlabel_div_) { | |
177 | this.xlabel_div_.children[0].innerHTML = g.getOption('xlabel'); | |
1748a51c | 178 | } |
441e4a56 | 179 | if (this.ylabel_div_) { |
1c177b6a DV |
180 | this.ylabel_div_.children[0].children[0].innerHTML = g.getOption('ylabel'); |
181 | } | |
182 | if (this.y2label_div_) { | |
183 | this.y2label_div_.children[0].children[0].innerHTML = g.getOption('y2label'); | |
441e4a56 | 184 | } |
1748a51c DV |
185 | }; |
186 | ||
187 | chart_labels.prototype.clearChart = function() { | |
188 | }; | |
189 | ||
3a7f87be | 190 | chart_labels.prototype.destroy = function() { |
1748a51c | 191 | detachLabels(); |
3a7f87be DV |
192 | }; |
193 | ||
194 | ||
195 | return chart_labels; | |
196 | })(); |