X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=3349969b843b9b8430ba00eb200e6e1e99074e8e;hb=d6eb5c59dcbc22c942a266b57e95d3111db6fcae;hp=bfc0595d43be283dc305d9e8be9d2caecf087297;hpb=e2c21500ff552f97a80ed02e027df86aecac3c75;p=dygraphs.git diff --git a/plugins/legend.js b/plugins/legend.js index bfc0595..3349969 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"}; @@ -74,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 " + + Dygraph.warn("You are using unsupported css properties for your " + "browser in labelsDivStyles"); } } @@ -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,59 @@ 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_); + if (e.dygraph.getOption("legendFollow")) { + // create floating legend div + var area = e.dygraph.plotter_.area; + var labelsDivWidth = e.dygraph.getOption("labelsDivWidth"); + var yAxisLabelWidth = e.dygraph.getOption("yAxisLabelWidth"); + // determine floating [left, top] coordinates of the legend div + // within the plotter_ area + // offset 20 px to the left and down from the first selection point + // 20 px is guess based on mouse cursor size + var leftLegend = points[0].x * area.w + 20; + var topLegend = points[0].y * area.h - 20; + + // if legend floats to end of the plotting area, it flips to the other + // side of the selection point + if ((leftLegend + labelsDivWidth + 1) > (window.scrollX + window.innerWidth)) { + leftLegend = leftLegend - 2 * 20 - labelsDivWidth - (yAxisLabelWidth - area.x); + } + + e.dygraph.graphDiv.appendChild(this.legend_div_); + this.legend_div_.style.left = yAxisLabelWidth + leftLegend + "px"; + this.legend_div_.style.top = topLegend + "px"; + } - 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) { + + if(e.dygraph.getOption("legendFollow")) { + // return legend to the default non-floating position + this.predraw(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 +183,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 +216,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') { @@ -191,7 +241,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; } @@ -199,7 +249,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 +278,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; }; @@ -242,7 +295,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 "—";