mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-11-03 01:10:17 +01:00
Moved all graphs to single file
- This reduced site load from 6,5s to 3s
This commit is contained in:
Rsl1122
parent
415ac58c1a
commit
693884a7c7
@ -224,24 +224,7 @@ public class HtmlExport extends SpecificExport {
|
||||
"web/js/admin.js",
|
||||
"web/js/helpers.js",
|
||||
"web/js/script.js",
|
||||
"web/js/charts/activityPie.js",
|
||||
"web/js/charts/lineGraph.js",
|
||||
"web/js/charts/horizontalBarGraph.js",
|
||||
"web/js/charts/stackGraph.js",
|
||||
"web/js/charts/performanceGraph.js",
|
||||
"web/js/charts/playerGraph.js",
|
||||
"web/js/charts/playerGraphNoNav.js",
|
||||
"web/js/charts/resourceGraph.js",
|
||||
"web/js/charts/diskGraph.js",
|
||||
"web/js/charts/tpsGraph.js",
|
||||
"web/js/charts/worldGraph.js",
|
||||
"web/js/charts/worldMap.js",
|
||||
"web/js/charts/punchCard.js",
|
||||
"web/js/charts/serverPie.js",
|
||||
"web/js/charts/worldPie.js",
|
||||
"web/js/charts/healthGauge.js",
|
||||
"web/js/charts/sessionCalendar.js",
|
||||
"web/js/charts/onlineActivityCalendar.js"
|
||||
"web/js/graphs.js"
|
||||
};
|
||||
copyFromJar(resources);
|
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
function activityPie(id, activitySeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {text: ''},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.y}</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
series: [activitySeries]
|
||||
});
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
function diskChart(id, series) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Mb';
|
||||
}
|
||||
},
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
@ -1,101 +0,0 @@
|
||||
function healthGauge(id, healthData) {
|
||||
var gaugeOptions = {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge'
|
||||
},
|
||||
|
||||
title: null,
|
||||
|
||||
pane: {
|
||||
center: ['50%', '85%'],
|
||||
size: '140%',
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
background: {
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
|
||||
innerRadius: '60%',
|
||||
outerRadius: '100%',
|
||||
shape: 'arc'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
stops: [
|
||||
[0.1, '#DF5353'], // red
|
||||
[0.5, '#DDDF0D'], // yellow
|
||||
[0.9, '#55BF3B'] // green
|
||||
],
|
||||
lineWidth: 0,
|
||||
minorTickInterval: null,
|
||||
tickAmount: 2,
|
||||
title: {
|
||||
y: -70
|
||||
},
|
||||
labels: {
|
||||
y: 16
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
dataLabels: {
|
||||
y: 5,
|
||||
borderWidth: 0,
|
||||
useHTML: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chartSpeed = Highcharts.chart(id, Highcharts.merge(gaugeOptions, {
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: {
|
||||
text: 'Server Health'
|
||||
},
|
||||
visible: false
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'health',
|
||||
data: healthData,
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
return '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||||
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">' + (this.y).toFixed(2) + '</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver">' + getLabel(this.y) + '</span></div>';
|
||||
}
|
||||
}
|
||||
}]
|
||||
|
||||
}));
|
||||
}
|
||||
|
||||
function getLabel(index) {
|
||||
if (index >= 80) {
|
||||
return 'Very Healthy';
|
||||
}
|
||||
if (index >= 60) {
|
||||
return 'Healthy';
|
||||
}
|
||||
if (index >= 50) {
|
||||
return 'Good';
|
||||
}
|
||||
if (index >= 30) {
|
||||
return 'OK';
|
||||
}
|
||||
if (index >= 0) {
|
||||
return 'Poor';
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
function horizontalBarChart(id, categories, series, text) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: text,
|
||||
align: 'high'
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
function lineChart(id, series) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
function onlineActivityCalendar(id, events, firstDay) {
|
||||
$(id).fullCalendar({
|
||||
eventColor: '#2196F3',
|
||||
firstDay: firstDay,
|
||||
|
||||
eventRender: function (eventObj, $el) {
|
||||
$el.popover({
|
||||
content: eventObj.title,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
container: 'body'
|
||||
});
|
||||
},
|
||||
|
||||
events: events,
|
||||
|
||||
height: 'parent',
|
||||
header: {
|
||||
left: 'title',
|
||||
center: '',
|
||||
right: 'month prev,next'
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$(id).fullCalendar('render')
|
||||
}, 1000);
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
title: {text: ''},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' P';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' TPS';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '%';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' MB';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' E';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' C';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries]
|
||||
});
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
function playersChart(id, playersOnlineSeries, sel) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: sel,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
function playersChartNoNav(id, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 3,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
navigator: {
|
||||
enabled: false
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
function punchCard(id, punchcardSeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
defaultSeriesType: 'scatter'
|
||||
},
|
||||
title: {text: ''},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
hour: '%I %P',
|
||||
day: '%H %P'
|
||||
},
|
||||
tickInterval: 3600000
|
||||
},
|
||||
time: {
|
||||
timezoneOffset: 0
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: "Day of the Week"
|
||||
},
|
||||
reversed: true,
|
||||
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Activity: {point.z}'
|
||||
},
|
||||
series: [punchcardSeries]
|
||||
});
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
function resourceChart(id, cpuSeries, ramSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '%';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Mb';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [cpuSeries, ramSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
function serverPie(id, serverSeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
|
||||
}
|
||||
},
|
||||
series: [serverSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function formatTimeAmount(ms) {
|
||||
var out = "";
|
||||
|
||||
var seconds = Math.floor(ms / 1000);
|
||||
|
||||
var dd = Math.floor(seconds / 86400);
|
||||
seconds -= (dd * 86400);
|
||||
var dh = Math.floor(seconds / 3600);
|
||||
seconds -= (dh * 3600);
|
||||
var dm = Math.floor(seconds / 60);
|
||||
seconds -= (dm * 60);
|
||||
seconds = Math.floor(seconds);
|
||||
if (dd !== 0) {
|
||||
out += dd.toString() + "d ";
|
||||
}
|
||||
if (dh !== 0) {
|
||||
out += dh.toString() + "h ";
|
||||
}
|
||||
if (dm !== 0) {
|
||||
out += dm.toString() + "m ";
|
||||
}
|
||||
out += seconds.toString() + "s ";
|
||||
|
||||
return out;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
function sessionCalendar(id, events, firstDay) {
|
||||
$(id).fullCalendar({
|
||||
eventColor: '#009688',
|
||||
eventLimit: 4,
|
||||
firstDay: firstDay,
|
||||
|
||||
eventRender: function (eventObj, $el) {
|
||||
$el.popover({
|
||||
content: eventObj.title,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
container: 'body'
|
||||
});
|
||||
},
|
||||
|
||||
events: events,
|
||||
|
||||
navLinks: true,
|
||||
height: 'parent',
|
||||
header: {
|
||||
left: 'title',
|
||||
center: '',
|
||||
right: 'month agendaWeek agendaDay today prev,next'
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$(id).fullCalendar('render')
|
||||
}, 1000);
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
function stackChart(id, categories, series, label) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: label
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
tooltip: {
|
||||
split: true,
|
||||
valueSuffix: ' ' + label
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
function tpsChart(id, tpsSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' TPS';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [tpsSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
function worldChart(id, entitySeries, chunkSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Entities';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Chunks';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [entitySeries, chunkSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
function worldMap(id, colorMin, colorMax, mapSeries) {
|
||||
Highcharts.mapChart(id, {
|
||||
chart: {
|
||||
animation: true
|
||||
},
|
||||
title: {text: ''},
|
||||
|
||||
mapNavigation: {
|
||||
enabled: true,
|
||||
enableDoubleClickZoomTo: true
|
||||
},
|
||||
|
||||
colorAxis: {
|
||||
min: 1,
|
||||
type: 'logarithmic',
|
||||
minColor: colorMin,
|
||||
maxColor: colorMax
|
||||
},
|
||||
series: [mapSeries]
|
||||
});
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
function worldPie(id, worldSeries, gmSeries) {
|
||||
var defaultTitle = '';
|
||||
var defaultSubtitle = 'Click the slices to view used GameMode';
|
||||
|
||||
var chart = Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie',
|
||||
events: {
|
||||
drilldown: function (e) {
|
||||
chart.setTitle({text: '' + e.point.name}, {text: ''});
|
||||
},
|
||||
drillup: function (e) {
|
||||
chart.setTitle({text: defaultTitle}, {text: defaultSubtitle});
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {text: defaultTitle},
|
||||
subtitle: {
|
||||
text: defaultSubtitle
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
|
||||
}
|
||||
},
|
||||
series: [worldSeries],
|
||||
drilldown: {
|
||||
series: gmSeries.map(function (d) {
|
||||
return {name: d.name, id: d.id, colors: gmPieColors, data: d.data}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatTimeAmount(ms) {
|
||||
var out = "";
|
||||
|
||||
var seconds = Math.floor(ms / 1000);
|
||||
|
||||
var dd = Math.floor(seconds / 86400);
|
||||
seconds -= (dd * 86400);
|
||||
var dh = Math.floor(seconds / 3600);
|
||||
seconds -= (dh * 3600);
|
||||
var dm = Math.floor(seconds / 60);
|
||||
seconds -= (dm * 60);
|
||||
seconds = Math.floor(seconds);
|
||||
if (dd !== 0) {
|
||||
out += dd.toString() + "d ";
|
||||
}
|
||||
if (dh !== 0) {
|
||||
out += dh.toString() + "h ";
|
||||
}
|
||||
if (dm !== 0) {
|
||||
out += dm.toString() + "m ";
|
||||
}
|
||||
out += seconds.toString() + "s ";
|
||||
|
||||
return out;
|
||||
}
|
||||
600
Plan/common/src/main/resources/assets/plan/web/js/graphs.js
Normal file
600
Plan/common/src/main/resources/assets/plan/web/js/graphs.js
Normal file
@ -0,0 +1,600 @@
|
||||
var linegraphButtons = [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
}, {
|
||||
type: 'hour',
|
||||
count: 24,
|
||||
text: '24h'
|
||||
}, {
|
||||
type: 'day',
|
||||
count: 7,
|
||||
text: '7d'
|
||||
}, {
|
||||
type: 'month',
|
||||
count: 1,
|
||||
text: '30d'
|
||||
}, {
|
||||
type: 'all',
|
||||
text: 'All'
|
||||
}];
|
||||
|
||||
function activityPie(id, activitySeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {text: ''},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.y}</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
series: [activitySeries]
|
||||
});
|
||||
}
|
||||
|
||||
function diskChart(id, series) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
yAxis: {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Mb';
|
||||
}
|
||||
},
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
|
||||
function horizontalBarChart(id, categories, series, text) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: text,
|
||||
align: 'high'
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
|
||||
function lineChart(id, series) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
|
||||
function onlineActivityCalendar(id, events, firstDay) {
|
||||
$(id).fullCalendar({
|
||||
eventColor: '#2196F3',
|
||||
firstDay: firstDay,
|
||||
|
||||
eventRender: function (eventObj, $el) {
|
||||
$el.popover({
|
||||
content: eventObj.title,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
container: 'body'
|
||||
});
|
||||
},
|
||||
|
||||
events: events,
|
||||
|
||||
height: 'parent',
|
||||
header: {
|
||||
left: 'title',
|
||||
center: '',
|
||||
right: 'month prev,next'
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$(id).fullCalendar('render')
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 2,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
title: {text: ''},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' P';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' TPS';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '%';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' MB';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' E';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' C';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function playersChart(id, playersOnlineSeries, sel) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: sel,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function playersChartNoNav(id, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 3,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
navigator: {
|
||||
enabled: false
|
||||
},
|
||||
yAxis: {
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
series: [playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function punchCard(id, punchcardSeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
defaultSeriesType: 'scatter'
|
||||
},
|
||||
title: {text: ''},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
dateTimeLabelFormats: {
|
||||
hour: '%I %P',
|
||||
day: '%H %P'
|
||||
},
|
||||
tickInterval: 3600000
|
||||
},
|
||||
time: {
|
||||
timezoneOffset: 0
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: "Day of the Week"
|
||||
},
|
||||
reversed: true,
|
||||
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Activity: {point.z}'
|
||||
},
|
||||
series: [punchcardSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function resourceChart(id, cpuSeries, ramSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '%';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Mb';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [cpuSeries, ramSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function serverPie(id, serverSeries) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
|
||||
}
|
||||
},
|
||||
series: [serverSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function formatTimeAmount(ms) {
|
||||
var out = "";
|
||||
|
||||
var seconds = Math.floor(ms / 1000);
|
||||
|
||||
var dd = Math.floor(seconds / 86400);
|
||||
seconds -= (dd * 86400);
|
||||
var dh = Math.floor(seconds / 3600);
|
||||
seconds -= (dh * 3600);
|
||||
var dm = Math.floor(seconds / 60);
|
||||
seconds -= (dm * 60);
|
||||
seconds = Math.floor(seconds);
|
||||
if (dd !== 0) {
|
||||
out += dd.toString() + "d ";
|
||||
}
|
||||
if (dh !== 0) {
|
||||
out += dh.toString() + "h ";
|
||||
}
|
||||
if (dm !== 0) {
|
||||
out += dm.toString() + "m ";
|
||||
}
|
||||
out += seconds.toString() + "s ";
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
function sessionCalendar(id, events, firstDay) {
|
||||
$(id).fullCalendar({
|
||||
eventColor: '#009688',
|
||||
eventLimit: 4,
|
||||
firstDay: firstDay,
|
||||
|
||||
eventRender: function (eventObj, $el) {
|
||||
$el.popover({
|
||||
content: eventObj.title,
|
||||
trigger: 'hover',
|
||||
placement: 'top',
|
||||
container: 'body'
|
||||
});
|
||||
},
|
||||
|
||||
events: events,
|
||||
|
||||
navLinks: true,
|
||||
height: 'parent',
|
||||
header: {
|
||||
left: 'title',
|
||||
center: '',
|
||||
right: 'month agendaWeek agendaDay today prev,next'
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$(id).fullCalendar('render')
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stackChart(id, categories, series, label) {
|
||||
Highcharts.chart(id, {
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: label
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
softMax: 2,
|
||||
softMin: 0
|
||||
},
|
||||
tooltip: {
|
||||
split: true,
|
||||
valueSuffix: ' ' + label
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
series: series
|
||||
});
|
||||
}
|
||||
|
||||
function tpsChart(id, tpsSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' TPS';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [tpsSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function worldChart(id, entitySeries, chunkSeries, playersOnlineSeries) {
|
||||
Highcharts.stockChart(id, {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
buttons: linegraphButtons
|
||||
},
|
||||
tooltip: {
|
||||
split: true
|
||||
},
|
||||
title: {text: ''},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.4
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Players';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
opposite: true,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Entities';
|
||||
}
|
||||
}
|
||||
}, {
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + ' Chunks';
|
||||
}
|
||||
}
|
||||
}],
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
series: [entitySeries, chunkSeries, playersOnlineSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function worldMap(id, colorMin, colorMax, mapSeries) {
|
||||
Highcharts.mapChart(id, {
|
||||
chart: {
|
||||
animation: true
|
||||
},
|
||||
title: {text: ''},
|
||||
|
||||
mapNavigation: {
|
||||
enabled: true,
|
||||
enableDoubleClickZoomTo: true
|
||||
},
|
||||
|
||||
colorAxis: {
|
||||
min: 1,
|
||||
type: 'logarithmic',
|
||||
minColor: colorMin,
|
||||
maxColor: colorMax
|
||||
},
|
||||
series: [mapSeries]
|
||||
});
|
||||
}
|
||||
|
||||
function worldPie(id, worldSeries, gmSeries) {
|
||||
var defaultTitle = '';
|
||||
var defaultSubtitle = 'Click the slices to view used GameMode';
|
||||
|
||||
var chart = Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie',
|
||||
events: {
|
||||
drilldown: function (e) {
|
||||
chart.setTitle({text: '' + e.point.name}, {text: ''});
|
||||
},
|
||||
drillup: function (e) {
|
||||
chart.setTitle({text: defaultTitle}, {text: defaultSubtitle});
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {text: defaultTitle},
|
||||
subtitle: {
|
||||
text: defaultSubtitle
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
showInLegend: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.point.name + ':</b> ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)';
|
||||
}
|
||||
},
|
||||
series: [worldSeries],
|
||||
drilldown: {
|
||||
series: gmSeries.map(function (d) {
|
||||
return {name: d.name, id: d.id, colors: gmPieColors, data: d.data}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1339,22 +1339,8 @@
|
||||
|
||||
<!-- Page level custom scripts -->
|
||||
<script src="js/server-values.js"></script>
|
||||
<script src="js/charts/playerGraph.js"></script>
|
||||
<script src="js/charts/punchCard.js"></script>
|
||||
<script src="js/charts/healthGauge.js"></script>
|
||||
<script src="js/charts/activityPie.js"></script>
|
||||
<script src="js/charts/lineGraph.js"></script>
|
||||
<script src="js/charts/stackGraph.js"></script>
|
||||
<script src="js/charts/worldPie.js"></script>
|
||||
<script src="js/charts/performanceGraph.js"></script>
|
||||
<script src="js/charts/tpsGraph.js"></script>
|
||||
<script src="js/charts/resourceGraph.js"></script>
|
||||
<script src="js/charts/diskGraph.js"></script>
|
||||
<script src="js/charts/worldGraph.js"></script>
|
||||
<script src="js/charts/worldMap.js"></script>
|
||||
<script src="js/charts/onlineActivityCalendar.js"></script>
|
||||
<script src="js/charts/horizontalBarGraph.js"></script>
|
||||
<script src="js/charts/sessionAccordion.js"></script>
|
||||
<script src="js/graphs.js"></script>
|
||||
<script src="js/sessionAccordion.js"></script>
|
||||
|
||||
<script>
|
||||
var x = document.getElementById("content");
|
||||
|
||||
@ -73,24 +73,7 @@ abstract class Mocker {
|
||||
"web/js/sb-admin-2.js",
|
||||
"web/js/server-values.js",
|
||||
"web/js/xmlhttprequests.js",
|
||||
"web/js/charts/activityPie.js",
|
||||
"web/js/charts/lineGraph.js",
|
||||
"web/js/charts/horizontalBarGraph.js",
|
||||
"web/js/charts/stackGraph.js",
|
||||
"web/js/charts/performanceGraph.js",
|
||||
"web/js/charts/playerGraph.js",
|
||||
"web/js/charts/playerGraphNoNav.js",
|
||||
"web/js/charts/resourceGraph.js",
|
||||
"web/js/charts/diskGraph.js",
|
||||
"web/js/charts/tpsGraph.js",
|
||||
"web/js/charts/worldGraph.js",
|
||||
"web/js/charts/worldMap.js",
|
||||
"web/js/charts/punchCard.js",
|
||||
"web/js/charts/serverPie.js",
|
||||
"web/js/charts/worldPie.js",
|
||||
"web/js/charts/healthGauge.js",
|
||||
"web/js/charts/sessionCalendar.js",
|
||||
"web/js/charts/onlineActivityCalendar.js",
|
||||
"web/js/graphs.js",
|
||||
|
||||
"web/vendor/bootstrap/js/bootstrap.bundle.min.js",
|
||||
"web/vendor/jquery/jquery.min.js",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user