now getting topic names for topics presence chart; adjusted layout to make it more responsive

public/less/admin/general/dashboard.less

@@ -24,6 +24,27 @@
 				padding-left: 0px;
 				padding-top: 60px;
 			}
+
+			&.legend-down {
+				padding-left: 0px;
+				padding-top: 0px;
+				
+				canvas {
+					margin-bottom: 25px;
+				}
+
+				.graph-legend {
+					position: relative;
+
+					li {
+						float: left;
+						width: 50%;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+				}
+			}
 		}
 
 		.graph-legend {

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

@@ -278,7 +278,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		updateTrafficGraph();
 
 		$(window).on('resize', function() {
-			$('.pie-chart.push-down').each(function() {
+			$('.pie-chart.legend-up').each(function() {
 				var $this = $(this);
 
 				if ($this.width() < 320) {
@@ -320,7 +320,10 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 
 	function updateTopicsGraph(topics) {
 		if (!Object.keys(topics).length) {
-			topics = {"0": 1};
+			topics = {"0": {
+				title: "No users browsing",
+				value: 1
+			}};
 		}
 
 		var tids = Object.keys(topics),
@@ -338,7 +341,7 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 					usedTopicColors.splice($.inArray(segments[i].color, usedTopicColors), 1);
 					graphs.topics.removeData(i);
 				} else {
-					graphs.topics.segments[i].value = topics[tid];
+					graphs.topics.segments[i].value = topics[tid].value;
 					delete topics[tid];
 				}
 			}
@@ -347,10 +350,10 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		function assignNewTopics() {
 			while (segments.length < 10 && tids.length > 0) {
 				var tid = tids.pop(),
-					value = topics[tid],
+					data = topics[tid],
 					color = null;
 
-				if (!value) {
+				if (!data) {
 					continue;
 				}
 
@@ -372,10 +375,10 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 
 				if (color) {
 					graphs.topics.addData({
-						value: value,
+						value: data.value,
 						color: color,
 						highlight: lighten(color, 10),
-						label: tid !== '0' ? "tid " + tid : "No users browsing"
+						label: data.title
 					});
 
 					segments[segments.length - 1].tid = tid;

src/socket.io/meta.js

@@ -10,6 +10,7 @@ var	meta = require('../meta'),
 	nconf = require('nconf'),
 	gravatar = require('gravatar'),
 	winston = require('winston'),
+	validator = require('validator'),
 	websockets = require('./'),
 
 	SocketMeta = {
@@ -124,11 +125,18 @@ SocketMeta.rooms.getAll = function(socket, data, callback) {
 		topTenTopics = topTenTopics.concat(scores[mostActive.pop()]);
 	}
 
-	topTenTopics.splice(0, 9).slice(0,9).forEach(function(tid) {
-		socketData.topics[tid] = rooms['/topic_' + tid].length;
-	});
+	topTenTopics = topTenTopics.slice(0,9);
 
-	callback(null, socketData);
+	topics.getTopicsFields(topTenTopics, ['title'], function(err, titles) {
+		topTenTopics.forEach(function(tid, id) {
+			socketData.topics[tid] = {
+				value: rooms['/topic_' + tid].length,
+				title: validator.escape(titles[id].title)
+			}
+		});
+
+		callback(null, socketData);
+	});
 };
 
 /* Exports */

src/views/admin/general/dashboard.tpl

@@ -60,7 +60,7 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">Anonymous vs Registered Users</div>
 			<div class="panel-body">
-				<div class="graph-container pie-chart push-down">
+				<div class="graph-container pie-chart legend-up">
 					<ul class="graph-legend">
 						<li><div class="anonymous"></div><span>Anonymous</span></li>
 						<li><div class="registered"></div><span>Registered</span></li>
@@ -73,7 +73,7 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">User Presence</div>
 			<div class="panel-body">
-				<div class="graph-container pie-chart push-down">
+				<div class="graph-container pie-chart legend-up">
 					<ul class="graph-legend">
 						<li><div class="on-homepage"></div><span>On Homepage</span></li>
 						<li><div class="reading-posts"></div><span>Reading posts</span></li>
@@ -88,9 +88,9 @@
 		<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>
+				<div class="graph-container pie-chart legend-down">
 					<canvas id="analytics-topics"></canvas>
+					<ul class="graph-legend" id="topics-legend"></ul>
 				</div>
 			</div>
 		</div>