From d3d9b6861dc5c6871ad138ab9f428bcdb1d61398 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Sun, 14 Aug 2016 13:16:10 +0300 Subject: Add placeholder view and visuals, add express and d3 --- index.js | 17 ++++++++++++++++- package.json | 5 ++++- public/graph.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ views/index.html | 12 ++++++++++++ 4 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 public/graph.js create mode 100644 views/index.html diff --git a/index.js b/index.js index db229d3..18efac7 100644 --- a/index.js +++ b/index.js @@ -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 @@ + + + + + + -- cgit v1.3