mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2025-02-02 21:41:28 +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/admin.js",
|
||||||
"web/js/helpers.js",
|
"web/js/helpers.js",
|
||||||
"web/js/script.js",
|
"web/js/script.js",
|
||||||
"web/js/charts/activityPie.js",
|
"web/js/graphs.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"
|
|
||||||
};
|
};
|
||||||
copyFromJar(resources);
|
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 -->
|
<!-- Page level custom scripts -->
|
||||||
<script src="js/server-values.js"></script>
|
<script src="js/server-values.js"></script>
|
||||||
<script src="js/charts/playerGraph.js"></script>
|
<script src="js/graphs.js"></script>
|
||||||
<script src="js/charts/punchCard.js"></script>
|
<script src="js/sessionAccordion.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>
|
<script>
|
||||||
var x = document.getElementById("content");
|
var x = document.getElementById("content");
|
||||||
|
|||||||
@ -73,24 +73,7 @@ abstract class Mocker {
|
|||||||
"web/js/sb-admin-2.js",
|
"web/js/sb-admin-2.js",
|
||||||
"web/js/server-values.js",
|
"web/js/server-values.js",
|
||||||
"web/js/xmlhttprequests.js",
|
"web/js/xmlhttprequests.js",
|
||||||
"web/js/charts/activityPie.js",
|
"web/js/graphs.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/vendor/bootstrap/js/bootstrap.bundle.min.js",
|
"web/vendor/bootstrap/js/bootstrap.bundle.min.js",
|
||||||
"web/vendor/jquery/jquery.min.js",
|
"web/vendor/jquery/jquery.min.js",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user