@ -1,30 +1,32 @@
"use strict" ;
'use strict' ;
/*global define, ajaxify, app, socket, utils, bootbox, RELATIVE_PATH*/
define ( 'admin/general/dashboard' , [ 'semver' , 'Chart' , 'translator' ] , function ( semver , Chart , translator ) {
define ( 'admin/general/dashboard' , [ 'semver' , 'Chart' , 'translator' ] , function ( semver , Chart , translator ) {
var Admin = { } ;
var Admin = { } ;
var intervals = {
var intervals = {
rooms : false ,
rooms : false ,
graphs : false
graphs : false ,
} ;
} ;
var isMobile = false ;
var isMobile = false ;
var isPrerelease = /^v?\d+\.\d+\.\d+-.+$/ ;
var isPrerelease = /^v?\d+\.\d+\.\d+-.+$/ ;
var graphData = {
var graphData = {
rooms : { } ,
rooms : { } ,
traffic : { }
traffic : { } ,
} ;
} ;
var currentGraph = {
var currentGraph = {
units : 'hours' ,
units : 'hours' ,
until : undefined
until : undefined ,
} ;
} ;
var DEFAULTS = {
var DEFAULTS = {
roomInterval : 10000 ,
roomInterval : 10000 ,
graphInterval : 15000 ,
graphInterval : 15000 ,
realtimeInterval : 1500
realtimeInterval : 1500 ,
} ;
} ;
$ ( window ) . on ( 'action:ajaxify.start' , function ( ev , data ) {
var usedTopicColors = [ ] ;
$ ( window ) . on ( 'action:ajaxify.start' , function ( ) {
clearInterval ( intervals . rooms ) ;
clearInterval ( intervals . rooms ) ;
clearInterval ( intervals . graphs ) ;
clearInterval ( intervals . graphs ) ;
@ -50,10 +52,10 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
return ! isPrerelease . test ( version . name ) ; // filter out automated prerelease versions
return ! isPrerelease . test ( version . name ) ; // filter out automated prerelease versions
} ) ;
} ) ;
var version = $ ( '#version' ) . html ( ) ,
var version = $ ( '#version' ) . html ( ) ;
latestVersion = releases [ 0 ] . name . slice ( 1 ) ,
var latestVersion = releases [ 0 ] . name . slice ( 1 ) ;
checkEl = $ ( '.version-check' ) ,
var checkEl = $ ( '.version-check' ) ;
text ;
var text ;
// Alter box colour accordingly
// Alter box colour accordingly
if ( semver . eq ( latestVersion , version ) ) {
if ( semver . eq ( latestVersion , version ) ) {
@ -121,51 +123,52 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
traffic : null ,
traffic : null ,
registered : null ,
registered : null ,
presence : null ,
presence : null ,
topics : null
topics : null ,
} ;
} ;
var topicColors = [ "#bf616a" , "#5B90BF" , "#d08770" , "#ebcb8b" , "#a3be8c" , "#96b5b4" , "#8fa1b3" , "#b48ead" , "#ab7967" , "#46BFBD" ] ;
var topicColors = [ '#bf616a' , '#5B90BF' , '#d08770' , '#ebcb8b' , '#a3be8c' , '#96b5b4' , '#8fa1b3' , '#b48ead' , '#ab7967' , '#46BFBD' ] ;
var usedTopicColors = [ ] ;
/* eslint-disable */
// from chartjs.org
// from chartjs.org
function lighten ( col , amt ) {
function lighten ( col , amt ) {
var usePound = false ;
var usePound = false ;
if ( col [ 0 ] == "#" ) {
if ( col [ 0 ] == = '#' ) {
col = col . slice ( 1 ) ;
col = col . slice ( 1 ) ;
usePound = true ;
usePound = true ;
}
}
var num = parseInt ( col , 16 ) ;
var num = parseInt ( col , 16 ) ;
var r = ( num >> 16 ) + amt ;
var r = ( num >> 16 ) + amt ;
if ( r > 255 ) r = 255 ;
if ( r > 255 ) r = 255 ;
else if ( r < 0 ) r = 0 ;
else if ( r < 0 ) r = 0 ;
var b = ( ( num >> 8 ) & 0x00FF ) + amt ;
var b = ( ( num >> 8 ) & 0x00FF ) + amt ;
if ( b > 255 ) b = 255 ;
if ( b > 255 ) b = 255 ;
else if ( b < 0 ) b = 0 ;
else if ( b < 0 ) b = 0 ;
var g = ( num & 0x0000FF ) + amt ;
var g = ( num & 0x0000FF ) + amt ;
if ( g > 255 ) g = 255 ;
if ( g > 255 ) g = 255 ;
else if ( g < 0 ) g = 0 ;
else if ( g < 0 ) g = 0 ;
return ( usePound ? "#" : "" ) + ( g | ( b << 8 ) | ( r << 16 ) ) . toString ( 16 ) ;
return ( usePound ? '#' : '' ) + ( g | ( b << 8 ) | ( r << 16 ) ) . toString ( 16 ) ;
}
}
/* eslint-enable */
function setupGraphs ( ) {
function setupGraphs ( ) {
var trafficCanvas = document . getElementById ( 'analytics-traffic' ) ,
var trafficCanvas = document . getElementById ( 'analytics-traffic' ) ;
registeredCanvas = document . getElementById ( 'analytics-registered' ) ,
var registeredCanvas = document . getElementById ( 'analytics-registered' ) ;
presenceCanvas = document . getElementById ( 'analytics-presence' ) ,
var presenceCanvas = document . getElementById ( 'analytics-presence' ) ;
topicsCanvas = document . getElementById ( 'analytics-topics' ) ,
var topicsCanvas = document . getElementById ( 'analytics-topics' ) ;
trafficCtx = trafficCanvas . getContext ( '2d' ) ,
var trafficCtx = trafficCanvas . getContext ( '2d' ) ;
registeredCtx = registeredCanvas . getContext ( '2d' ) ,
var registeredCtx = registeredCanvas . getContext ( '2d' ) ;
presenceCtx = presenceCanvas . getContext ( '2d' ) ,
var presenceCtx = presenceCanvas . getContext ( '2d' ) ;
topicsCtx = topicsCanvas . getContext ( '2d' ) ,
var topicsCtx = topicsCanvas . getContext ( '2d' ) ;
trafficLabels = utils . getHoursArray ( ) ;
var trafficLabels = utils . getHoursArray ( ) ;
if ( isMobile ) {
if ( isMobile ) {
Chart . defaults . global . tooltips . enabled = false ;
Chart . defaults . global . tooltips . enabled = false ;
@ -188,25 +191,25 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
datasets : [
datasets : [
{
{
label : translations [ 0 ] ,
label : translations [ 0 ] ,
backgroundColor : "rgba(220,220,220,0.2)" ,
backgroundColor : 'rgba(220,220,220,0.2)' ,
borderColor : "rgba(220,220,220,1)" ,
borderColor : 'rgba(220,220,220,1)' ,
pointBackgroundColor : "rgba(220,220,220,1)" ,
pointBackgroundColor : 'rgba(220,220,220,1)' ,
pointHoverBackgroundColor : "#fff" ,
pointHoverBackgroundColor : '#fff' ,
pointBorderColor : "#fff" ,
pointBorderColor : '#fff' ,
pointHoverBorderColor : "rgba(220,220,220,1)" ,
pointHoverBorderColor : 'rgba(220,220,220,1)' ,
data : [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
data : [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ] ,
} ,
} ,
{
{
label : translations [ 1 ] ,
label : translations [ 1 ] ,
backgroundColor : "rgba(151,187,205,0.2)" ,
backgroundColor : 'rgba(151,187,205,0.2)' ,
borderColor : "rgba(151,187,205,1)" ,
borderColor : 'rgba(151,187,205,1)' ,
pointBackgroundColor : "rgba(151,187,205,1)" ,
pointBackgroundColor : 'rgba(151,187,205,1)' ,
pointHoverBackgroundColor : "#fff" ,
pointHoverBackgroundColor : '#fff' ,
pointBorderColor : "#fff" ,
pointBorderColor : '#fff' ,
pointHoverBorderColor : "rgba(151,187,205,1)" ,
pointHoverBorderColor : 'rgba(151,187,205,1)' ,
data : [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
data : [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ] ,
}
} ,
]
] ,
} ;
} ;
trafficCanvas . width = $ ( trafficCanvas ) . parent ( ) . width ( ) ;
trafficCanvas . width = $ ( trafficCanvas ) . parent ( ) . width ( ) ;
@ -216,34 +219,34 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
options : {
options : {
responsive : true ,
responsive : true ,
legend : {
legend : {
display : false
display : false ,
} ,
} ,
scales : {
scales : {
yAxes : [ {
yAxes : [ {
ticks : {
ticks : {
beginAtZero : true
beginAtZero : true ,
}
} ,
} ]
} ] ,
}
} ,
}
} ,
} ) ;
} ) ;
graphs . registered = new Chart ( registeredCtx , {
graphs . registered = new Chart ( registeredCtx , {
type : 'doughnut' ,
type : 'doughnut' ,
data : {
data : {
labels : translations . slice ( 2 , 4 ) ,
labels : translations . slice ( 2 , 4 ) ,
datasets : [ {
datasets : [ {
data : [ 1 , 1 ] ,
data : [ 1 , 1 ] ,
backgroundColor : [ "#F7464A" , "#46BFBD" ] ,
backgroundColor : [ '#F7464A' , '#46BFBD' ] ,
hoverBackgroundColor : [ "#FF5A5E" , "#5AD3D1" ]
hoverBackgroundColor : [ '#FF5A5E' , '#5AD3D1' ] ,
} ]
} ] ,
} ,
} ,
options : {
options : {
responsive : true ,
responsive : true ,
legend : {
legend : {
display : false
display : false ,
}
} ,
}
} ,
} ) ;
} ) ;
graphs . presence = new Chart ( presenceCtx , {
graphs . presence = new Chart ( presenceCtx , {
@ -252,18 +255,18 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
labels : translations . slice ( 4 , 9 ) ,
labels : translations . slice ( 4 , 9 ) ,
datasets : [ {
datasets : [ {
data : [ 1 , 1 , 1 , 1 , 1 ] ,
data : [ 1 , 1 , 1 , 1 , 1 ] ,
backgroundColor : [ "#F7464A" , "#46BFBD" , "#FDB45C" , "#949FB1" , "#9FB194" ] ,
backgroundColor : [ '#F7464A' , '#46BFBD' , '#FDB45C' , '#949FB1' , '#9FB194' ] ,
hoverBackgroundColor : [ "#FF5A5E" , "#5AD3D1" , "#FFC870" , "#A8B3C5" , "#A8B3C5" ]
hoverBackgroundColor : [ '#FF5A5E' , '#5AD3D1' , '#FFC870' , '#A8B3C5' , '#A8B3C5' ] ,
} ]
} ] ,
} ,
} ,
options : {
options : {
responsive : true ,
responsive : true ,
legend : {
legend : {
display : false
display : false ,
}
} ,
}
} ,
} ) ;
} ) ;
graphs . topics = new Chart ( topicsCtx , {
graphs . topics = new Chart ( topicsCtx , {
type : 'doughnut' ,
type : 'doughnut' ,
data : {
data : {
@ -271,15 +274,15 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
datasets : [ {
datasets : [ {
data : [ ] ,
data : [ ] ,
backgroundColor : [ ] ,
backgroundColor : [ ] ,
hoverBackgroundColor : [ ]
hoverBackgroundColor : [ ] ,
} ]
} ] ,
} ,
} ,
options : {
options : {
responsive : true ,
responsive : true ,
legend : {
legend : {
display : false
display : false ,
}
} ,
}
} ,
} ) ;
} ) ;
updateTrafficGraph ( ) ;
updateTrafficGraph ( ) ;
@ -289,11 +292,11 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
$ ( '[data-action="updateGraph"]' ) . on ( 'click' , function ( ) {
$ ( '[data-action="updateGraph"]' ) . on ( 'click' , function ( ) {
var until ;
var until ;
switch ( $ ( this ) . attr ( 'data-until' ) ) {
switch ( $ ( this ) . attr ( 'data-until' ) ) {
case 'last-month' :
case 'last-month' :
var lastMonth = new Date ( ) ;
var lastMonth = new Date ( ) ;
lastMonth . setDate ( lastMonth . getDate ( ) - 30 ) ;
lastMonth . setDate ( lastMonth . getDate ( ) - 30 ) ;
until = lastMonth . getTime ( ) ;
until = lastMonth . getTime ( ) ;
}
}
updateTrafficGraph ( $ ( this ) . attr ( 'data-units' ) , until ) ;
updateTrafficGraph ( $ ( this ) . attr ( 'data-units' ) , until ) ;
$ ( '[data-action="updateGraph"]' ) . removeClass ( 'active' ) ;
$ ( '[data-action="updateGraph"]' ) . removeClass ( 'active' ) ;
@ -325,7 +328,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
socket . emit ( 'admin.analytics.get' , {
socket . emit ( 'admin.analytics.get' , {
graph : 'traffic' ,
graph : 'traffic' ,
units : units || 'hours' ,
units : units || 'hours' ,
until : until
until : until ,
} , function ( err , data ) {
} , function ( err , data ) {
if ( err ) {
if ( err ) {
return app . alertError ( err . message ) ;
return app . alertError ( err . message ) ;
@ -374,36 +377,36 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator'], function (s
graphs . presence . update ( ) ;
graphs . presence . update ( ) ;
}
}
function updateTopicsGraph ( topics ) {
function updateTopicsGraph ( topics ) {
if ( ! Object . keys ( topics ) . length ) {
if ( ! Object . keys ( topics ) . length ) {
topics = { "0" : {
topics = { 0 : {
title : "No users browsing" ,
title : 'No users browsing' ,
value : 1
value : 1 ,
} } ;
} } ;
}
}
var tids = Object . keys ( topics ) ;
var tids = Object . keys ( topics ) ;
graphs . topics . data . labels = [ ] ;
graphs . topics . data . labels = [ ] ;
graphs . topics . data . datasets [ 0 ] . data = [ ] ;
graphs . topics . data . datasets [ 0 ] . data = [ ] ;
graphs . topics . data . datasets [ 0 ] . backgroundColor = [ ] ;
graphs . topics . data . datasets [ 0 ] . backgroundColor = [ ] ;
graphs . topics . data . datasets [ 0 ] . hoverBackgroundColor = [ ] ;
graphs . topics . data . datasets [ 0 ] . hoverBackgroundColor = [ ] ;
for ( var i = 0 , ii = tids . length ; i < ii ; i ++ ) {
for ( var i = 0 , ii = tids . length ; i < ii ; i += 1 ) {
graphs . topics . data . labels . push ( topics [ tids [ i ] ] . title ) ;
graphs . topics . data . labels . push ( topics [ tids [ i ] ] . title ) ;
graphs . topics . data . datasets [ 0 ] . data . push ( topics [ tids [ i ] ] . value ) ;
graphs . topics . data . datasets [ 0 ] . data . push ( topics [ tids [ i ] ] . value ) ;
graphs . topics . data . datasets [ 0 ] . backgroundColor . push ( topicColors [ i ] ) ;
graphs . topics . data . datasets [ 0 ] . backgroundColor . push ( topicColors [ i ] ) ;
graphs . topics . data . datasets [ 0 ] . hoverBackgroundColor . push ( lighten ( topicColors [ i ] , 10 ) ) ;
graphs . topics . data . datasets [ 0 ] . hoverBackgroundColor . push ( lighten ( topicColors [ i ] , 10 ) ) ;
}
}
function buildTopicsLegend ( ) {
function buildTopicsLegend ( ) {
var legend = $ ( '#topics-legend' ) . html ( '' ) ;
var legend = $ ( '#topics-legend' ) . html ( '' ) ;
for ( var i = 0 , ii = tids . length ; i < ii ; i ++ ) {
for ( var i = 0 , ii = tids . length ; i < ii ; i += 1 ) {
var topic = topics [ tids [ i ] ] ;
var topic = topics [ tids [ i ] ] ;
var label = topic . value === '0' ? topic . title : '<a title="' + topic . title + '"href="' + RELATIVE _PATH + '/topic/' + tids [ i ] + '" target="_blank"> ' + topic . title + '</a>' ;
var label = topic . value === '0' ? topic . title : '<a title="' + topic . title + '"href="' + RELATIVE _PATH + '/topic/' + tids [ i ] + '" target="_blank"> ' + topic . title + '</a>' ;
legend . append (
legend . append (
'<li>' +
'<li>' +
'<div style="background-color: ' + topicColors [ i ] + ';"></div>' +
'<div style="background-color: ' + topicColors [ i ] + ';"></div>' +