-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
105 lines (85 loc) · 2.48 KB
/
index.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<title>Pagerduty alerts</title>
<style>
* {
font-family: sans-serif;
}
table, tr, td {
padding: 0;
}
#chart table tr.header th:first-child span {
display: none;
}
#chart table tr td {
display: block;
height: 30px;
width: 30px;
}
#chart table tr td span {
display: none;
text-align: center;
color: #fff;
}
#chart table tr td:hover span {
display: block;
}
</style>
</head>
<h1>Pagerduty alerts</h1>
<p>
This heatmap shows the frequency of Pagerduty alerts binned by hour<span id="from-to"></span>.
</p>
<div id="chart"></div>
<p>
Generated using <a href="https://github.com/whilp/pdalerts">this stuff</a>.
</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var days = [],
day_names = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
for (var i=0; i<7; i++) {
days[i] = [];
for (var j=0; j<24; j++) {
days[i][j] = 0;
};
};
var format = d3.format(".1f"),
datefmt = d3.time.format("%Y-%m-%d"),
color = d3.scale.log()
.domain([0.02, 10])
.range(["#ddd", "#333"]),
table = d3.select("#chart").append("table"),
header = table.append("tr").attr("class", "header")
.selectAll("th").data(d3.range(-1, 24)).enter()
.append("th").append("span").text(function (d) { return "" + d; });
d3.csv("data.csv", function (data) {
var span,
timezone,
extent = [];
data.forEach(function (row) {
if (extent.length == 0) extent[0] = row.timestamp;
extent[1] = row.timestamp;
// assume the data's all in the same zone
timezone = row.timezone;
var day_of_week = parseInt(row.day_of_week),
hour = parseInt(row.hour);
days[day_of_week][hour] += 1;
});
span = (extent[1] - extent[0])/86400;
var from = datefmt(new Date(1000 * extent[0])),
to = datefmt(new Date(1000 * extent[1]));
d3.select("#from-to").text(" from " + from + " to " + to + " (" + timezone + ")");
table.selectAll("tr.data").data(days).enter().append("tr").attr("class", "data");
table.selectAll("tr.data").each(function (d, i) {
var row = d3.select(this);
row.insert("th").append("span").text(day_names[i]);
row.selectAll("td")
.data(d).enter().append("td")
.datum(function (d) { return d/span; })
.attr("style", function (d) { return "background: " + color(d) + ";"})
.append("span").text(format);
});
});
</script>
</html>