Skip to content

Instantly share code, notes, and snippets.

@pgiraud

pgiraud/.editorconfig

Last active April 24, 2018 14:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pgiraud/3ca9169d2067400ad11f4004a63bc9bc to your computer and use it in GitHub Desktop.
Save pgiraud/3ca9169d2067400ad11f4004a63bc9bc to your computer and use it in GitHub Desktop.
Download ZIP
temBoard monitoring with alerts - tests D3
Raw
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
# Unix-style newlines
end_of_line = lf
# Remove any whitespace characters preceding newline characters
trim_trailing_whitespace = true
# Newline ending every file
insert_final_newline = true
# 2 space indentation for UI
[*.{css,html,js,json,scss,yml,sql}]
indent_size = 2
[Makefile]
indent_size = 8
indent_style = tab
Raw
alerts.json
[
["2018-04-20 07:56:14+00", "WARNING", null, 3.68, 2, 4],
["2018-04-20 07:53:12+00", "CRITICAL", null, 4.66, 2, 4],
["2018-04-20 07:49:09+00", "WARNING", null, 2.04, 2, 4],
["2018-04-20 07:44:05+00", "OK", null, 1.5, 2, 4],
["2018-04-20 07:40:02+00", "WARNING", null, 3.86, 2, 4],
["2018-04-20 07:39:02+00", "CRITICAL", null, 5.79, 2, 4],
["2018-04-20 07:38:01+00", "WARNING", null, 2.45, 2, 4],
["2018-04-20 07:34:58+00", "OK", null, 1.29, 2, 4],
["2018-04-20 07:32:57+00", "WARNING", null, 1.9, 2, 4],
["2018-04-20 07:29:55+00", "OK", null, 1.32, 2, 4],
["2018-04-20 07:27:53+00", "WARNING", null, 2.35, 2, 4],
["2018-04-20 07:17:46+00", "OK", null, 1.81, 2, 4],
["2018-04-20 07:16:46+00", "WARNING", null, 2.05, 2, 4],
["2018-04-20 07:00:34+00", "OK", null, 1.24, 2, 4]
]
Raw
data.csv
date load1 load5 load15
2018-04-20 06:56:31+00 2.55 1.77 1.57
2018-04-20 06:57:32+00 1.4 1.58 1.51
2018-04-20 06:58:33+00 1.15 1.51 1.5
2018-04-20 06:59:34+00 0.89 1.38 1.45
2018-04-20 07:00:34+00 1.24 1.36 1.44
2018-04-20 07:01:35+00 1.22 1.36 1.44
2018-04-20 07:02:36+00 1.64 1.44 1.46
2018-04-20 07:03:36+00 1.2 1.36 1.43
2018-04-20 07:04:37+00 1.4 1.37 1.43
2018-04-20 07:05:38+00 1.05 1.29 1.4
2018-04-20 07:06:38+00 0.85 1.17 1.35
2018-04-20 07:07:39+00 0.93 1.15 1.33
2018-04-20 07:08:40+00 1.17 1.2 1.34
2018-04-20 07:09:41+00 0.77 1.07 1.28
2018-04-20 07:10:41+00 1.39 1.17 1.3
2018-04-20 07:11:42+00 1.14 1.14 1.28
2018-04-20 07:12:43+00 1.37 1.2 1.29
2018-04-20 07:13:43+00 1.02 1.13 1.26
2018-04-20 07:14:44+00 0.75 1.02 1.21
2018-04-20 07:15:45+00 0.48 0.89 1.15
2018-04-20 07:16:46+00 2.05 1.2 1.24
2018-04-20 07:17:46+00 1.81 1.35 1.29
2018-04-20 07:18:47+00 1.45 1.33 1.28
2018-04-20 07:19:48+00 0.64 1.12 1.21
2018-04-20 07:20:49+00 0.7 1.04 1.18
2018-04-20 07:21:49+00 1.39 1.22 1.23
2018-04-20 07:22:50+00 0.81 1.08 1.18
2018-04-20 07:23:51+00 0.72 1 1.15
2018-04-20 07:24:51+00 0.33 0.83 1.08
2018-04-20 07:25:53+00 0.34 0.73 1.02
2018-04-20 07:26:53+00 1.1 0.9 1.06
2018-04-20 07:27:53+00 2.35 1.25 1.17
2018-04-20 07:28:54+00 2.48 1.47 1.25
2018-04-20 07:29:55+00 1.32 1.32 1.21
2018-04-20 07:30:55+00 0.78 1.18 1.17
2018-04-20 07:31:56+00 1.55 1.31 1.21
2018-04-20 07:32:57+00 1.9 1.43 1.26
2018-04-20 07:33:58+00 2.38 1.7 1.37
2018-04-20 07:34:58+00 1.29 1.53 1.33
2018-04-20 07:35:59+00 0.55 1.27 1.25
2018-04-20 07:37:00+00 0.55 1.15 1.21
2018-04-20 07:38:01+00 2.45 1.49 1.32
2018-04-20 07:39:01+00 5.79 2.62 1.72
2018-04-20 07:40:02+00 3.86 2.72 1.82
2018-04-20 07:41:03+00 2.17 2.42 1.77
2018-04-20 07:42:04+00 2.59 2.48 1.83
2018-04-20 07:43:04+00 2.28 2.45 1.86
2018-04-20 07:44:05+00 1.5 2.21 1.82
2018-04-20 07:45:05+00 0.76 1.87 1.72
2018-04-20 07:46:07+00 0.56 1.58 1.63
2018-04-20 07:47:07+00 0.35 1.33 1.54
2018-04-20 07:48:08+00 0.44 1.17 1.47
2018-04-20 07:49:09+00 2.04 1.44 1.54
2018-04-20 07:50:10+00 1.83 1.54 1.57
2018-04-20 07:51:10+00 2.12 1.65 1.61
2018-04-20 07:52:11+00 2.63 1.89 1.69
2018-04-20 07:53:12+00 4.66 2.58 1.95
2018-04-20 07:54:13+00 4.52 2.87 2.08
2018-04-20 07:55:13+00 4.84 3.27 2.27
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"></link>
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
svg {
border: 1px solid #dfdfdf;
}
</style>
</head>
<body>
<svg width="960" height="250"></svg>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
colors = d3.scaleOrdinal(d3.schemeCategory10),
orange = d3.color('orange'),
red = d3.color('red'),
thresholdsColors = d3.scaleOrdinal([orange, red]);
orange.opacity = 0.5;
red.opacity = 0.5
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var step = d3.line()
.curve(d3.curveStepAfter)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var thresholdsPromise = d3.json('threshold.json');
var alertsPromise = d3.json('alerts.json');
d3.csv("data.csv", function(d, _, columns) {
// convert "date" to Date
d.date = new Date(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}).then(function(data) {
var series = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {
date: d.date,
value: d[id]
}
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
0,
d3.max(series, function(c) {
return d3.max(c.values, function(d) { return d.value; });
})
]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000");
var serie = g.selectAll('.serie')
.data(series)
.enter().append('g')
.attr('class', 'serie');
serie.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style('stroke', function(d) { return colors(d.id); });
thresholdsPromise.then(function(data) {
var thresholds = ['warning', 'critical'].map(function(id, index) {
return {
id: id,
values: data.map(function(d) {
return {
date: new Date(d[0]),
value: d[index + 1] // omit date
}
})
};
});
var threshold = g.selectAll('.threshold')
.data(thresholds)
.enter().append('g')
.attr('class', 'threshold');
threshold.append('path')
.attr('class', 'line')
.attr('d', function(d) { return step(d.values); })
.style('stroke', function(d) { return thresholdsColors(d.id); });
});
alertsPromise.then(function(data) {
data.forEach(function(alert) {
alert = {
date: new Date(alert[0]),
level: alert[1]
}
addAlertAnnotation(alert, g, height, x);
});
});
});
function addAlertAnnotation(alert, svg, chartHeight, x) {
var radius = 5;
var xPos = x(alert.date) - radius;
if (!xPos) {
return;
}
var yPosStart = 0;
var yPosEnd = chartHeight;
var markerG = svg.append('g')
.attr('class', 'alert alert-' + alert.level.toLowerCase())
.attr('transform', 'translate(' + xPos + ', ' + yPosStart + ')');
markerG.append('path')
.attr('d', 'M0,' + yPosStart + 'L0,' + yPosEnd);
}
Raw
style.css
svg g.threshold .line,
svg g.serie .line {
stroke-width: 1px;
}
g.alert path {
stroke-dasharray: 5,5;
}
g.alert.alert-ok path {
stroke: green;
}
g.alert.alert-warning path {
stroke: orange;
}
g.alert.alert-critical path {
stroke: red;
}
Raw
threshold.json
[
["2018-04-20 06:56:31+00", 2.5, 5],
["2018-04-20 07:04:37+00", 2, 5],
["2018-04-20 07:13:43+00", 2, 4],
["2018-04-20 07:55:13+00", 2, 4]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment