Last active
April 24, 2018 14:51
-
-
Save pgiraud/3ca9169d2067400ad11f4004a63bc9bc to your computer and use it in GitHub Desktop.
temBoard monitoring with alerts - tests D3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| ["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] | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| ["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