X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=7406f82a950f3c7cf7e516786591123f9400eee9;hb=e3a1d6944b1474e507e99a5f497d506ae3de2120;hp=bfc0595d43be283dc305d9e8be9d2caecf087297;hpb=e26b71566419e1c051f3fbd1f4f8f64b063a04c9;p=dygraphs.git diff --git a/plugins/legend.js b/plugins/legend.js index bfc0595..7406f82 100644 --- a/plugins/legend.js +++ b/plugins/legend.js @@ -1,5 +1,11 @@ -Dygraph.Plugins.Legend = (function() { +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +/*global Dygraph:false */ +Dygraph.Plugins.Legend = (function() { /* Current bits of jankiness: @@ -8,10 +14,11 @@ Current bits of jankiness: 2. dygraph.plotter_.area - Registers for a "predraw" event, which should be renamed. - I call calculateEmWidthInDiv more often than needed. -- Why can't I call "this.deselect(e)" instead of "legend.deselect.call(this, e)"? */ +/*jshint globalstrict: true */ +/*global Dygraph:false */ "use strict"; @@ -30,6 +37,9 @@ legend.prototype.toString = function() { return "Legend Plugin"; }; +// (defined below) +var generateLegendHTML, generateLegendDashHTML; + /** * This is called during the dygraph constructor, after options have been set * but before the data is available. @@ -38,8 +48,11 @@ legend.prototype.toString = function() { * - Reading your own options * - DOM manipulation * - Registering event listeners + * + * @param {Dygraph} g Graph instance. + * @return {object.} Mapping of event names to callbacks. */ -legend.prototype.activate = function(g, r) { +legend.prototype.activate = function(g) { var div; var divWidth = g.getOption('labelsDivWidth'); @@ -59,8 +72,9 @@ legend.prototype.activate = function(g, r) { "zIndex": 10, "width": divWidth + "px", "top": "0px", - "right": "2px", + "left": (g.size().width - divWidth - 2) + "px", "background": "white", + "lineHeight": "normal", "textAlign": "left", "overflow": "hidden"}; @@ -85,13 +99,15 @@ legend.prototype.activate = function(g, r) { } this.legend_div_ = div; - - r.addEventListener('select', legend.select); - r.addEventListener('deselect', legend.deselect); - - // TODO(danvk): rethink the name "predraw" before we commit to it in any API. - r.addEventListener('predraw', legend.predraw); - r.addEventListener('drawChart', legend.drawChart); + this.one_em_width_ = 10; // just a guess, will be updated. + + return { + select: this.select, + deselect: this.deselect, + // TODO(danvk): rethink the name "predraw" before we commit to it in any API. + predraw: this.predraw, + didDrawChart: this.didDrawChart + }; }; // Needed for dashed lines. @@ -104,28 +120,26 @@ var calculateEmWidthInDiv = function(div) { return oneEmWidth; }; -legend.select = function(e) { +legend.prototype.select = function(e) { var xValue = e.selectedX; var points = e.selectedPoints; - // Have to do this every time, since styles might have changed. - // TODO(danvk): this is not necessary; dashes never used in this case. - var oneEmWidth = calculateEmWidthInDiv(this.legend_div_); - - var html = generateLegendHTML(e.dygraph, xValue, points, oneEmWidth); + var html = generateLegendHTML(e.dygraph, xValue, points, this.one_em_width_); this.legend_div_.innerHTML = html; }; -legend.deselect = function(e) { +legend.prototype.deselect = function(e) { + // Have to do this every time, since styles might have changed. var oneEmWidth = calculateEmWidthInDiv(this.legend_div_); + this.one_em_width_ = oneEmWidth; + var html = generateLegendHTML(e.dygraph, undefined, undefined, oneEmWidth); this.legend_div_.innerHTML = html; }; -legend.drawChart = function(e) { - // TODO(danvk): why doesn't this.deselect(e) work here? - legend.deselect.call(this, e); -} +legend.prototype.didDrawChart = function(e) { + this.deselect(e); +}; // Right edge should be flush with the right edge of the charting area (which // may not be the same as the right edge of the div, if we have two y-axes. @@ -136,14 +150,17 @@ legend.drawChart = function(e) { * - its top edge is flush with the top edge of the charting area * @private */ -legend.predraw = function(e) { +legend.prototype.predraw = function(e) { // Don't touch a user-specified labelsDiv. if (!this.is_generated_div_) return; // TODO(danvk): only use real APIs for this. + e.dygraph.graphDiv.appendChild(this.legend_div_); var area = e.dygraph.plotter_.area; - this.legend_div_.style.left = area.x + area.w - e.dygraph.getOption("labelsDivWidth") - 1 + "px"; + var labelsDivWidth = e.dygraph.getOption("labelsDivWidth"); + this.legend_div_.style.left = area.x + area.w - labelsDivWidth - 1 + "px"; this.legend_div_.style.top = area.y + "px"; + this.legend_div_.style.width = labelsDivWidth + "px"; }; /** @@ -166,14 +183,14 @@ legend.prototype.destroy = function() { * relevant when displaying a legend with no selection (i.e. {legend: * 'always'}) and with dashed lines. */ -var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { +generateLegendHTML = function(g, x, sel_points, oneEmWidth) { // TODO(danvk): deprecate this option in place of {legend: 'never'} if (g.getOption('showLabelsOnHighlight') !== true) return ''; // If no points are selected, we display a default legend. Traditionally, // this has been blank. But a better default would be a conventional legend, // which provides essential information for a non-interactive chart. - var html, sepLines, i, c, dash, strokePattern; + var html, sepLines, i, dash, strokePattern; var labels = g.getLabels(); if (typeof(x) === 'undefined') { @@ -199,7 +216,10 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { // TODO(danvk): remove this use of a private API var xOptView = g.optionsViewForAxis_('x'); var xvf = xOptView('valueFormatter'); - html = xvf(x, xOptView, labels[0], g) + ":"; + html = xvf(x, xOptView, labels[0], g); + if (html !== '') { + html += ':'; + } var yOptViews = []; var num_axes = g.numAxes(); @@ -225,7 +245,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { // TODO(danvk): use a template string here and make it an attribute. html += "" + " " + - pt.name + ":" + yval + ""; + pt.name + ": " + yval + ""; } return html; }; @@ -242,7 +262,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { * @param oneEmWidth The width in pixels of 1em in the legend. * @private */ -var generateLegendDashHTML = function(strokePattern, color, oneEmWidth) { +generateLegendDashHTML = function(strokePattern, color, oneEmWidth) { // IE 7,8 fail at these divs, so they get boring legend, have not tested 9. var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); if (isIE) return "—";