diff options
| -rw-r--r-- | index.js | 17 | ||||
| -rw-r--r-- | package.json | 5 | ||||
| -rw-r--r-- | public/graph.js | 53 | ||||
| -rw-r--r-- | views/index.html | 12 |
4 files changed, 85 insertions, 2 deletions
@@ -1,5 +1,12 @@ var statuscake = require("statuscake"); - +var express = require("express"); +var ejs = require("ejs"); + +var app = express(); +app.set("views", __dirname + "/views"); +app.engine("html", ejs.renderFile); +app.use(express.static("public")); + var args = process.argv.slice(2); if (args.length != 2) { console.log("Please provide user and key as positional arguments."); @@ -13,6 +20,14 @@ statuscake .username(username) .key(password); +app.get("/", function(req, res) { + res.render("index.html"); +}); + +app.listen(3000, function() { + console.log("radiodiodi status display listening on port 3000."); +}); + function allTests(err, data) { console.log(data); } diff --git a/package.json b/package.json index 1220593..b87e71d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ }, "homepage": "https://github.com/jantuomi/radiodiodi-status-display#readme", "dependencies": { - "statuscake": "" + "statuscake": "0.1.3", + "d3": "4.2.1", + "express": "4.14.0", + "ejs": "2.5.1" } } diff --git a/public/graph.js b/public/graph.js new file mode 100644 index 0000000..11ed599 --- /dev/null +++ b/public/graph.js @@ -0,0 +1,53 @@ +var n = 40, + random = d3.randomNormal(0, .2), + data = d3.range(n).map(random); +var svg = d3.select("svg"), + margin = {top: 20, right: 20, bottom: 20, left: 40}, + 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 x = d3.scaleLinear() + .domain([0, n - 1]) + .range([0, width]); +var y = d3.scaleLinear() + .domain([-1, 1]) + .range([height, 0]); +var line = d3.line() + .x(function(d, i) { return x(i); }) + .y(function(d, i) { return y(d); }); +g.append("defs").append("clipPath") + .attr("id", "clip") + .append("rect") + .attr("width", width) + .attr("height", height); +g.append("g") + .attr("class", "axis axis--x") + .attr("transform", "translate(0," + y(0) + ")") + .call(d3.axisBottom(x)); +g.append("g") + .attr("class", "axis axis--y") + .call(d3.axisLeft(y)); +g.append("g") + .attr("clip-path", "url(#clip)") + .append("path") + .datum(data) + .attr("class", "line") + .transition() + .duration(500) + .ease(d3.easeLinear) + .on("start", tick); +function tick() { + // Push a new data point onto the back. + data.push(random()); + // Redraw the line. + d3.select(this) + .attr("d", line) + .attr("transform", null); + // Slide it to the left. + d3.active(this) + .attr("transform", "translate(" + x(-1) + ",0)") + .transition() + .on("start", tick); + // Pop the old data point off the front. + data.shift(); +} diff --git a/views/index.html b/views/index.html new file mode 100644 index 0000000..3583d02 --- /dev/null +++ b/views/index.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +.line { + fill: none; + stroke: #000; + stroke-width: 1.5px; +} +</style> +<svg width="960" height="500"></svg> +<script src="//d3js.org/d3.v4.min.js"></script> +<script src="graph.js"></script> |