Commit | Line | Data |
---|---|---|
f8540c66 DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
6 | ||
0cd1ad15 DV |
7 | /*global Dygraph:false */ |
8 | ||
f8540c66 DV |
9 | Dygraph.Plugins.Axes = (function() { |
10 | ||
e0269a3d | 11 | 'use strict'; |
13f8b047 | 12 | |
f8540c66 | 13 | /* |
f8540c66 DV |
14 | Bits of jankiness: |
15 | - Direct layout access | |
16 | - Direct area access | |
17 | - Should include calculation of ticks, not just the drawing. | |
18 | ||
b67b868c RK |
19 | Options left to make axis-friendly. |
20 | ('axisTickSize') | |
21 | ('drawAxesAtZero') | |
22 | ('xAxisHeight') | |
23 | ||
e0269a3d | 24 | These too. What is the difference between axisLabelWidth and {x,y}AxisLabelWidth? |
b67b868c RK |
25 | ('axisLabelWidth') |
26 | ('xAxisLabelWidth') | |
27 | ('yAxisLabelWidth') | |
f8540c66 DV |
28 | */ |
29 | ||
30 | /** | |
31 | * Draws the axes. This includes the labels on the x- and y-axes, as well | |
32 | * as the tick marks on the axes. | |
33 | * It does _not_ draw the grid lines which span the entire chart. | |
34 | */ | |
35 | var axes = function() { | |
36 | this.xlabels_ = []; | |
37 | this.ylabels_ = []; | |
38 | }; | |
39 | ||
40 | axes.prototype.toString = function() { | |
e0269a3d | 41 | return 'Axes Plugin'; |
f8540c66 DV |
42 | }; |
43 | ||
44 | axes.prototype.activate = function(g) { | |
45 | return { | |
46 | layout: this.layout, | |
47 | clearChart: this.clearChart, | |
98eb4713 | 48 | willDrawChart: this.willDrawChart |
f8540c66 DV |
49 | }; |
50 | }; | |
51 | ||
52 | axes.prototype.layout = function(e) { | |
53 | var g = e.dygraph; | |
54 | ||
7f6a7190 | 55 | if (g.getOptionForAxis('drawAxis', 'y')) { |
e0269a3d | 56 | var w = g.getOptionForAxis('axisLabelWidth', 'y') + 2 * g.getOptionForAxis('axisTickSize', 'y'); |
0cd1ad15 | 57 | e.reserveSpaceLeft(w); |
f8540c66 DV |
58 | } |
59 | ||
7f6a7190 | 60 | if (g.getOptionForAxis('drawAxis', 'x')) { |
f8540c66 | 61 | var h; |
31c87125 RK |
62 | // NOTE: I think this is probably broken now, since g.getOption() now |
63 | // hits the dictionary. (That is, g.getOption('xAxisHeight') now always | |
64 | // has a value.) | |
f8540c66 DV |
65 | if (g.getOption('xAxisHeight')) { |
66 | h = g.getOption('xAxisHeight'); | |
67 | } else { | |
e0269a3d | 68 | h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOptionForAxis('axisTickSize', 'x'); |
f8540c66 | 69 | } |
0cd1ad15 | 70 | e.reserveSpaceBottom(h); |
f8540c66 DV |
71 | } |
72 | ||
73 | if (g.numAxes() == 2) { | |
e0269a3d DV |
74 | if (g.getOptionForAxis('drawAxis', 'y2')) { |
75 | var w = g.getOptionForAxis('axisLabelWidth', 'y2') + 2 * g.getOptionForAxis('axisTickSize', 'y2'); | |
9f890c23 DV |
76 | e.reserveSpaceRight(w); |
77 | } | |
f8540c66 | 78 | } else if (g.numAxes() > 2) { |
e0269a3d DV |
79 | g.error('Only two y-axes are supported at this time. (Trying ' + |
80 | 'to use ' + g.numAxes() + ')'); | |
f8540c66 DV |
81 | } |
82 | }; | |
83 | ||
84 | axes.prototype.detachLabels = function() { | |
85 | function removeArray(ary) { | |
86 | for (var i = 0; i < ary.length; i++) { | |
87 | var el = ary[i]; | |
88 | if (el.parentNode) el.parentNode.removeChild(el); | |
89 | } | |
90 | } | |
91 | ||
92 | removeArray(this.xlabels_); | |
93 | removeArray(this.ylabels_); | |
94 | this.xlabels_ = []; | |
95 | this.ylabels_ = []; | |
96 | }; | |
97 | ||
98 | axes.prototype.clearChart = function(e) { | |
f8540c66 | 99 | this.detachLabels(); |
42a9ebb8 | 100 | }; |
f8540c66 | 101 | |
98eb4713 | 102 | axes.prototype.willDrawChart = function(e) { |
f8540c66 | 103 | var g = e.dygraph; |
7f6a7190 | 104 | |
e0269a3d DV |
105 | if (!g.getOptionForAxis('drawAxis', 'x') && |
106 | !g.getOptionForAxis('drawAxis', 'y') && | |
107 | !g.getOptionForAxis('drawAxis', 'y2')) { | |
108 | return; | |
109 | } | |
f8540c66 DV |
110 | |
111 | // Round pixels to half-integer boundaries for crisper drawing. | |
112 | function halfUp(x) { return Math.round(x) + 0.5; } | |
113 | function halfDown(y){ return Math.round(y) - 0.5; } | |
114 | ||
115 | var context = e.drawingContext; | |
116 | var containerDiv = e.canvas.parentNode; | |
7c39bb3a DV |
117 | var canvasWidth = g.width_; // e.canvas.width is affected by pixel ratio. |
118 | var canvasHeight = g.height_; | |
f8540c66 DV |
119 | |
120 | var label, x, y, tick, i; | |
121 | ||
48dc3815 RK |
122 | var makeLabelStyle = function(axis) { |
123 | return { | |
e0269a3d DV |
124 | position: 'absolute', |
125 | fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + 'px', | |
48dc3815 | 126 | zIndex: 10, |
3a84670d | 127 | color: g.getOptionForAxis('axisLabelColor', axis), |
e0269a3d | 128 | width: g.getOptionForAxis('axisLabelWidth', axis) + 'px', |
48dc3815 | 129 | // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px", |
e0269a3d DV |
130 | lineHeight: 'normal', // Something other than "normal" line-height screws up label positioning. |
131 | overflow: 'hidden' | |
48dc3815 | 132 | }; |
83b0c192 | 133 | }; |
48dc3815 RK |
134 | |
135 | var labelStyles = { | |
136 | x : makeLabelStyle('x'), | |
137 | y : makeLabelStyle('y'), | |
83b0c192 | 138 | y2 : makeLabelStyle('y2') |
f8540c66 | 139 | }; |
48dc3815 | 140 | |
f8540c66 | 141 | var makeDiv = function(txt, axis, prec_axis) { |
48dc3815 | 142 | /* |
7e1d5659 | 143 | * This seems to be called with the following three sets of axis/prec_axis: |
48dc3815 RK |
144 | * x: undefined |
145 | * y: y1 | |
146 | * y: y2 | |
147 | */ | |
e0269a3d | 148 | var div = document.createElement('div'); |
48dc3815 | 149 | var labelStyle = labelStyles[prec_axis == 'y2' ? 'y2' : axis]; |
f8540c66 DV |
150 | for (var name in labelStyle) { |
151 | if (labelStyle.hasOwnProperty(name)) { | |
152 | div.style[name] = labelStyle[name]; | |
153 | } | |
154 | } | |
e0269a3d | 155 | var inner_div = document.createElement('div'); |
f8540c66 DV |
156 | inner_div.className = 'dygraph-axis-label' + |
157 | ' dygraph-axis-label-' + axis + | |
158 | (prec_axis ? ' dygraph-axis-label-' + prec_axis : ''); | |
159 | inner_div.innerHTML = txt; | |
160 | div.appendChild(inner_div); | |
161 | return div; | |
162 | }; | |
163 | ||
164 | // axis lines | |
165 | context.save(); | |
f8540c66 DV |
166 | |
167 | var layout = g.layout_; | |
168 | var area = e.dygraph.plotter_.area; | |
169 | ||
e0269a3d DV |
170 | // Helper for repeated axis-option accesses. |
171 | var makeOptionGetter = function(axis) { | |
172 | return function(option) { | |
173 | return g.getOptionForAxis(option, axis); | |
174 | }; | |
175 | }; | |
176 | ||
7f6a7190 | 177 | if (g.getOptionForAxis('drawAxis', 'y')) { |
f8540c66 DV |
178 | if (layout.yticks && layout.yticks.length > 0) { |
179 | var num_axes = g.numAxes(); | |
e0269a3d | 180 | var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')]; |
f8540c66 DV |
181 | for (i = 0; i < layout.yticks.length; i++) { |
182 | tick = layout.yticks[i]; | |
e0269a3d | 183 | if (typeof(tick) == 'function') return; // <-- when would this happen? |
f8540c66 DV |
184 | x = area.x; |
185 | var sgn = 1; | |
186 | var prec_axis = 'y1'; | |
e0269a3d | 187 | var getAxisOption = getOptions[0]; |
f8540c66 DV |
188 | if (tick[0] == 1) { // right-side y-axis |
189 | x = area.x + area.w; | |
190 | sgn = -1; | |
191 | prec_axis = 'y2'; | |
e0269a3d | 192 | getAxisOption = getOptions[1]; |
f8540c66 | 193 | } |
e0269a3d | 194 | var fontSize = getAxisOption('axisLabelFontSize'); |
f8540c66 DV |
195 | y = area.y + tick[1] * area.h; |
196 | ||
197 | /* Tick marks are currently clipped, so don't bother drawing them. | |
198 | context.beginPath(); | |
199 | context.moveTo(halfUp(x), halfDown(y)); | |
200 | context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); | |
201 | context.closePath(); | |
202 | context.stroke(); | |
203 | */ | |
204 | ||
205 | label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); | |
48dc3815 | 206 | var top = (y - fontSize / 2); |
f8540c66 DV |
207 | if (top < 0) top = 0; |
208 | ||
48dc3815 | 209 | if (top + fontSize + 3 > canvasHeight) { |
e0269a3d | 210 | label.style.bottom = '0'; |
f8540c66 | 211 | } else { |
e0269a3d | 212 | label.style.top = top + 'px'; |
f8540c66 DV |
213 | } |
214 | if (tick[0] === 0) { | |
e0269a3d DV |
215 | label.style.left = (area.x - getAxisOption('axisLabelWidth') - getAxisOption('axisTickSize')) + 'px'; |
216 | label.style.textAlign = 'right'; | |
f8540c66 DV |
217 | } else if (tick[0] == 1) { |
218 | label.style.left = (area.x + area.w + | |
e0269a3d DV |
219 | getAxisOption('axisTickSize')) + 'px'; |
220 | label.style.textAlign = 'left'; | |
f8540c66 | 221 | } |
e0269a3d | 222 | label.style.width = getAxisOption('axisLabelWidth') + 'px'; |
f8540c66 DV |
223 | containerDiv.appendChild(label); |
224 | this.ylabels_.push(label); | |
225 | } | |
226 | ||
227 | // The lowest tick on the y-axis often overlaps with the leftmost | |
228 | // tick on the x-axis. Shift the bottom tick up a little bit to | |
229 | // compensate if necessary. | |
230 | var bottomTick = this.ylabels_[0]; | |
48dc3815 | 231 | // Interested in the y2 axis also? |
e0269a3d | 232 | var fontSize = g.getOptionForAxis('axisLabelFontSize', 'y'); |
f8540c66 | 233 | var bottom = parseInt(bottomTick.style.top, 10) + fontSize; |
beeabac2 | 234 | if (bottom > canvasHeight - fontSize) { |
f8540c66 | 235 | bottomTick.style.top = (parseInt(bottomTick.style.top, 10) - |
e0269a3d | 236 | fontSize / 2) + 'px'; |
f8540c66 DV |
237 | } |
238 | } | |
239 | ||
240 | // draw a vertical line on the left to separate the chart from the labels. | |
241 | var axisX; | |
242 | if (g.getOption('drawAxesAtZero')) { | |
beeabac2 | 243 | var r = g.toPercentXCoord(0); |
33e96f11 | 244 | if (r > 1 || r < 0 || isNaN(r)) r = 0; |
f8540c66 DV |
245 | axisX = halfUp(area.x + r * area.w); |
246 | } else { | |
247 | axisX = halfUp(area.x); | |
248 | } | |
b67b868c RK |
249 | |
250 | context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y'); | |
251 | context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y'); | |
252 | ||
f8540c66 DV |
253 | context.beginPath(); |
254 | context.moveTo(axisX, halfDown(area.y)); | |
255 | context.lineTo(axisX, halfDown(area.y + area.h)); | |
256 | context.closePath(); | |
257 | context.stroke(); | |
258 | ||
259 | // if there's a secondary y-axis, draw a vertical line for that, too. | |
260 | if (g.numAxes() == 2) { | |
b67b868c RK |
261 | context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y2'); |
262 | context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y2'); | |
f8540c66 DV |
263 | context.beginPath(); |
264 | context.moveTo(halfDown(area.x + area.w), halfDown(area.y)); | |
265 | context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h)); | |
266 | context.closePath(); | |
267 | context.stroke(); | |
268 | } | |
269 | } | |
270 | ||
7f6a7190 | 271 | if (g.getOptionForAxis('drawAxis', 'x')) { |
f8540c66 | 272 | if (layout.xticks) { |
e0269a3d | 273 | var getAxisOption = makeOptionGetter('x'); |
f8540c66 DV |
274 | for (i = 0; i < layout.xticks.length; i++) { |
275 | tick = layout.xticks[i]; | |
276 | x = area.x + tick[0] * area.w; | |
277 | y = area.y + area.h; | |
278 | ||
279 | /* Tick marks are currently clipped, so don't bother drawing them. | |
280 | context.beginPath(); | |
281 | context.moveTo(halfUp(x), halfDown(y)); | |
282 | context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); | |
283 | context.closePath(); | |
284 | context.stroke(); | |
285 | */ | |
286 | ||
287 | label = makeDiv(tick[1], 'x'); | |
e0269a3d DV |
288 | label.style.textAlign = 'center'; |
289 | label.style.top = (y + getAxisOption('axisTickSize')) + 'px'; | |
f8540c66 | 290 | |
e0269a3d DV |
291 | var left = (x - getAxisOption('axisLabelWidth')/2); |
292 | if (left + getAxisOption('axisLabelWidth') > canvasWidth) { | |
293 | left = canvasWidth - getAxisOption('axisLabelWidth'); | |
294 | label.style.textAlign = 'right'; | |
f8540c66 DV |
295 | } |
296 | if (left < 0) { | |
297 | left = 0; | |
e0269a3d | 298 | label.style.textAlign = 'left'; |
f8540c66 DV |
299 | } |
300 | ||
e0269a3d DV |
301 | label.style.left = left + 'px'; |
302 | label.style.width = getAxisOption('axisLabelWidth') + 'px'; | |
f8540c66 DV |
303 | containerDiv.appendChild(label); |
304 | this.xlabels_.push(label); | |
305 | } | |
306 | } | |
307 | ||
b67b868c RK |
308 | context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x'); |
309 | context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x'); | |
f8540c66 DV |
310 | context.beginPath(); |
311 | var axisY; | |
312 | if (g.getOption('drawAxesAtZero')) { | |
313 | var r = g.toPercentYCoord(0, 0); | |
314 | if (r > 1 || r < 0) r = 1; | |
315 | axisY = halfDown(area.y + r * area.h); | |
316 | } else { | |
317 | axisY = halfDown(area.y + area.h); | |
318 | } | |
319 | context.moveTo(halfUp(area.x), axisY); | |
320 | context.lineTo(halfUp(area.x + area.w), axisY); | |
321 | context.closePath(); | |
322 | context.stroke(); | |
323 | } | |
324 | ||
325 | context.restore(); | |
42a9ebb8 | 326 | }; |
f8540c66 DV |
327 | |
328 | return axes; | |
329 | })(); |