hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

piecharts ftw, also started re-arranging the dashboard

Browse Source
v1.18.x
psychobunny 11 years ago
parent e012479ab5
commit 744c55e776
3 changed files with 122 additions and 92 deletions
Show Stats Download Patch File Download Diff File

92
public/less/admin/general/dashboard.less
Unescape Escape View File

@ -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;
}
.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;
#unique-visitors, #active-users {
margin-left: -15px;
> div {
width: 25%;
font-size: 13px;
}
}
}
.motd textarea {
width: 100%;
.motd textarea {
width: 100%;
}
}

35
public/src/forum/admin/general/dashboard.js
Unescape Escape View File

@ -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'),
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;
});

87
src/views/admin/general/dashboard.tpl
Unescape Escape View File

@ -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>
Write Preview
Loading…
Cancel
Save