Add legend, fix tooltips on Firefox.
This commit is contained in:
Родитель
e0d85e2636
Коммит
d2fca2302d
|
@ -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;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче