X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=f16e6323510dca89f2c3288bfcc9285cd0f3416e;hb=0a14b0f9fbe3e97e0163b4e6ad7893e49d3bf2ff;hp=09ed2a02dd0c211085fd5f177b8159f289b09c41;hpb=138f3643b8c7b24e2a771a81f193224f0de5bb97;p=dygraphs.git diff --git a/plugins/legend.js b/plugins/legend.js index 09ed2a0..f16e632 100644 --- a/plugins/legend.js +++ b/plugins/legend.js @@ -1,5 +1,10 @@ -Dygraph.Plugins.Legend = (function() { +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +Dygraph.Plugins.Legend = (function() { /* Current bits of jankiness: @@ -8,7 +13,6 @@ 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)"? */ @@ -38,8 +42,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'); @@ -86,13 +93,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. @@ -105,27 +114,25 @@ 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 @@ -137,14 +144,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"; }; /** @@ -200,7 +210,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();