X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=c88727a8f1b0b1225099293462125bc89c161eea;hb=6f5f0b2b3e71c12920220e9d323cb19c48b2a052;hp=9e4650eb481c969ef0fe72fb16428f79873c7221;hpb=c12450f169e3d58875caf967f87c0f9d9d314dba;p=dygraphs.git diff --git a/plugins/legend.js b/plugins/legend.js index 9e4650e..c88727a 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 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,7 +72,7 @@ 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", @@ -75,7 +88,7 @@ legend.prototype.activate = function(g, r) { try { div.style[name] = messagestyle[name]; } catch (e) { - this.warn("You are using unsupported css properties for your " + + console.warn("You are using unsupported css properties for your " + "browser in labelsDivStyles"); } } @@ -86,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. @@ -105,28 +120,30 @@ var calculateEmWidthInDiv = function(div) { return oneEmWidth; }; -legend.select = function(e) { +var escapeHTML = function(str) { + return str.replace(/&/g, "&").replace(/"/g, """).replace(//g, ">"); +}; + +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 = legend.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_); - var html = generateLegendHTML(e.dygraph, undefined, undefined, oneEmWidth); + this.one_em_width_ = oneEmWidth; + + var html = legend.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 +154,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"; }; /** @@ -167,14 +187,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) { +legend.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') { @@ -192,7 +212,7 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) { strokePattern = g.getOption("strokePattern", labels[i]); dash = generateLegendDashHTML(strokePattern, series.color, oneEmWidth); html += "" + - dash + " " + labels[i] + ""; + dash + " " + escapeHTML(labels[i]) + ""; } return html; } @@ -200,7 +220,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(); @@ -226,7 +249,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 + ""; + escapeHTML(pt.name) + ": " + yval + ""; } return html; }; @@ -243,7 +266,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 "—";