feat: dashboard stats

show
yesterday/today
lastweek/this week
lastmonth/this month

public/language/en-GB/admin/general/dashboard.json

@@ -14,9 +14,12 @@
 	"page-views-custom-help": "Enter a date range of page views you would like to view. If no date picker is available, the accepted format is <code>YYYY-MM-DD</code>",
 	"page-views-custom-error": "Please enter a valid date range in the format <code>YYYY-MM-DD</code>",
 
-	"stats.day": "Day",
-	"stats.week": "Week",
-	"stats.month": "Month",
+	"stats.yesterday": "Yesterday",
+	"stats.today": "Today",
+	"stats.last-week": "Last Week",
+	"stats.this-week": "This Week",
+	"stats.last-month": "Last Month",
+	"stats.this-month": "This Month",
 	"stats.all": "All Time",
 
 	"updates": "Updates",

src/controllers/admin/dashboard.js

@@ -129,12 +129,38 @@ async function getStatsForSet(set, field) {
 	};
 
 	const now = Date.now();
-	return await utils.promiseParallel({
-		day: db.sortedSetCount(set, now - terms.day, '+inf'),
-		week: db.sortedSetCount(set, now - terms.week, '+inf'),
-		month: db.sortedSetCount(set, now - terms.month, '+inf'),
+	const results = await utils.promiseParallel({
+		yesterday: db.sortedSetCount(set, now - (terms.day * 2), now - terms.day),
+		today: db.sortedSetCount(set, now - terms.day, '+inf'),
+		lastweek: db.sortedSetCount(set, now - (terms.week * 2), now - terms.week),
+		thisweek: db.sortedSetCount(set, now - terms.week, '+inf'),
+		lastmonth: db.sortedSetCount(set, now - (terms.month * 2), now - terms.month),
+		thismonth: db.sortedSetCount(set, now - terms.month, '+inf'),
 		alltime: getGlobalField(field),
 	});
+	function textClass(num) {
+		if (num > 0) {
+			return 'text-success';
+		} else if (num < 0) {
+			return 'text-danger';
+		}
+		return 'text-warning';
+	}
+
+	function increasePercent(last, now) {
+		const percent = last ? (now - last) / last * 100 : 0;
+		return percent.toFixed(1);
+	}
+	results.dayIncrease = increasePercent(results.yesterday, results.today);
+	results.dayTextClass = textClass(results.dayIncrease);
+
+	results.weekIncrease = increasePercent(results.lastweek, results.thisweek);
+	results.weekTextClass = textClass(results.weekIncrease);
+
+	results.monthIncrease = increasePercent(results.lastmonth, results.thismonth);
+	results.monthTextClass = textClass(results.monthIncrease);
+
+	return results;
 }
 
 async function getGlobalField(field) {

src/views/admin/general/dashboard.tpl

@@ -35,36 +35,47 @@
 		</div>
 
 		<div class="row">
+			<div class="table-responsive">
+				<table class="table table-striped">
+					<thead>
+						<tr>
+							<th></th>
+							<th class="text-right">[[admin/general/dashboard:stats.yesterday]]</th>
+							<th class="text-right">[[admin/general/dashboard:stats.today]]</th>
+							<th></th>
+							<th class="text-right">[[admin/general/dashboard:stats.last-week]]</th>
+							<th class="text-right">[[admin/general/dashboard:stats.this-week]]</th>
+							<th></th>
+							<th class="text-right">[[admin/general/dashboard:stats.last-month]]</th>
+							<th class="text-right">[[admin/general/dashboard:stats.this-month]]</th>
+							<th></th>
+							<th class="text-right">[[admin/general/dashboard:stats.all]]</th>
+						</tr>
+					</thead>
+					<tbody>
 						<!-- BEGIN stats -->
-			<div class="col-lg-6">
-				<div class="panel panel-default stats">
-					<div class="panel-heading">{stats.name}</div>
-					<div class="panel-body">
-						<div id="unique-visitors">
-							<div class="text-center pull-left">
-								<span class="formatted-number">{stats.day}</span>
-								<div class="stat">[[admin/general/dashboard:stats.day]]</div>
-							</div>
-							<div class="text-center pull-left">
-								<span class="formatted-number">{stats.week}</span>
-								<div class="stat">[[admin/general/dashboard:stats.week]]</div>
-							</div>
-							<div class="text-center pull-left">
-								<span class="formatted-number">{stats.month}</span>
-								<div class="stat">[[admin/general/dashboard:stats.month]]</div>
-							</div>
-							<div class="text-center pull-left">
-								<span class="formatted-number">{stats.alltime}</span>
-								<div class="stat">[[admin/general/dashboard:stats.all]]</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- END stats -->
+						<tr>
+							<td><strong>{stats.name}</strong></td>
+							<td class="text-right formatted-number">{stats.yesterday}</td>
+							<td class="text-right formatted-number">{stats.today}</td>
+							<td class="{stats.dayTextClass}"><small>{stats.dayIncrease}%</small></td>
+
+							<td class="text-right formatted-number">{stats.lastweek}</td>
+							<td class="text-right formatted-number">{stats.thisweek}</td>
+							<td class="{stats.weekTextClass}"><small>{stats.weekIncrease}%</small></td>
 
+							<td class="text-right formatted-number">{stats.lastmonth}</td>
+							<td class="text-right formatted-number">{stats.thismonth}</td>
+							<td class="{stats.monthTextClass}"><small>{stats.monthIncrease}%</small></td>
 
+							<td class="text-right formatted-number">{stats.alltime}</td>
+						</tr>
+						<!-- END stats -->
+					</tbody>
+				</table>
+			</div>
 		</div>
+
 		<div class="row">
 			<div class="col-lg-4">
 				<div class="panel panel-default">