1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Log view</title>
<link type="text/css" rel="stylesheet" href="#{cdn}hoogle.css" />
<link type="image/png" rel="icon" href="#{cdn}favicon.png" />
<script type="text/javascript" src="#{jquery}"> </script>
<script type="text/javascript" src="plugin/jquery.flot.js"> </script>
<script type="text/javascript" src="plugin/jquery.flot.time.js"> </script>
<style type="text/css">
.plot {width: 90%; max-width: 600px; height: 200px;}
</style>
<script type="text/javascript">
var data = #{data};
function series(name, val)
{
val.label = name;
val.data = [];
for (var i = 0; i < data.length; i++)
{
var x = data[i][name.toLowerCase()];
val.data.push([new Date(data[i].date),x == 0 ? null : x]);
}
return val;
}
$(function(){
var settings =
{series: {lines: {show: true}, points: {show: true}}
,xaxis: {mode: "time", minTickSize: [1, "day"]}
,yaxes: [{}, {position: "right"}]
,grid: {hoverable: true, clickable: true}};
$.plot("#users",[series("Uses",{yaxis:2}),series("Users",{})], settings);
$.plot("#timings",[series("Average",{}),series("Slowest",{yaxis:2})], settings);
settings.series.lines.show = false;
$.plot("#errors",[series("Errors",{color:"darkred"})], settings);
$(".plot").bind("plothover", function (event, pos, item) {
if (item) {
var x = new Date(item.datapoint[0]).toDateString();
var y = item.datapoint[1];
y = Math.floor(y) == y ? y : y.toFixed(3);
$("#tooltip").html(y + " = " + item.series.label + " on " + x)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
</script>
</head>
<body>
</head>
<body style="height:100%;width:100%;">
<h2>Hoogle Log</h2>
<b>Users</b><div id="users" class="plot"></div><br/>
<b>Timings</b><div id="timings" class="plot"></div><br/>
<b>Errors</b><div id="errors" class="plot"></div><br/>
<div id="tooltip" style="position:absolute;display:none;border-radius:4px;border:1px solid gray;padding:3px;background-color:#fea;box-shadow: 4px 3px 8px -1px rgba(0,0,0,0.38);"></div>
</body>
</html>
|
