mirror of
https://github.com/NodeBB/NodeBB.git
synced 2026-02-28 01:21:13 +01:00
piecharts ftw, also started re-arranging the dashboard
This commit is contained in:
psychobunny
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user