354 lines
9.1 KiB
JavaScript
354 lines
9.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
|
|
B("#btnChannelStats").on('click', function(e) {
|
|
B(this).addClass('pure-button-disabled');
|
|
B('#btnMessageStats').removeClass('pure-button-disabled');
|
|
B('#btnUserStats').removeClass('pure-button-disabled');
|
|
B('#channelStats').removeClass('hidden');
|
|
B('#userStats').addClass('hidden');
|
|
B('#messageStats').addClass('hidden');
|
|
});
|
|
|
|
B('#btnMessageStats').on('click', function(e) {
|
|
B(this).addClass('pure-button-disabled');
|
|
B('#btnChannelStats').removeClass('pure-button-disabled');
|
|
B('#channelStats').addClass('hidden');
|
|
B('#btnUserStats').removeClass('pure-button-disabled');
|
|
B('#userStats').addClass('hidden');
|
|
B('#messageStats').removeClass('hidden');
|
|
});
|
|
|
|
B('#btnUserStats').on('click', function(e) {
|
|
B(this).addClass('pure-button-disabled');
|
|
B('#btnChannelStats').removeClass('pure-button-disabled');
|
|
B('#channelStats').addClass('hidden');
|
|
B('#btnMessageStats').removeClass('pure-button-disabled');
|
|
B('#messageStats').addClass('hidden');
|
|
B('#userStats').removeClass('hidden');
|
|
});
|
|
|
|
B('#btnUsrHrlyStats').on('click', function(e) {
|
|
B(this).addClass('pure-button-disabled');
|
|
B('#btnUsrDowStats').removeClass('pure-button-disabled');
|
|
B('#userHourlyStats').removeClass('hidden');
|
|
B('#userDowStats').addClass('hidden');
|
|
});
|
|
|
|
B('#btnUsrDowStats').on('click', function(e) {
|
|
B(this).addClass('pure-button-disabled');
|
|
B('#btnUsrHrlyStats').removeClass('pure-button-disabled');
|
|
B('#userHourlyStats').addClass('hidden');
|
|
B('#userDowStats').removeClass('hidden');
|
|
});
|
|
|
|
var main_channel_names = ['general','random'],
|
|
main_member_numbers = [],
|
|
main_message_numbers = [],
|
|
other_channel_names = [],
|
|
other_member_numbers = [],
|
|
other_message_numbers = [];
|
|
for(var i = 0; i < stats.channels.length; i++) {
|
|
if(stats.channels[i].name == "general") {
|
|
main_member_numbers[0] = stats.channels[i].member_count;
|
|
main_message_numbers[0] = stats.channels[i].message_count;
|
|
} else if(stats.channels[i].name == "random") {
|
|
main_member_numbers[1] = stats.channels[i].member_count;
|
|
main_message_numbers[1] = stats.channels[i].message_count;
|
|
} else {
|
|
other_channel_names.push(stats.channels[i].name);
|
|
other_member_numbers.push(stats.channels[i].member_count);
|
|
other_message_numbers.push(stats.channels[i].message_count);
|
|
}
|
|
}
|
|
|
|
var mainChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'mainStatsBarChart',
|
|
type: 'column'
|
|
},
|
|
|
|
title: {
|
|
text: 'Main Channels'
|
|
},
|
|
|
|
yAxis: [{
|
|
min: 0,
|
|
title: { text: 'Messages' }
|
|
},{
|
|
min: 0,
|
|
title: { text: 'Members' },
|
|
opposite: true
|
|
}],
|
|
|
|
plotOptions: {
|
|
column: {
|
|
grouping: false,
|
|
shadow: false,
|
|
borderWidth: 0
|
|
}
|
|
},
|
|
|
|
xAxis: {
|
|
categories: main_channel_names
|
|
},
|
|
|
|
series: [{
|
|
name: 'Messages',
|
|
color: 'rgba(126,86,134,0.9)',
|
|
data: main_message_numbers,
|
|
pointPadding: 0.3
|
|
},{
|
|
name: 'Members',
|
|
color: 'rgba(165,170,217,1)',
|
|
data: main_member_numbers,
|
|
pointPadding: 0.4,
|
|
yAxis: 1
|
|
}]
|
|
});
|
|
|
|
var otherChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'statsBarChart',
|
|
type: 'column'
|
|
},
|
|
|
|
title: {
|
|
text: 'Other Channels'
|
|
},
|
|
|
|
yAxis: [{
|
|
min: 0,
|
|
title: { text: 'Members' }
|
|
},{
|
|
min: 0,
|
|
title: { text: 'Messages' },
|
|
opposite: true
|
|
}],
|
|
|
|
tooltip: { shared: true },
|
|
|
|
plotOptions: {
|
|
column: {
|
|
grouping: false,
|
|
shadow: false,
|
|
borderWidth: 0
|
|
}
|
|
},
|
|
|
|
xAxis: {
|
|
categories: other_channel_names
|
|
},
|
|
|
|
series: [{
|
|
name: 'Messages',
|
|
color: 'rgba(126,86,134,0.9)',
|
|
data: other_message_numbers,
|
|
pointPadding: 0.0
|
|
},{
|
|
name: 'Members',
|
|
color: 'rgba(165,170,217,1)',
|
|
data: other_member_numbers,
|
|
pointPadding: 0.2,
|
|
yAxis: 1
|
|
}]
|
|
});
|
|
|
|
var msg1 = [{name: 'Messages', data: []}];
|
|
for(var i = 0; i < 24; i++) {
|
|
msg1[0].data.push(stats.messages.hours[i]);
|
|
}
|
|
var msgHourlyChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'msgHourlyStats'
|
|
},
|
|
title: {
|
|
text: 'Hourly Stats'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
|
|
'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
|
|
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
|
|
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
|
|
]
|
|
},
|
|
yAxis: {
|
|
title: { text: '' },
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}]
|
|
},
|
|
series: msg1
|
|
});
|
|
|
|
var msg2 = [{name: 'Messages', data: []}];
|
|
msg2[0].data.push(stats.messages.dow['Sun']);
|
|
msg2[0].data.push(stats.messages.dow['Mon']);
|
|
msg2[0].data.push(stats.messages.dow['Tue']);
|
|
msg2[0].data.push(stats.messages.dow['Wed']);
|
|
msg2[0].data.push(stats.messages.dow['Thu']);
|
|
msg2[0].data.push(stats.messages.dow['Fri']);
|
|
msg2[0].data.push(stats.messages.dow['Sat']);
|
|
|
|
var msgDowChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'msgDowStats'
|
|
},
|
|
title: {
|
|
text: 'Day of Week Stats'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
|
|
]
|
|
},
|
|
yAxis: {
|
|
title: { text: '' },
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}]
|
|
},
|
|
series: msg2
|
|
});
|
|
|
|
|
|
var numCharts = 0,
|
|
usrHourlyCharts = [],
|
|
usrDowCharts = [],
|
|
maxMessages = 0;
|
|
stats.users.sort(function(a, b){
|
|
if(a.name < b.name) { return -1; }
|
|
if(a.name > b.name) { return 1; }
|
|
return 0;
|
|
});
|
|
|
|
for(var i = 0; i < stats.users.length; i++) {
|
|
for(var j = 0; j < 24; j++) {
|
|
if(stats.users[i].messages.hours[j] > maxMessages) {
|
|
maxMessages = stats.users[i].messages.hours[j];
|
|
}
|
|
}
|
|
}
|
|
while((numCharts*10) < stats.users.length) {
|
|
var usrList = [],
|
|
usrHourlyActivity = [],
|
|
usrDowActivity = [];
|
|
for(var i = (numCharts*10); i < 10+(numCharts*10); i++) {
|
|
if(i < stats.users.length) {
|
|
usrList.push(stats.users[i].name);
|
|
for(var j = 0; j < 24; j++) {
|
|
usrHourlyActivity.push({
|
|
x: j,
|
|
y: (i - (numCharts*10)),
|
|
value: stats.users[i].messages.hours[j]
|
|
});
|
|
}
|
|
dowArr=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
|
for(var dowI = 0; dowI < 7; dowI++) {
|
|
usrDowActivity.push({
|
|
x: dowI,
|
|
y: (i - (numCharts*10)),
|
|
value: stats.users[i].messages.dow[dowArr[dowI]]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
B("#userHourlyStats").append(B("<div>").attr('id','usrHourlyStats-'+numCharts));
|
|
B("#userDowStats").append(B("<div>").attr('id','usrDowStats-'+numCharts));
|
|
|
|
usrHourlyCharts.push(new Highcharts.Chart({
|
|
chart: {
|
|
type: 'heatmap',
|
|
renderTo: 'usrHourlyStats-'+numCharts
|
|
},
|
|
title: {
|
|
text: 'Hourly Activity by User'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'00:00','01:00','02:00','03:00','04:00','05:00',
|
|
'06:00','07:00','08:00','09:00','10:00','11:00',
|
|
'12:00','13:00','14:00','15:00','16:00','17:00',
|
|
'18:00','19:00','20:00','21:00','22:00','23:00'
|
|
]
|
|
},
|
|
yAxis: {
|
|
categories: usrList,
|
|
title: null
|
|
},
|
|
colorAxis: {
|
|
stops: [
|
|
[0, '#3060cf'],
|
|
[0.5, '#fffbbc'],
|
|
[0.9, '#c4463a']
|
|
],
|
|
min: 0,
|
|
max: maxMessages
|
|
},
|
|
series: [{
|
|
borderWidth: 1,
|
|
data: usrHourlyActivity,
|
|
name: "Messages",
|
|
tooltip: {
|
|
pointFormatter: function() {
|
|
if(this.x < 10) {
|
|
return this.series.yAxis.categories[this.y] + " - 0"+this.x+":00 ("+this.value+" messages)";
|
|
}
|
|
return this.series.yAxis.categories[this.y] + " - "+this.x+":00 ("+this.value+" messages)";
|
|
}
|
|
}
|
|
}]
|
|
}));
|
|
|
|
usrDowCharts.push(new Highcharts.Chart({
|
|
chart: {
|
|
type: 'heatmap',
|
|
renderTo: 'usrDowStats-'+numCharts
|
|
},
|
|
title: {
|
|
text: 'Day Of Week Activity by User'
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
|
|
]
|
|
},
|
|
yAxis: {
|
|
categories: usrList,
|
|
title: null
|
|
},
|
|
colorAxis: {
|
|
stops: [
|
|
[0, '#3060cf'],
|
|
[0.5, '#fffbbc'],
|
|
[0.9, '#c4463a']
|
|
],
|
|
min: 0,
|
|
max: maxMessages
|
|
},
|
|
series: [{
|
|
borderWidth: 1,
|
|
data: usrDowActivity,
|
|
name: "Messages",
|
|
tooltip: {
|
|
pointFormatter: function() {
|
|
if(this.x < 10) {
|
|
return this.series.yAxis.categories[this.y] + " - 0"+this.x+":00 ("+this.value+" messages)";
|
|
}
|
|
return this.series.yAxis.categories[this.y] + " - "+this.x+":00 ("+this.value+" messages)";
|
|
}
|
|
}
|
|
}]
|
|
}));
|
|
numCharts++;
|
|
}
|
|
|
|
B('#userStats').addClass('hidden');
|
|
B('#messageStats').addClass('hidden');
|
|
B('#userDowStats').addClass('hidden');
|
|
});
|