X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=5b4a867590cf85752defc827fc5d56568d444a96;hb=42a9ebb8f492d2541a3904894447a7c74ba4cfd5;hp=09ed2a02dd0c211085fd5f177b8159f289b09c41;hpb=63e957d7e7e314fdd8787725c5e841dfcbadc8c3;p=dygraphs.git

diff --git a/plugins/legend.js b/plugins/legend.js
index 09ed2a0..5b4a867 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,10 +13,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 +36,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 +47,11 @@ legend.prototype.toString = function() {
  * - Reading your own options
  * - DOM manipulation
  * - Registering event listeners
+ *
+ * @param {Dygraph} g Graph instance.
+ * @return {object.<string, function(ev)>} 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 +98,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,28 +119,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.
@@ -137,14 +149,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 +215,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();