From 744c55e776dbb6e872699c8db77b5e09d3737077 Mon Sep 17 00:00:00 2001 From: psychobunny Date: Mon, 29 Sep 2014 00:33:21 -0400 Subject: [PATCH] piecharts ftw, also started re-arranging the dashboard --- public/less/admin/general/dashboard.less | 94 +++++++++++---------- public/src/forum/admin/general/dashboard.js | 35 ++++++-- src/views/admin/general/dashboard.tpl | 87 +++++++++---------- 3 files changed, 123 insertions(+), 93 deletions(-) diff --git a/public/less/admin/general/dashboard.less b/public/less/admin/general/dashboard.less index 297a827496..05073bf9a8 100644 --- a/public/less/admin/general/dashboard.less +++ b/public/less/admin/general/dashboard.less @@ -1,55 +1,61 @@ -.graph-container { - padding-right: 50px; - position: relative; +.dashboard { + .panel { + max-width: 100% !important; + } - .graph-legend { - .box-header-font; - display: block; - position: absolute; - top: 20px; - left: 35px; - list-style-type: none; - padding: 0; + .graph-container { + padding-right: 50px; + position: relative; - li { - div { - border: 1px solid; - width: 12px; - height: 12px; - vertical-align: -41%; - margin-bottom: 5px; - display: inline-block; - margin-right: 5px; + .graph-legend { + .box-header-font; + display: block; + position: absolute; + top: 20px; + left: 35px; + list-style-type: none; + padding: 0; - &.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); + li { + div { + border: 1px solid; + width: 12px; + height: 12px; + vertical-align: -41%; + 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 { - -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 { - margin-left: -15px; - > div { - width: 25%; - font-size: 13px; + .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; } -} -.motd textarea { - width: 100%; + #unique-visitors, #active-users { + margin-left: -15px; + > div { + width: 25%; + font-size: 13px; + } + } + + .motd textarea { + width: 100%; + } } \ No newline at end of file diff --git a/public/src/forum/admin/general/dashboard.js b/public/src/forum/admin/general/dashboard.js index 79ed4fc647..8623c9ceb0 100644 --- a/public/src/forum/admin/general/dashboard.js +++ b/public/src/forum/admin/general/dashboard.js @@ -124,6 +124,8 @@ define('forum/admin/general/dashboard', ['semver'], function(semver) { '
Connections
' + ''; + 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'), - ctx = canvas.getContext('2d'), - labels = getHoursArray(); + var trafficCanvas = document.getElementById('analytics-traffic'), + registeredCanvas = document.getElementById('analytics-registered'), + 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(); - graphs.traffic = new Chart(ctx).Line(data, { + trafficCanvas.width = $(trafficCanvas).parent().width(); + 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; }); diff --git a/src/views/admin/general/dashboard.tpl b/src/views/admin/general/dashboard.tpl index 624f05351e..c925955920 100644 --- a/src/views/admin/general/dashboard.tpl +++ b/src/views/admin/general/dashboard.tpl @@ -1,4 +1,4 @@ -
+
Forum Traffic
@@ -13,48 +13,6 @@
-
-
- -
-
-
{stats.name}
-
-
-
-
{stats.day}
-
Day
-
-
-
{stats.week}
-
Week
-
-
-
{stats.month}
-
Month
-
-
-
{stats.alltime}
-
All Time
-
-
-
-
-
- - -
-
-
Active Users
-
-
-
-
-
-
-
-
-
Welcome to NodeBB
@@ -98,4 +56,47 @@
+
+
+
Anonymous vs Registered Users
+
+
+ +
+
+
+ + +
+
{stats.name}
+
+
+
+
{stats.day}
+
Day
+
+
+
{stats.week}
+
Week
+
+
+
{stats.month}
+
Month
+
+
+
{stats.alltime}
+
All Time
+
+
+
+
+ + +
+
Active Users
+
+
+
+
+
\ No newline at end of file