piecharts ftw, also started re-arranging the dashboard

public/less/admin/general/dashboard.less

@@ -1,55 +1,61 @@
-.graph-container {
+.dashboard {
-	padding-right: 50px;
+	.panel {
-	position: relative;
+		max-width: 100% !important;
+	}
 
-	.graph-legend {
+	.graph-container {
-		.box-header-font;
+		padding-right: 50px;
-		display: block;
+		position: relative;
-		position: absolute;
-		top: 20px;
-		left: 35px;
-		list-style-type: none;
-		padding: 0;
 
-		li {			
+		.graph-legend {
-			div {
+			.box-header-font;
-				border: 1px solid;
+			display: block;
-				width: 12px;
+			position: absolute;
-				height: 12px;
+			top: 20px;
-				vertical-align: -41%;
+			left: 35px;
-				margin-bottom: 5px;
+			list-style-type: none;
-				display: inline-block;
+			padding: 0;
-				margin-right: 5px;
 
-				&.page-views {
+			li {			
-					border-color: rgba(220,220,220,1);
+				div {
-					background-color: rgba(220,220,220,0.2);
+					border: 1px solid;
-				}
+					width: 12px;
-				&.unique-visitors {
+					height: 12px;
-					border-color: rgba(151,187,205,1);
+					vertical-align: -41%;
-					background-color: rgba(151,187,205,0.2);
+					margin-bottom: 5px;
+					display: inline-block;
+					margin-right: 5px;
+
+					&.page-views {
+						border-color: rgba(220,220,220,1);
+						background-color: rgba(220,220,220,0.2);
+					}
+					&.unique-visitors {
+						border-color: rgba(151,187,205,1);
+						background-color: rgba(151,187,205,0.2);
+					}
 				}
 			}
 		}
 	}
-}
 
-.version-check {
+	.version-check {
-	-webkit-transition: background, color 500ms ease-in;
+		-webkit-transition: background, color 500ms ease-in;
-	-moz-transition: background, color 500ms ease-in;
+		-moz-transition: background, color 500ms ease-in;
-	-ms-transition: background, color 500ms ease-in;
+		-ms-transition: background, color 500ms ease-in;
-	-o-transition: background, color 500ms ease-in;
+		-o-transition: background, color 500ms ease-in;
-	transition: background, color 500ms ease-in;
+		transition: background, color 500ms ease-in;
-}
+	}
 
-#unique-visitors, #active-users {
+	#unique-visitors, #active-users {
-	margin-left: -15px;
+		margin-left: -15px;
-	> div {
+		> div {
-		width: 25%;
+			width: 25%;
-		font-size: 13px;
+			font-size: 13px;
+		}
 	}
-}
 
-.motd textarea {
+	.motd textarea {
-	width: 100%;
+		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>