-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:
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";
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.
* - 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');
"zIndex": 10,
"width": divWidth + "px",
"top": "0px",
- "right": "2px",
+ "left": (g.size().width - divWidth - 2) + "px",
"background": "white",
+ "lineHeight": "normal",
"textAlign": "left",
"overflow": "hidden"};
}
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.
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.
* - 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";
};
/**
// 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();