Commit | Line | Data |
---|---|---|
41da6a86 DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
6 | ||
e2c21500 | 7 | Dygraph.Plugins.Legend = (function() { |
e2c21500 DV |
8 | /* |
9 | ||
10 | Current bits of jankiness: | |
11 | - Uses two private APIs: | |
12 | 1. Dygraph.optionsViewForAxis_ | |
13 | 2. dygraph.plotter_.area | |
14 | - Registers for a "predraw" event, which should be renamed. | |
15 | - I call calculateEmWidthInDiv more often than needed. | |
e2c21500 DV |
16 | |
17 | */ | |
18 | ||
19 | "use strict"; | |
20 | ||
21 | ||
22 | /** | |
23 | * Creates the legend, which appears when the user hovers over the chart. | |
24 | * The legend can be either a user-specified or generated div. | |
25 | * | |
26 | * @constructor | |
27 | */ | |
28 | var legend = function() { | |
29 | this.legend_div_ = null; | |
30 | this.is_generated_div_ = false; // do we own this div, or was it user-specified? | |
31 | }; | |
32 | ||
33 | legend.prototype.toString = function() { | |
34 | return "Legend Plugin"; | |
35 | }; | |
36 | ||
37 | /** | |
38 | * This is called during the dygraph constructor, after options have been set | |
39 | * but before the data is available. | |
40 | * | |
41 | * Proper tasks to do here include: | |
42 | * - Reading your own options | |
43 | * - DOM manipulation | |
44 | * - Registering event listeners | |
6a4457b4 KW |
45 | * |
46 | * @param {Dygraph} g Graph instance. | |
47 | * @return {object.<string, function(ev)>} Mapping of event names to callbacks. | |
e2c21500 | 48 | */ |
6a4457b4 | 49 | legend.prototype.activate = function(g) { |
e2c21500 DV |
50 | var div; |
51 | var divWidth = g.getOption('labelsDivWidth'); | |
52 | ||
53 | var userLabelsDiv = g.getOption('labelsDiv'); | |
54 | if (userLabelsDiv && null !== userLabelsDiv) { | |
55 | if (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String) { | |
56 | div = document.getElementById(userLabelsDiv); | |
57 | } else { | |
58 | div = userLabelsDiv; | |
59 | } | |
60 | } else { | |
61 | // Default legend styles. These can be overridden in CSS by adding | |
62 | // "!important" after your rule, e.g. "left: 30px !important;" | |
63 | var messagestyle = { | |
64 | "position": "absolute", | |
65 | "fontSize": "14px", | |
66 | "zIndex": 10, | |
67 | "width": divWidth + "px", | |
68 | "top": "0px", | |
63e957d7 | 69 | "left": (g.size().width - divWidth - 2) + "px", |
e2c21500 | 70 | "background": "white", |
c12450f1 | 71 | "lineHeight": "normal", |
e2c21500 DV |
72 | "textAlign": "left", |
73 | "overflow": "hidden"}; | |
74 | ||
75 | // TODO(danvk): get rid of labelsDivStyles? CSS is better. | |
76 | Dygraph.update(messagestyle, g.getOption('labelsDivStyles')); | |
77 | div = document.createElement("div"); | |
78 | div.className = "dygraph-legend"; | |
79 | for (var name in messagestyle) { | |
80 | if (!messagestyle.hasOwnProperty(name)) continue; | |
81 | ||
82 | try { | |
83 | div.style[name] = messagestyle[name]; | |
84 | } catch (e) { | |
85 | this.warn("You are using unsupported css properties for your " + | |
86 | "browser in labelsDivStyles"); | |
87 | } | |
88 | } | |
89 | ||
90 | // TODO(danvk): come up with a cleaner way to expose this. | |
91 | g.graphDiv.appendChild(div); | |
92 | this.is_generated_div_ = true; | |
93 | } | |
94 | ||
95 | this.legend_div_ = div; | |
c3b1d17d | 96 | this.one_em_width_ = 10; // just a guess, will be updated. |
e2c21500 | 97 | |
6a4457b4 KW |
98 | return { |
99 | select: this.select, | |
100 | deselect: this.deselect, | |
101 | // TODO(danvk): rethink the name "predraw" before we commit to it in any API. | |
102 | predraw: this.predraw, | |
98eb4713 | 103 | didDrawChart: this.didDrawChart |
6a4457b4 | 104 | }; |
e2c21500 DV |
105 | }; |
106 | ||
107 | // Needed for dashed lines. | |
108 | var calculateEmWidthInDiv = function(div) { | |
109 | var sizeSpan = document.createElement('span'); | |
110 | sizeSpan.setAttribute('style', 'margin: 0; padding: 0 0 0 1em; border: 0;'); | |
111 | div.appendChild(sizeSpan); | |
112 | var oneEmWidth=sizeSpan.offsetWidth; | |
113 | div.removeChild(sizeSpan); | |
114 | return oneEmWidth; | |
115 | }; | |
116 | ||
6a4457b4 | 117 | legend.prototype.select = function(e) { |
e2c21500 DV |
118 | var xValue = e.selectedX; |
119 | var points = e.selectedPoints; | |
120 | ||
c3b1d17d | 121 | var html = generateLegendHTML(e.dygraph, xValue, points, this.one_em_width_); |
e2c21500 DV |
122 | this.legend_div_.innerHTML = html; |
123 | }; | |
124 | ||
6a4457b4 | 125 | legend.prototype.deselect = function(e) { |
c3b1d17d | 126 | // Have to do this every time, since styles might have changed. |
e2c21500 | 127 | var oneEmWidth = calculateEmWidthInDiv(this.legend_div_); |
c3b1d17d DV |
128 | this.one_em_width_ = oneEmWidth; |
129 | ||
e2c21500 DV |
130 | var html = generateLegendHTML(e.dygraph, undefined, undefined, oneEmWidth); |
131 | this.legend_div_.innerHTML = html; | |
132 | }; | |
133 | ||
98eb4713 | 134 | legend.prototype.didDrawChart = function(e) { |
6a4457b4 | 135 | this.deselect(e); |
e2c21500 DV |
136 | } |
137 | ||
138 | // Right edge should be flush with the right edge of the charting area (which | |
139 | // may not be the same as the right edge of the div, if we have two y-axes. | |
140 | // TODO(danvk): is any of this really necessary? Could just set "right" in "activate". | |
141 | /** | |
142 | * Position the labels div so that: | |
143 | * - its right edge is flush with the right edge of the charting area | |
144 | * - its top edge is flush with the top edge of the charting area | |
145 | * @private | |
146 | */ | |
6a4457b4 | 147 | legend.prototype.predraw = function(e) { |
e2c21500 DV |
148 | // Don't touch a user-specified labelsDiv. |
149 | if (!this.is_generated_div_) return; | |
150 | ||
151 | // TODO(danvk): only use real APIs for this. | |
0673f7c4 | 152 | e.dygraph.graphDiv.appendChild(this.legend_div_); |
e2c21500 DV |
153 | var area = e.dygraph.plotter_.area; |
154 | this.legend_div_.style.left = area.x + area.w - e.dygraph.getOption("labelsDivWidth") - 1 + "px"; | |
155 | this.legend_div_.style.top = area.y + "px"; | |
156 | }; | |
157 | ||
158 | /** | |
159 | * Called when dygraph.destroy() is called. | |
160 | * You should null out any references and detach any DOM elements. | |
161 | */ | |
162 | legend.prototype.destroy = function() { | |
163 | this.legend_div_ = null; | |
164 | }; | |
165 | ||
166 | /** | |
167 | * @private | |
168 | * Generates HTML for the legend which is displayed when hovering over the | |
169 | * chart. If no selected points are specified, a default legend is returned | |
170 | * (this may just be the empty string). | |
171 | * @param { Number } [x] The x-value of the selected points. | |
172 | * @param { [Object] } [sel_points] List of selected points for the given | |
173 | * x-value. Should have properties like 'name', 'yval' and 'canvasy'. | |
174 | * @param { Number } [oneEmWidth] The pixel width for 1em in the legend. Only | |
175 | * relevant when displaying a legend with no selection (i.e. {legend: | |
176 | * 'always'}) and with dashed lines. | |
177 | */ | |
178 | var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { | |
179 | // TODO(danvk): deprecate this option in place of {legend: 'never'} | |
180 | if (g.getOption('showLabelsOnHighlight') !== true) return ''; | |
181 | ||
182 | // If no points are selected, we display a default legend. Traditionally, | |
183 | // this has been blank. But a better default would be a conventional legend, | |
184 | // which provides essential information for a non-interactive chart. | |
185 | var html, sepLines, i, c, dash, strokePattern; | |
186 | var labels = g.getLabels(); | |
187 | ||
188 | if (typeof(x) === 'undefined') { | |
189 | if (g.getOption('legend') != 'always') { | |
190 | return ''; | |
191 | } | |
192 | ||
193 | sepLines = g.getOption('labelsSeparateLines'); | |
194 | html = ''; | |
195 | for (i = 1; i < labels.length; i++) { | |
196 | var series = g.getPropertiesForSeries(labels[i]); | |
197 | if (!series.visible) continue; | |
198 | ||
199 | if (html !== '') html += (sepLines ? '<br/>' : ' '); | |
200 | strokePattern = g.getOption("strokePattern", labels[i]); | |
201 | dash = generateLegendDashHTML(strokePattern, series.color, oneEmWidth); | |
202 | html += "<span style='font-weight: bold; color: " + series.color + ";'>" + | |
203 | dash + " " + labels[i] + "</span>"; | |
204 | } | |
205 | return html; | |
206 | } | |
207 | ||
208 | // TODO(danvk): remove this use of a private API | |
209 | var xOptView = g.optionsViewForAxis_('x'); | |
210 | var xvf = xOptView('valueFormatter'); | |
f5715653 | 211 | html = xvf(x, xOptView, labels[0], g); |
5e893479 | 212 | if(html !== '') { |
f5715653 J |
213 | html += ':'; |
214 | } | |
e2c21500 DV |
215 | |
216 | var yOptViews = []; | |
217 | var num_axes = g.numAxes(); | |
218 | for (i = 0; i < num_axes; i++) { | |
219 | // TODO(danvk): remove this use of a private API | |
220 | yOptViews[i] = g.optionsViewForAxis_('y' + (i ? 1 + i : '')); | |
221 | } | |
222 | var showZeros = g.getOption("labelsShowZeroValues"); | |
223 | sepLines = g.getOption("labelsSeparateLines"); | |
224 | var highlightSeries = g.getHighlightSeries(); | |
225 | for (i = 0; i < sel_points.length; i++) { | |
226 | var pt = sel_points[i]; | |
227 | if (pt.yval === 0 && !showZeros) continue; | |
228 | if (!Dygraph.isOK(pt.canvasy)) continue; | |
229 | if (sepLines) html += "<br/>"; | |
230 | ||
231 | var series = g.getPropertiesForSeries(pt.name); | |
232 | var yOptView = yOptViews[series.axis - 1]; | |
233 | var fmtFunc = yOptView('valueFormatter'); | |
234 | var yval = fmtFunc(pt.yval, yOptView, pt.name, g); | |
235 | ||
236 | var cls = (pt.name == highlightSeries) ? " class='highlight'" : ""; | |
237 | ||
238 | // TODO(danvk): use a template string here and make it an attribute. | |
239 | html += "<span" + cls + ">" + " <b><span style='color: " + series.color + ";'>" + | |
240 | pt.name + "</span></b>:" + yval + "</span>"; | |
241 | } | |
242 | return html; | |
243 | }; | |
244 | ||
245 | ||
246 | /** | |
247 | * Generates html for the "dash" displayed on the legend when using "legend: always". | |
248 | * In particular, this works for dashed lines with any stroke pattern. It will | |
249 | * try to scale the pattern to fit in 1em width. Or if small enough repeat the | |
250 | * pattern for 1em width. | |
251 | * | |
252 | * @param strokePattern The pattern | |
253 | * @param color The color of the series. | |
254 | * @param oneEmWidth The width in pixels of 1em in the legend. | |
255 | * @private | |
256 | */ | |
257 | var generateLegendDashHTML = function(strokePattern, color, oneEmWidth) { | |
258 | // IE 7,8 fail at these divs, so they get boring legend, have not tested 9. | |
259 | var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); | |
260 | if (isIE) return "—"; | |
261 | ||
262 | // Easy, common case: a solid line | |
263 | if (!strokePattern || strokePattern.length <= 1) { | |
264 | return "<div style=\"display: inline-block; position: relative; " + | |
265 | "bottom: .5ex; padding-left: 1em; height: 1px; " + | |
266 | "border-bottom: 2px solid " + color + ";\"></div>"; | |
267 | } | |
268 | ||
269 | var i, j, paddingLeft, marginRight; | |
270 | var strokePixelLength = 0, segmentLoop = 0; | |
271 | var normalizedPattern = []; | |
272 | var loop; | |
273 | ||
274 | // Compute the length of the pixels including the first segment twice, | |
275 | // since we repeat it. | |
276 | for (i = 0; i <= strokePattern.length; i++) { | |
277 | strokePixelLength += strokePattern[i%strokePattern.length]; | |
278 | } | |
279 | ||
280 | // See if we can loop the pattern by itself at least twice. | |
281 | loop = Math.floor(oneEmWidth/(strokePixelLength-strokePattern[0])); | |
282 | if (loop > 1) { | |
283 | // This pattern fits at least two times, no scaling just convert to em; | |
284 | for (i = 0; i < strokePattern.length; i++) { | |
285 | normalizedPattern[i] = strokePattern[i]/oneEmWidth; | |
286 | } | |
287 | // Since we are repeating the pattern, we don't worry about repeating the | |
288 | // first segment in one draw. | |
289 | segmentLoop = normalizedPattern.length; | |
290 | } else { | |
291 | // If the pattern doesn't fit in the legend we scale it to fit. | |
292 | loop = 1; | |
293 | for (i = 0; i < strokePattern.length; i++) { | |
294 | normalizedPattern[i] = strokePattern[i]/strokePixelLength; | |
295 | } | |
296 | // For the scaled patterns we do redraw the first segment. | |
297 | segmentLoop = normalizedPattern.length+1; | |
298 | } | |
299 | ||
300 | // Now make the pattern. | |
301 | var dash = ""; | |
302 | for (j = 0; j < loop; j++) { | |
303 | for (i = 0; i < segmentLoop; i+=2) { | |
304 | // The padding is the drawn segment. | |
305 | paddingLeft = normalizedPattern[i%normalizedPattern.length]; | |
306 | if (i < strokePattern.length) { | |
307 | // The margin is the space segment. | |
308 | marginRight = normalizedPattern[(i+1)%normalizedPattern.length]; | |
309 | } else { | |
310 | // The repeated first segment has no right margin. | |
311 | marginRight = 0; | |
312 | } | |
313 | dash += "<div style=\"display: inline-block; position: relative; " + | |
314 | "bottom: .5ex; margin-right: " + marginRight + "em; padding-left: " + | |
315 | paddingLeft + "em; height: 1px; border-bottom: 2px solid " + color + | |
316 | ";\"></div>"; | |
317 | } | |
318 | } | |
319 | return dash; | |
320 | }; | |
321 | ||
322 | ||
323 | return legend; | |
324 | })(); |