topic presence graph, coolest one yet imo

public/src/forum/admin/general/dashboard.js

@@ -128,6 +128,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 
 		updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount);
 		updatePresenceGraph(data.users.home, data.users.topics, data.users.category, idle);
+		updateTopicsGraph(data.topics);
 
 		$('#active-users').html(html);
 	};
@@ -135,20 +136,12 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 	var graphs = {
 		traffic: null,
 		registered: null,
-		presence: null
+		presence: null,
+		topics: null
 	};
 
-	var colors = {
-		"red": "#bf616a",
-		"blue": "#5B90BF",
-		"orange": "#d08770",
-		"yellow": "#ebcb8b",
-		"green": "#a3be8c",
-		"teal": "#96b5b4",
-		"pale_blue": "#8fa1b3",
-		"purple": "#b48ead",
-		"brown": "#ab7967"
-	};
+	var topicColors = ["#bf616a","#5B90BF","#d08770","#ebcb8b","#a3be8c","#96b5b4","#8fa1b3","#b48ead","#ab7967","#46BFBD"],
+		usedTopicColors = [];
 
 	// from chartjs.org
 	function lighten(col, amt) {
@@ -195,9 +188,11 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		var trafficCanvas = document.getElementById('analytics-traffic'),
 			registeredCanvas = document.getElementById('analytics-registered'),
 			presenceCanvas = document.getElementById('analytics-presence'),
+			topicsCanvas = document.getElementById('analytics-topics'),
 			trafficCtx = trafficCanvas.getContext('2d'),
 			registeredCtx = registeredCanvas.getContext('2d'),
 			presenceCtx = presenceCanvas.getContext('2d'),
+			topicsCtx = topicsCanvas.getContext('2d'),
 			trafficLabels = getHoursArray();
 
 		var data = {
@@ -226,7 +221,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 				]
 			};
 
-		trafficCanvas.width = $(trafficCanvas).parent().width();
+		trafficCanvas.width = $(trafficCanvas).parent().width(); // is this necessary
 		graphs.traffic = new Chart(trafficCtx).Line(data, {
 			responsive: true
 		});
@@ -273,6 +268,12 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		    	responsive: true
 		    });
 
+		graphs.topics = new Chart(topicsCtx).Doughnut([], {responsive: true});
+		topicsCanvas.onclick = function(evt){
+			var activePoints = graphs.topics.getSegmentsAtEvent(evt);
+			console.log(activePoints);
+		};
+
 		setInterval(updateTrafficGraph, 15000);
 		updateTrafficGraph();
 	}
@@ -305,5 +306,56 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		graphs.presence.update();
 	}
 
+	function updateTopicsGraph(topics) {
+		var tids = Object.keys(topics);
+
+		var segments = graphs.topics.segments;
+
+		for (var i = 0, ii = segments.length; i < ii; i++ ){
+			var tid = segments[i].tid;
+
+			if ($.inArray(tid, tids) === -1) {
+				usedTopicColors.splice($.inArray(segments[i].color, usedTopicColors), 1);
+				graphs.topics.removeData(i);
+			} else {
+				graphs.topics.segments[i].value = topics[tid];
+				delete topics[tid];
+			}
+		}
+
+		while (segments.length < 10 && tids.length > 0) {
+			var tid = tids.pop(),
+				value = topics[tid],
+				color = null;
+
+			if (!value) {
+				continue;
+			}
+
+			do {
+				for (var i = 0, ii = topicColors.length; i < ii; i++) {
+					var chosenColor = topicColors[i];
+
+					if ($.inArray(chosenColor, usedTopicColors) === -1) {
+						color = chosenColor;
+						usedTopicColors.push(color);
+						break;
+					}
+				}
+			} while (color !== null && usedTopicColors.length === topicColors.length);
+
+			graphs.topics.addData({
+				value: tid,
+				color: color,
+				highlight: lighten(color, 10),
+				label: "tid " + value
+			});
+
+			segments[segments.length - 1].tid = tid;
+		}
+
+		graphs.topics.update();
+	}
+
 	return Admin;
 });

src/socket.io/meta.js

@@ -84,7 +84,7 @@ SocketMeta.rooms.enter = function(socket, data, callback) {
 
 SocketMeta.rooms.getAll = function(socket, data, callback) {
 	var rooms = websockets.server.sockets.manager.rooms,
-		userData = {
+		socketData = {
 			onlineGuestCount: websockets.getOnlineAnonCount(),
 			onlineRegisteredCount: websockets.getOnlineUserCount(),
 			socketCount: websockets.getSocketCount(),
@@ -92,20 +92,43 @@ SocketMeta.rooms.getAll = function(socket, data, callback) {
 				home: rooms['/home'] ? rooms['/home'].length : 0,
 				topics: 0,
 				category: 0
-			}
+			},
+			topics: {}
 		};
 
+	var scores = {},
+		topTenTopics = [],
+		tid;
+
 	for (var room in rooms) {
 		if (rooms.hasOwnProperty(room)) {
-			if (room.match(/^\/topic/)) {
-				userData.users.topics += rooms[room].length
+			if (tid = room.match(/^\/topic_(\d+)/)) {
+				var length = rooms[room].length;
+				socketData.users.topics += length;
+
+				if (scores[length]) {
+					scores[length].push(tid[1]);
+				} else {
+					scores[length] = [tid[1]];
+				}
 			} else if (room.match(/^\/category/)) {
-				userData.users.category += rooms[room].length
+				socketData.users.category += rooms[room].length
 			}
 		}
 	}
 
-	callback(null, userData);
+	var scoreKeys = Object.keys(scores),
+		mostActive = scoreKeys.sort();
+
+	while(topTenTopics.length < 10 && mostActive.length > 0) {
+		topTenTopics = topTenTopics.concat(scores[mostActive.pop()]);
+	}
+
+	topTenTopics.splice(0, 9).slice(0,9).forEach(function(tid) {
+		socketData.topics[tid] = rooms['/topic_' + tid].length;
+	});
+
+	callback(null, socketData);
 };
 
 /* Exports */

src/views/admin/general/dashboard.tpl

@@ -85,6 +85,16 @@
 			</div>
 		</div>
 
+		<div class="panel panel-default">
+			<div class="panel-heading">High Presence Topics</div>
+			<div class="panel-body">
+				<div class="graph-container pie-chart">
+					<ul class="graph-legend" id="topics-legend"></ul>
+					<canvas id="analytics-topics"></canvas>
+				</div>
+			</div>
+		</div>
+
 		<!-- BEGIN stats -->
 		<div class="panel panel-default">
 			<div class="panel-heading">{stats.name}</div>