Merge pull request #9 from Cryptkeeper/big-graph

Big graph

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 .idea/
 production/
 database.sql
+database.sql-journal

app.js

@@ -10,6 +10,9 @@ var config = require('./config.json');
 var networkHistory = [];
 var connectedClients = 0;
 
+var graphData = [];
+var lastGraphPush = [];
+
 function pingAll() {
 	var servers = config.servers;
 
@@ -79,6 +82,30 @@ function pingAll() {
 				if (config.logToDatabase) {
 					db.log(network.ip, util.getCurrentTimeMs(), res ? res.players.online : 0);
 				}
+
+				// Push it to our graphs.
+				var timeMs = util.getCurrentTimeMs();
+
+				// The same mechanic from trimUselessPings is seen here.
+				// If we dropped the ping, then to avoid destroying the graph, ignore it.
+				// However if it's been too long since the last successful ping, we'll send it anyways.
+				if (!lastGraphPush[network.ip] || (timeMs - lastGraphPush[network.ip] >= 60 * 1000 && res) || timeMs - lastGraphPush[network.ip] >= 70 * 1000) {
+					lastGraphPush[network.ip] = timeMs;
+
+					// Don't have too much data!
+					if (graphData[network.ip].length >= 24 * 60) {
+						graphData[network.ip].shift();
+					}
+
+					graphData[network.ip].push([timeMs, res ? res.players.online : 0]);
+
+					// Send the update.
+					server.io.sockets.emit('updateHistoryGraph', {
+						ip: network.ip,
+						players: (res ? res.players.online : 0),
+						timestamp: timeMs
+					});
+				}
 			});
 		})(servers[i]);
 	}
@@ -95,13 +122,7 @@ function startMainLoop() {
 	}, config.rates.upateMojangStatus);
 }
 
-if (config.logToDatabase) {
+function startServices() {
-	// Setup our database.
-	db.setup();
-} else {
-	logger.warn('Database logging is not enabled. You can enable it by setting "logToDatabase" to true in config.json. This requires sqlite3 to be installed.');
-}
-
 	server.start(function() {
 		// Track how many people are currently connected.
 		server.io.on('connect', function(client) {
@@ -133,12 +154,39 @@ server.start(function() {
 			}, 1);
 
 			// Attach our listeners.
-		client.on('disconnect', function(client) {
+			client.on('disconnect', function() {
 				connectedClients -= 1;
 
 				logger.log('info', 'Client disconnected, total clients: %d', connectedClients);
 			});
+
+			client.on('requestHistoryGraph', function() {
+				// Send them the big 24h graph.
+				client.emit('historyGraph', graphData);
+			});
 		});
 
 		startMainLoop();
 	});
+}
+
+logger.log('info', 'Booting, please wait...');
+
+if (config.logToDatabase) {
+	// Setup our database.
+	db.setup();
+
+	var timestamp = util.getCurrentTimeMs();
+
+	db.queryPings(24 * 60 * 60 * 1000, function(data) {
+		graphData = util.convertPingsToGraph(data);
+
+		logger.log('info', 'Queried and parsed ping history in %sms', util.getCurrentTimeMs() - timestamp);
+
+		startServices();
+	});
+} else {
+	logger.warn('Database logging is not enabled. You can enable it by setting "logToDatabase" to true in config.json. This requires sqlite3 to be installed.');
+
+	startServices();
+}

assets/css/main.css

@@ -177,3 +177,47 @@ h3 {
     height: 42px;
     width: 42px;
 }
+
+/* The big graph */
+#big-graph, #big-graph-controls, #big-graph-checkboxes {
+    width: 1000px;
+    margin: 15px auto 0 auto;
+}
+
+#big-graph-checkboxes > table {
+    width: 100%;
+}
+
+#big-graph-controls {
+    margin: 10px auto;
+}
+
+#big-graph-controls a {
+    text-decoration: none;
+    color: inherit;
+    text-transform: uppercase;
+    border-bottom: 1px dashed #FFF;
+    font-size: 16px;
+}
+
+#big-graph-controls a:hover {
+    border-bottom: 1px dashed transparent;
+    cursor: pointer;
+}
+
+/* Basic elements */
+.button {
+    background: #3498db;
+    border-radius: 2px;
+    text-shadow: 0 0 0 #000;
+    width: 85px;
+    font-size: 16px;
+    padding: 5px 10px;
+    margin: 0 auto;
+}
+
+.button:hover {
+    background: #ecf0f1;
+    color: #3498db;
+    cursor: pointer;
+}

assets/html/index.html

@@ -34,6 +34,33 @@
 
 		</div>
 
+		<div id="big-graph"></div>
+
+		<div id="big-graph-controls" style="display: none;">
+
+			<span style="text-align: center; display: block;">
+
+				<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
+
+			</span>
+			
+			<div id="big-graph-controls-drawer" style="display: none;">
+
+				<div id="big-graph-checkboxes"></div>
+
+				<br />
+
+				<span style="text-align: center; display: block; margin-bottom: 15px;">
+
+					<span onclick="setAllGraphVisibility(true);" class="button">Show All</span>
+					<span onclick="setAllGraphVisibility(false);" class="button">Hide All</span>
+
+				</span>
+
+			</div>
+
+		</div>
+
         <div id="server-container" class="container"></div>
 
         <div id="quick-jump-container"></div>

assets/js/site.js

@@ -30,12 +30,46 @@ var smallChartOptions = {
     ]
 };
 
+var bigChartOptions = {
+    series: {
+        shadowSize: 0
+    },
+    xaxis: {
+        font: {
+            color: "#E3E3E3"
+        },
+        show: false
+    },
+    yaxis: {
+        show: true,
+        tickSize: 2000,
+        tickLength: 10,
+        tickFormatter: function(value) {
+            return formatNumber(value);
+        },
+        font: {
+            color: "#E3E3E3"
+        },
+        labelWidth: -5
+    },
+    grid: {
+        hoverable: true,
+        color: "#696969"
+    },
+    legend: {
+        show: false
+    }
+};
+
 var lastMojangServiceUpdate;
 
 var graphs = {};
-var lastLatencyEntries = {};
 var lastPlayerEntries = {};
 
+var historyPlot;
+var displayedGraphData;
+var hiddenGraphData = [];
+
 // Generate (and set) the HTML that displays Mojang status.
 function updateMojangServices() {
     if (!lastMojangServiceUpdate) {
@@ -109,20 +143,7 @@ function updateServerStatus(lastEntry) {
             newStatus += playerDifference + ')</span>';
         }
 
-        /*if (lastLatencyEntries[info.name]) {
-            newStatus += '<br />';
-
-            var latencyDifference = lastLatencyEntries[info.name] - result.latency;
-
-            if (latencyDifference >= 0) {
-                newStatus += '+';
-            }
-
-            newStatus += latencyDifference + 'ms';
-        }*/
-
         lastPlayerEntries[info.name] = result.players.online;
-        lastLatencyEntries[info.name] = result.latency;
 
         div.html(newStatus);
     } else {
@@ -165,8 +186,39 @@ function sortServers() {
     }
 }
 
-function safeName(name) {
+function setAllGraphVisibility(visible) {
-    return name.replace(/ /g, '');
+    if (visible) {
+        var keys = Object.keys(hiddenGraphData);
+
+        for (var i = 0; i < keys.length; i++) {
+            displayedGraphData[keys[i]] = hiddenGraphData[keys[i]];
+        }
+
+        hiddenGraphData = [];
+    } else {
+        var keys = Object.keys(displayedGraphData);
+
+        for (var i = 0; i < keys.length; i++) {
+            hiddenGraphData[keys[i]] = displayedGraphData[keys[i]];
+        }
+
+        displayedGraphData = [];
+    }
+
+    $('.graph-control').each(function(index, item) {
+        item.checked = visible;
+    });
+
+    historyPlot.setData(convertGraphData(displayedGraphData));
+    historyPlot.setupGrid();
+
+    historyPlot.draw();
+}
+
+function toggleControlsDrawer() {
+    var div = $('#big-graph-controls-drawer');
+
+    div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
 }
 
 $(document).ready(function() {
@@ -181,6 +233,10 @@ $(document).ready(function() {
 
 	socket.on('connect', function() {
         $('#tagline-text').text('Loading...');
+
+        if (!isMobileBrowser()) {
+            socket.emit('requestHistoryGraph');
+        }
 	});
 
     socket.on('disconnect', function() {
@@ -196,11 +252,66 @@ $(document).ready(function() {
         $('#tagline-text').text('Disconnected! Refresh?');
 
         lastPlayerEntries = {};
-        lastLatencyEntries = {};
         graphs = {};
 
         $('#server-container').html('');
         $('#quick-jump-container').html('');
+
+        $('#big-graph').html('');
+        $('#big-graph-checkboxes').html('');
+        $('#big-graph-controls').css('display', 'none');
+    });
+
+    socket.on('historyGraph', function(rawData) {
+        displayedGraphData = rawData;
+
+        $('#big-graph').css('height', '500px');
+
+        historyPlot = $.plot('#big-graph', convertGraphData(rawData), bigChartOptions);
+
+        $('#big-graph').bind('plothover', handlePlotHover);
+
+        var keys = Object.keys(rawData);
+
+        var sinceBreak = 0;
+        var html = '<table><tr>';
+
+        keys.sort();
+
+        for (var i = 0; i < keys.length; i++) {
+            html += '<td><input type="checkbox" class="graph-control" id="graph-controls" data-target-network="' + keys[i] + '" checked=checked> ' + keys[i] + '</input></td>';
+
+            if (sinceBreak >= 3) {
+                sinceBreak = 0;
+
+                html += '</tr><tr>';
+            } else {
+                sinceBreak++;
+            }
+        }
+
+        $('#big-graph-checkboxes').append(html + '</tr></table>');
+        $('#big-graph-controls').css('display', 'block');
+    });
+
+    socket.on('updateHistoryGraph', function(rawData) {
+        var targetGraphData = displayedGraphData[rawData.ip];
+
+        // If it's not in our display group, push it to the hidden group instead so it can be restored and still be up to date.
+        if (!targetGraphData) {
+            targetGraphData = hiddenGraphData[rawData.ip];
+        }
+
+        if (targetGraphData.length > 24 * 60) {
+            targetGraphData.shift();
+        }
+
+        targetGraphData.push([rawData.timestamp, rawData.players]);
+
+        historyPlot.setData(convertGraphData(displayedGraphData));
+        historyPlot.setupGrid();
+
+        historyPlot.draw();
     });
 
 	socket.on('add', function(servers) {
@@ -223,10 +334,8 @@ $(document).ready(function() {
 
             if (lastEntry.error) {
                 lastPlayerEntries[info.name] = 0;
-                lastLatencyEntries[info.name] = 0;
             } else if (lastEntry.result) {
                 lastPlayerEntries[info.name] = lastEntry.result.players.online;
-                lastLatencyEntries[info.name] = lastEntry.result.latency;
             }
 
             $('<div/>', {
@@ -265,15 +374,7 @@ $(document).ready(function() {
 
             updateServerStatus(lastEntry);
 
-            $('#chart_' + safeName(info.name)).bind('plothover', function(event, pos, item) {
+            $('#chart_' + safeName(info.name)).bind('plothover', handlePlotHover);
-                if (item) {
-                    renderTooltip(item.pageX + 5, item.pageY + 5, getTimestamp(item.datapoint[0] / 1000) + '\
-                        <br />\
-                        ' + formatNumber(item.datapoint[1]) + ' Players');
-                } else {
-                    hideTooltip();
-                }
-            });
         }
 
         sortServers();
@@ -323,7 +424,7 @@ $(document).ready(function() {
 
     sortServersTask = setInterval(function() {
         sortServers();
-    }, 30 * 1000);
+    }, 10 * 1000);
 
     // Our super fancy scrolly thing!
     $(document).on('click', '.quick-jump-icon', function(e) {
@@ -334,4 +435,25 @@ $(document).ready(function() {
             scrollTop: target.offset().top
         }, 100);
     });
+
+    $(document).on('click', '.graph-control', function(e) {
+        var serverIp = $(this).attr('data-target-network');
+        var checked = $(this).attr('checked');
+
+        // Restore it, or delete it - either works.
+        if (!this.checked) {
+            hiddenGraphData[serverIp] = displayedGraphData[serverIp];
+
+            delete displayedGraphData[serverIp];
+        } else {
+            displayedGraphData[serverIp] = hiddenGraphData[serverIp];
+
+            delete hiddenGraphData[serverIp];
+        }
+
+        historyPlot.setData(convertGraphData(displayedGraphData));
+        historyPlot.setupGrid();
+
+        historyPlot.draw();
+    });
 });

assets/js/util.js

@@ -10,6 +10,10 @@ function getTimestamp(ms, timeOnly) {
     return date.toLocaleTimeString();
 }
 
+function safeName(name) {
+    return name.replace(/ /g, '');
+}
+
 function renderTooltip(x, y, html) {
 	tooltip.html(html).css({
 		top: y,
@@ -25,6 +29,58 @@ function formatNumber(x) {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 
+// From http://detectmobilebrowsers.com/
+function isMobileBrowser() {
+  var check = false;
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
+  return check;
+}
+
+function handlePlotHover(event, pos, item) {
+    if (item) {
+        var text = getTimestamp(item.datapoint[0] / 1000) + '\
+            <br />\
+            ' + formatNumber(item.datapoint[1]) + ' Players';
+
+        if (item.series && item.series.label) {
+            text = item.series.label + '<br />' + text;
+        }
+
+        renderTooltip(item.pageX + 5, item.pageY + 5, text);
+    } else {
+        hideTooltip();
+    }
+}
+
+function convertGraphData(rawData) {
+    var data = [];
+
+    var keys = Object.keys(rawData);
+
+    for (var i = 0; i < keys.length; i++) {
+        data.push({
+            data: rawData[keys[i]],
+            yaxis: 1,
+            label: keys[i],
+            color: stringToColor(keys[i])
+        });
+    }
+
+    return data;
+}
+
+function stringToColor(base) {
+    var hash;
+
+    for (var i = 0, hash = 0; i < base.length; i++) {
+        hash = base.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
+
+    return '#' + Array(6 - color.length + 1).join('0') + color;
+}
+
 function msToTime(timer) {
 	var milliseconds = timer % 1000;
 	timer = (timer - milliseconds) / 1000;

config.json

@@ -110,11 +110,6 @@
 			"ip": "play.gotpvp.com",
 			"type": "PC"
 		},
-		{
-			"name": "MCLegends",
-			"ip": "play.mc-legends.com",
-			"type": "PC"
-		},
 		{
 			"name": "Rewinside",
 			"ip": "mc.rewinside.tv",
@@ -190,8 +185,8 @@
 	"rates": {
 		"upateMojangStatus": 5000,
 		"mojangStatusTimeout": 3500,
-		"pingAll": 3000,
+		"pingAll": 2000,
-		"connectTimeout": 2500
+		"connectTimeout": 1500
 	},
-	"logToDatabase": false
+	"logToDatabase": true
 }

lib/database.js

@@ -1,3 +1,5 @@
+var util = require('./util');
+
 exports.setup = function() {
 	var sqlite = require('sqlite3');
 
@@ -10,6 +12,21 @@ exports.setup = function() {
 	exports.log = function(ip, timestamp, playerCount) {
 		var insertStatement = db.prepare('INSERT INTO pings (timestamp, ip, playerCount) VALUES (?, ?, ?)');
 
+		db.serialize(function() {
 			insertStatement.run(timestamp, ip, playerCount);
+		});
+
+		insertStatement.finalize();
+	};
+
+	exports.queryPings = function(duration, callback) {
+		var currentTime = util.getCurrentTimeMs();
+
+		db.all("SELECT * FROM pings WHERE timestamp >= ? AND timestamp <= ?", [
+			currentTime - duration,
+			currentTime
+		], function(err, data) {
+			callback(data);
+		});
 	};
 };

lib/util.js

@@ -1,3 +1,66 @@
+var config = require('../config.json');
+
+// Checks if we have a server in config.json with the IP.
+function serverWithIpExists(ip) {
+	for (var i = 0; i < config.servers.length; i++) {
+		var entry = config.servers[i];
+
+		if (entry.ip === ip) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+// This method is a monstrosity.
+// Since we loaded ALL pings from the database, we need to filter out the pings so each entry is a minute apart.
+// This is done by iterating over the list, since the time between each ping can be completely arbitrary.
+function trimUselessPings(data) {
+	var keys = Object.keys(data);
+
+	var keysToRemove = [];
+
+	for (var i = 0; i < keys.length; i++) {
+		// Don't bother we servers we deleted from config.json
+		if (!serverWithIpExists(keys[i])) {
+			keysToRemove.push(keys[i]);
+
+			continue;
+		}
+
+		var listing = data[keys[i]];
+		var lastTimestamp = 0;
+
+		var filteredListing = [];
+
+		for (var x = 0; x < listing.length; x++) {
+			var entry = listing[x];
+
+			// 0 is the index of the timestamp.
+			// See the convertPingsToGraph method.
+			if (entry[0] - lastTimestamp >= 60 * 1000) {
+				// This second check tries to smooth out randomly dropped pings.
+				// By default we only want entries that are online (playerCount > 0).
+				// This way we'll keep looking forward until we find one that is online.
+				// However if we can't find one within a reasonable timeframe, select the sucky one.
+				if (entry[0] - lastTimestamp >= 120 * 1000 || entry[1] > 0) {
+					filteredListing.push(entry);
+
+					lastTimestamp = entry[0];
+				}
+			}
+		}
+
+		data[keys[i]] = filteredListing;
+	}
+
+	// Delete data for any networks we don't care about anymore.
+	for (var i = 0; i < keysToRemove.length; i++) {
+		delete data[keysToRemove[i]];
+	}
+}
+
 exports.getCurrentTimeMs = function() {
     return new Date().getTime();
 };
@@ -9,3 +72,22 @@ exports.setIntervalNoDelay = function(func, delay) {
 
 	return task;
 };
+
+exports.convertPingsToGraph = function(sqlData) {
+	var graphData = {};
+
+	for (var i = 0; i < sqlData.length; i++) {
+		var entry = sqlData[i];
+
+		if (!graphData[entry.ip]) {
+			graphData[entry.ip] = [];
+		}
+
+		graphData[entry.ip].push([entry.timestamp, entry.playerCount]);
+	}
+
+	// Break it into minutes.
+	trimUselessPings(graphData);
+
+	return graphData;
+};