add 24hr peak

app.js

@@ -21,6 +21,7 @@ var networkVersions = [];
 var graphData = [];
 var highestPlayerCount = {};
 var lastGraphPush = [];
+var graphPeaks = [];
 
 function pingAll() {
 	for (var i = 0; i < servers.length; i++) {
@@ -177,6 +178,38 @@ function handlePing(network, res, err, attemptedVersion) {
 				timestamp: timeMs
 			});
 		}
+
+		// Update calculated graph peak regardless if the graph is being updated
+		// This can cause a (harmless) desync between live and stored data, but it allows it to be more accurate for long surviving processes
+		var networkData = graphData[network.name];
+
+		if (networkData) {
+			var graphPeakIndex = -1;
+			var graphPeakPlayerCount = 0;
+			for (var i = 0; i < networkData.length; i++) {
+				// [1] refers to the online player count
+				var point = networkData[i][1];
+				if (point > 0 && (graphPeakIndex === -1 || point > graphPeakPlayerCount)) {
+					graphPeakIndex = i;
+					graphPeakPlayerCount = point;
+				}
+			}
+			// Test if a highest index has been selected and has changed from any previous selections
+			var previousPeak = graphPeaks[network.name];
+			// [1] refers to the online player count
+			if (graphPeakIndex !== -1 && (!previousPeak || previousPeak[1] !== graphPeakPlayerCount)) {
+				var graphPeakData = networkData[graphPeakIndex];
+				graphPeaks[network.name] = graphPeakData;
+
+				// Broadcast update event to clients
+				server.io.sockets.emit('updatePeak', {
+					ip: network.ip,
+					name: network.name,
+					players: graphPeakData[1],
+					timestamp: graphPeakData[0]
+				});
+			}
+		}
 	}
 }
 
@@ -216,6 +249,11 @@ function startServices() {
 			if (config.logToDatabase) {
 				// Send them the big 24h graph.
 				client.emit('historyGraph', graphData);
+
+				// Send current peaks, if any
+				if (graphPeaks.length > 0) {
+					client.emit('peaks', graphPeaks);
+				}
 			}
 		});
 
@@ -274,9 +312,28 @@ if (config.logToDatabase) {
 		logger.log('info', 'Queried and parsed ping history in %sms', util.getCurrentTimeMs() - timestamp);
 
 		for (var i = 0; i < servers.length; i++) {
+			// Compute graph peak from historical data
+			var networkData = graphData[servers[i].name];
+			if (networkData) {
+				var graphPeakIndex = -1;
+				var graphPeakPlayerCount = 0;
+				for (var i = 0; i < networkData.length; i++) {
+					// [1] refers to the online player count
+					var point = networkData[i][1];
+					if (point > 0 && (graphPeakIndex === -1 || point > graphPeakPlayerCount)) {
+						graphPeakIndex = i;
+						graphPeakPlayerCount = point;
+					}
+				}
+				if (graphPeakIndex !== -1) {
+					graphPeaks[servers[i].name] = networkData[graphPeakIndex];
+					logger.log('info', 'Selected graph peak %d (%s)', networkData[graphPeakIndex][1], servers[i].name);
+				}
+			}
+
 			(function(server) {
 				db.getTotalRecord(server.ip, function(record) {
-					logger.log('info', 'Completed query for %s', server.ip);
+					logger.log('info', 'Computed total record %s (%d)', server.ip, record);
 
 					highestPlayerCount[server.ip] = record;
 

assets/css/main.css

@@ -116,7 +116,7 @@ strong {
 .server {
     padding: 5px 10px;
     margin: 0 5px;
-    width: 738px;
+    width: 800px;
     border: 1px solid transparent;
     display: inline-block;
 }

assets/js/site.js

@@ -262,6 +262,15 @@ function printPort(port) {
   }
 }
 
+function updateServerPeak(name, time, playerCount) {
+	var safeNameCopy = safeName(name);
+	// hack: strip the AM/PM suffix, this could just use a date format instead
+	var timestamp = getTimestamp(time / 1000).split(':');
+	var end = timestamp.pop().split(' ')[1];
+	timestamp = timestamp.join(':') + ' ' + end;
+	$('#peak_' + safeNameCopy).html('24h Peak: ' + formatNumber(playerCount) + ' @ ' + timestamp);
+}
+
 $(document).ready(function() {
 	var socket = io.connect({
         reconnect: true,
@@ -418,11 +427,12 @@ $(document).ready(function() {
                             <br />\
                             <p class="text-center-align rank" id="ranking_' + safeNameCopy + '"></p>\
                         </div>\
-                        <div class="column" style="width: 220px;">\
+                        <div class="column" style="width: 282px;">\
                             <h3>' + info.name + '&nbsp;' + typeString + '</h3>\
                             <span id="status_' + safeNameCopy + '">Waiting</span>\
-                            <div id="version_' + safeNameCopy + '" class="color-dark-gray server-meta versions"><span class="version"></span></div>\
+							<div id="version_' + safeNameCopy + '" class="color-dark-gray server-meta versions"><span class="version"></span></div>\
-                            <span id="record_' + safeNameCopy + '" class="color-dark-gray server-meta"></span>\
+							<span id="peak_' + safeNameCopy + '" class="color-dark-gray server-meta"></div>\
+                            <br><span id="record_' + safeNameCopy + '" class="color-dark-gray server-meta"></span>\
                         </div>\
                         <div class="column" style="float: right;">\
                             <div class="chart" id="chart_' + safeNameCopy + '"></div>\
@@ -486,17 +496,24 @@ $(document).ready(function() {
         }
     });
 
-    socket.on('syncComplete', function(data) {
+    socket.on('syncComplete', function() {
         hideCaption();
+	});
 	
-        $(document).on('click', '.server', function(e) {
+	socket.on('updatePeak', function(data) {
-            var serverId = $(this).attr('server-id');
+		updateServerPeak(data.name, data.timestamp, data.players);
-        });
+	});
-    });
+
+	socket.on('peaks', function(data) {
+		var keys = Object.keys(data);
+		for (var i = 0; i < keys.length; i++) {
+			var val = data[keys[i]];
+			updateServerPeak(keys[i], val[0], val[1]);
+		}
+	});
 
     $(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) {