X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Flegend.js;h=b73e9394ee5edf1a6e43905d50c8864f23205cc7;hb=250bb62bb4614a3c1189c9b5b8b99e182a11db6e;hp=5f7ac7e9a04c8e30f99dce092043f1e54906b686;hpb=38ad22de8c992203819dfd12c85b373bbdf744c0;p=dygraphs.git
diff --git a/plugins/legend.js b/plugins/legend.js
index 5f7ac7e..b73e939 100644
--- a/plugins/legend.js
+++ b/plugins/legend.js
@@ -3,9 +3,9 @@
* 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:
@@ -17,6 +17,8 @@ Current bits of jankiness:
*/
+/*jshint globalstrict: true */
+/*global Dygraph:false */
"use strict";
@@ -35,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.
@@ -83,7 +88,7 @@ legend.prototype.activate = function(g) {
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");
}
}
@@ -94,13 +99,14 @@ legend.prototype.activate = function(g) {
}
this.legend_div_ = div;
+ 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,
- drawChart: this.drawChart
+ didDrawChart: this.didDrawChart
};
};
@@ -114,27 +120,59 @@ var calculateEmWidthInDiv = function(div) {
return oneEmWidth;
};
+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) > area.w) {
+ leftLegend = leftLegend - 2*20 - labelsDivWidth - (yAxisLabelWidth - area.x)
+ }
- var html = generateLegendHTML(e.dygraph, xValue, points, oneEmWidth);
+ 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, this.one_em_width_);
this.legend_div_.innerHTML = html;
};
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.prototype.drawChart = function(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.
@@ -152,8 +190,10 @@ legend.prototype.predraw = function(e) {
// 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";
};
/**
@@ -176,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') {
@@ -201,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;
}
@@ -210,8 +250,8 @@ var generateLegendHTML = function(g, x, sel_points, oneEmWidth) {
var xOptView = g.optionsViewForAxis_('x');
var xvf = xOptView('valueFormatter');
html = xvf(x, xOptView, labels[0], g);
- if(html !== '') {
- html += ':';
+ if (html !== '') {
+ html += ':';
}
var yOptViews = [];
@@ -238,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;
};
@@ -255,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 "—";