Add legend, fix tooltips on Firefox.

This commit is contained in:
AreWeFastYet 2012-11-29 08:49:16 +00:00
Родитель e0d85e2636
Коммит d2fca2302d
4 изменённых файлов: 42 добавлений и 2 удалений

Просмотреть файл

@ -5,6 +5,7 @@ var AWFY = { };
AWFY.refreshTime = 1000 * 60 * 5; AWFY.refreshTime = 1000 * 60 * 5;
AWFY.machineId = 0; AWFY.machineId = 0;
AWFY.refresh = true; AWFY.refresh = true;
AWFY.hasLegend = false;
AWFY.panes = []; AWFY.panes = [];
AWFY.queryParams = { }; AWFY.queryParams = { };
AWFY.drawLegend = function () { AWFY.drawLegend = function () {
@ -70,6 +71,12 @@ AWFY.compute = function (xhr) {
display.draw(); display.draw();
} }
// Draw the legend if needed.
if (!this.hasLegend) {
Display.drawLegend();
this.hasLegend = true;
}
if (this.refresh) if (this.refresh)
window.setTimeout(this.query.bind(this), this.refreshTime); window.setTimeout(this.query.bind(this), this.refreshTime);
} }

Просмотреть файл

@ -366,3 +366,16 @@ Display.prototype.onHover = function (event, pos, item) {
this.hovering.drawBasic(); this.hovering.drawBasic();
} }
Display.drawLegend = function ()
{
var legend = $("#legend");
for (var modename in AWFYMaster.modes) {
var mode = AWFYMaster.modes[modename];
var vendor = AWFYMaster.vendors[mode.vendor_id];
var item = $('<li style="border-color:' + mode.color + '"></li>');
item.text(vendor.browser + ' (' + mode.name + ')');
item.appendTo(legend);
}
}

Просмотреть файл

@ -31,6 +31,7 @@ h1 {
.tooltip { .tooltip {
-moz-border-radius:.35em; -moz-border-radius:.35em;
-webkit-border-radius:.35em; -webkit-border-radius:.35em;
border-radius: .35em;
background-color:#000; background-color:#000;
color:#FFF; color:#FFF;
display:none; display:none;
@ -63,3 +64,20 @@ h1 {
display: inline-block; display: inline-block;
} }
#legend {
text-align: left;
padding-top: 360px;
margin-left: -20px;
display: inline;
position: absolute;
left: 0;
list-style-type: none;
}
#legend li {
border-left: 1.2em solid #FFF;
margin-right: 2em;
padding-left: .3em;
margin-bottom: .2em;
font-size: 1.2em;
}

Просмотреть файл

@ -86,7 +86,8 @@ ToolTip.prototype.attachLine = function (color) {
// Now overlay a line from the point to the tooltip, ya. // Now overlay a line from the point to the tooltip, ya.
var ns = "http://www.w3.org/2000/svg"; var ns = "http://www.w3.org/2000/svg";
var svg = $(document.createElementNS(ns, 'svg')); var svgElt = document.createElementNS(ns, 'svg');
var svg = $(svgElt);
svg.css({ position: 'absolute', svg.css({ position: 'absolute',
left: 0, left: 0,
top: 0, top: 0,
@ -102,7 +103,8 @@ ToolTip.prototype.attachLine = function (color) {
line.setAttribute('stroke-width', 2); line.setAttribute('stroke-width', 2);
$(line).appendTo(svg); $(line).appendTo(svg);
svg.height($('window').height()); svgElt.setAttribute('width', '100%');
svgElt.setAttribute('height', '100%');
svg.appendTo('body'); svg.appendTo('body');
this.svg = svg; this.svg = svg;
this.line = line; this.line = line;