piecharts ftw, also started re-arranging the dashboard

public/less/admin/general/dashboard.less

@@ -1,4 +1,9 @@
-.graph-container {
+.dashboard {
+	.panel {
+		max-width: 100% !important;
+	}
+
+	.graph-container {
 		padding-right: 50px;
 		position: relative;
 
@@ -32,24 +37,25 @@
 				}
 			}
 		}
-}
+	}
 
-.version-check {
+	.version-check {
 		-webkit-transition: background, color 500ms ease-in;
 		-moz-transition: background, color 500ms ease-in;
 		-ms-transition: background, color 500ms ease-in;
 		-o-transition: background, color 500ms ease-in;
 		transition: background, color 500ms ease-in;
-}
+	}
 
-#unique-visitors, #active-users {
+	#unique-visitors, #active-users {
 		margin-left: -15px;
 		> div {
 			width: 25%;
 			font-size: 13px;
 		}
-}
+	}
 
-.motd textarea {
+	.motd textarea {
 		width: 100%;
+	}
 }

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

@@ -124,6 +124,8 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 						'<div>Connections</div>' +
 					'</div>';
 
+		updateRegisteredGraph(data.onlineRegisteredCount, data.onlineGuestCount);
+
 		$('#active-users').html(html);
 	};
 
@@ -144,12 +146,14 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 	}
 
 	function setupGraphs() {
-		var canvas = document.getElementById('analytics-traffic'),
+		var trafficCanvas = document.getElementById('analytics-traffic'),
-			ctx = canvas.getContext('2d'),
+			registeredCanvas = document.getElementById('analytics-registered'),
-			labels = getHoursArray();
+			trafficCtx = trafficCanvas.getContext('2d'),
+			registeredCtx = registeredCanvas.getContext('2d'),
+			trafficLabels = getHoursArray();
 
 		var data = {
-				labels: labels,
+				labels: trafficLabels,
 				datasets: [
 					{
 						label: "Page Views",
@@ -174,11 +178,24 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 				]
 			};
 
-		canvas.width = $(canvas).parent().width();
+		trafficCanvas.width = $(trafficCanvas).parent().width();
-		graphs.traffic = new Chart(ctx).Line(data, {
+		graphs.traffic = new Chart(trafficCtx).Line(data, {
 			responsive: true
 		});
 
+		graphs.registered = new Chart(registeredCtx).Doughnut([{
+		        value: 1,
+		        color:"#F7464A",
+		        highlight: "#FF5A5E",
+		        label: "Registered Users"
+		    },
+		    {
+		        value: 1,
+		        color: "#46BFBD",
+		        highlight: "#5AD3D1",
+		        label: "Anonymous Users"
+		    }], {});
+
 		setInterval(updateTrafficGraph, 15000);
 		updateTrafficGraph();
 	}
@@ -197,5 +214,11 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) {
 		});
 	}
 
+	function updateRegisteredGraph(registered, anonymous) {
+		graphs.registered.segments[0].value = registered;
+		graphs.registered.segments[1].value = anonymous;
+		graphs.registered.update();
+	}
+
 	return Admin;
 });

src/views/admin/general/dashboard.tpl

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row dashboard">
 	<div class="col-lg-9">
 		<div class="panel panel-default">
 			<div class="panel-heading">Forum Traffic</div>
@@ -13,48 +13,6 @@
 			</div>
 		</div>
 
-		<div class="row">
-			<div class="col-lg-9">
-				<!-- BEGIN stats -->
-				<div class="col-lg-4 col-md-6">
-					<div class="panel panel-default">
-						<div class="panel-heading">{stats.name}</div>
-						<div class="panel-body">
-							<div id="unique-visitors">
-								<div class="text-center pull-left">
-									<div>{stats.day}</div>
-									<div>Day</div>
-								</div>
-								<div class="text-center pull-left">
-									<div>{stats.week}</div>
-									<div>Week</div>
-								</div>
-								<div class="text-center pull-left">
-									<div>{stats.month}</div>
-									<div>Month</div>
-								</div>
-								<div class="text-center pull-left">
-									<div>{stats.alltime}</div>
-									<div>All Time</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<!-- END stats -->
-
-				<div class="col-lg-4 col-md-6">
-					<div class="panel panel-default">
-						<div class="panel-heading">Active Users</div>
-						<div class="panel-body">
-							<div id="active-users"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="col-lg-3">
 		<div class="panel panel-default">
 			<div class="panel-heading">Welcome to NodeBB</div>
 			<div class="panel-body">
@@ -98,4 +56,47 @@
 			</div>
 		</div>
 	</div>
+	<div class="col-lg-3">
+		<div class="panel panel-default">
+			<div class="panel-heading">Anonymous vs Registered Users</div>
+			<div class="panel-body">
+				<div class="graph-container">
+					<canvas id="analytics-registered"></canvas>
+				</div>
+			</div>
+		</div>
+
+		<!-- BEGIN stats -->
+		<div class="panel panel-default">
+			<div class="panel-heading">{stats.name}</div>
+			<div class="panel-body">
+				<div id="unique-visitors">
+					<div class="text-center pull-left">
+						<div>{stats.day}</div>
+						<div>Day</div>
+					</div>
+					<div class="text-center pull-left">
+						<div>{stats.week}</div>
+						<div>Week</div>
+					</div>
+					<div class="text-center pull-left">
+						<div>{stats.month}</div>
+						<div>Month</div>
+					</div>
+					<div class="text-center pull-left">
+						<div>{stats.alltime}</div>
+						<div>All Time</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- END stats -->
+
+		<div class="panel panel-default">
+			<div class="panel-heading">Active Users</div>
+			<div class="panel-body">
+				<div id="active-users"></div>
+			</div>
+		</div>
+	</div>
 </div>