mirror/Plan
2
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-01-06 15:44:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added chart files and tested players chart

Browse Source
This commit is contained in:
Rsl1122 2019-06-09 11:33:37 +03:00
parent 40f9dd52db
commit 252136fabf
20 changed files with 973 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css
View File

@ -12084,13 +12084,13 @@ a:focus {
.chart-area {
position: relative;
height: 10rem;
height: 12rem;
width: 100%;
}
@media (min-width: 768px) {
.chart-area {
height: 20rem;
height: 22rem;
}
}

25
Plan/common/src/main/resources/assets/plan/web/js/charts/activityPie.js Normal file
View File

@ -0,0 +1,25 @@
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]
});
}

41
Plan/common/src/main/resources/assets/plan/web/js/charts/diskGraph.js Normal file
View File

@ -0,0 +1,41 @@
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
});
}

101
Plan/common/src/main/resources/assets/plan/web/js/charts/healthGauge.js Normal file
View File

@ -0,0 +1,101 @@
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';
}
}

40
Plan/common/src/main/resources/assets/plan/web/js/charts/horizontalBarGraph.js Normal file
View File

@ -0,0 +1,40 @@
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
});
}

36
Plan/common/src/main/resources/assets/plan/web/js/charts/lineGraph.js Normal file
View File

@ -0,0 +1,36 @@
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
});
}

28
Plan/common/src/main/resources/assets/plan/web/js/charts/onlineActivityCalendar.js Normal file
View File

@ -0,0 +1,28 @@
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);
}

72
Plan/common/src/main/resources/assets/plan/web/js/charts/performanceGraph.js Normal file
View File

@ -0,0 +1,72 @@
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]
});
}

38
Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraph.js Normal file
View File

@ -0,0 +1,38 @@
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]
});
}

41
Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraphNoNav.js Normal file
View File

@ -0,0 +1,41 @@
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]
});
}

30
Plan/common/src/main/resources/assets/plan/web/js/charts/punchCard.js Normal file
View File

@ -0,0 +1,30 @@
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]
});
}

60
Plan/common/src/main/resources/assets/plan/web/js/charts/resourceGraph.js Normal file
View File

@ -0,0 +1,60 @@
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]
});
}

53
Plan/common/src/main/resources/assets/plan/web/js/charts/serverPie.js Normal file
View File

@ -0,0 +1,53 @@
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;
}

30
Plan/common/src/main/resources/assets/plan/web/js/charts/sessionCalendar.js Normal file
View File

@ -0,0 +1,30 @@
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);
}

40
Plan/common/src/main/resources/assets/plan/web/js/charts/stackGraph.js Normal file
View File

@ -0,0 +1,40 @@
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
});
}

54
Plan/common/src/main/resources/assets/plan/web/js/charts/tpsGraph.js Normal file
View File

@ -0,0 +1,54 @@
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]
});
}

60
Plan/common/src/main/resources/assets/plan/web/js/charts/worldGraph.js Normal file
View File

@ -0,0 +1,60 @@
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]
});
}

21
Plan/common/src/main/resources/assets/plan/web/js/charts/worldMap.js Normal file
View File

@ -0,0 +1,21 @@
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]
});
}

70
Plan/common/src/main/resources/assets/plan/web/js/charts/worldPie.js Normal file
View File

@ -0,0 +1,70 @@
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
}
});
}
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;
}

136
Plan/common/src/main/resources/assets/plan/web/server.html
View File

@ -25,10 +25,13 @@
</head>
<body id="page-top">
<script>
var worldPieColors = [${worldPieColors}];
var gmPieColors = [${gmPieColors}];
</script>
<div class="page-loader">
<span class="loader"></span>
<p class="loader-text">Please wait..</span>
<span class="loader-text">Please wait..</span>
</div>
<!-- Page Wrapper -->
@ -172,9 +175,7 @@
class="fas fa-fw fa-chart-area col-blue"></i>
Online Activity</h6>
</div>
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
<div class="chart-area" id="playerChartWeek"></div>
</div>
</div>
@ -1482,9 +1483,17 @@
<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<!-- Page level custom scripts -->
<script src="js/server-values.js"></script>
<script src="js/charts/playerGraph.js"></script>
<script>
setLoadingText('Calculating values..');
@ -1794,6 +1803,123 @@
}, null
);
setLoadingText('Rendering graphs..');
// TODO remove
var v = {
colors: {
playersOnline: '${playersGraphColor}',
newPlayers: '#8BC34A',
tpsLow: '${tpsLowColor}',
tpsMed: '${tpsMediumColor}',
tpsHigh: '${tpsHighColor}',
cpu: '#e0d264',
ram: '#7dcc24',
entities: '#ac69ef',
chunks: '#b58310',
geolocationsLow: '${worldMapColLow}',
geolocationsHigh: '${worldMapColHigh}',
punchCard: '#222',
maxPing: '${maxPingColor}',
minPing: '${minPingColor}',
avgPing: '${avgPingColor}'
},
values: {
tpsMed: ${tpsMedium},
tpsHigh: ${tpsHigh},
diskMed: ${diskMedium},
diskHigh: ${diskHigh},
firstDay: ${firstDay}
},
data: {
playersOnline: ${playersOnlineSeries},
uniquePlayers: ${uniquePlayersSeries},
newPlayers: ${newPlayersSeries},
tps: ${tpsSeries},
cpu: ${cpuSeries},
ram: ${ramSeries},
entities: ${entitySeries},
chunks: ${chunkSeries},
activityPie: ${activityPieSeries},
worldPie: ${worldSeries},
worldPieDrillDown: ${gmSeries},
geolocations: ${geoMapSeries},
punchCard: ${punchCardSeries},
activityStack: ${activityStackSeries},
activityStackCategories: ${activityStackCategories},
healthIndex: ${healthIndex},
calendar: ${calendarSeries},
countryCategories: ${countryCategories},
country: ${countrySeries},
avgPing: ${avgPingSeries},
maxPing: ${maxPingSeries},
minPing: ${minPingSeries},
disk: ${diskSeries}
}
};
// HighCharts Series
var s = {
name: {
playersOnline: 'Players Online',
uniquePlayers: 'Unique Players',
newPlayers: 'New Players',
tps: 'TPS',
cpu: 'CPU Usage (%)',
ram: 'RAM Usage (Mb)',
entities: 'Loaded Entities',
chunks: 'Loaded Chunks',
maxPing: 'Worst Ping',
minPing: 'Best Ping',
avgPing: 'Average Ping',
disk: 'Free Disk Space (Mb)'
},
tooltip: {
twoDecimals: {
valueDecimals: 2
},
zeroDecimals: {
valueDecimals: 0
}
},
type: {
areaSpline: 'areaspline',
spline: 'spline'
},
zones: {
tps: [{
value: v.values.tpsMed,
color: v.colors.tpsLow
}, {
value: v.values.tpsHigh,
color: v.colors.tpsMed
}, {
value: 30,
color: v.colors.tpsHigh
}],
disk: [{
value: v.values.diskMed,
color: v.colors.tpsLow
}, {
value: v.values.diskHigh,
color: v.colors.tpsMed
}, {
value: Number.MAX_VALUE,
color: v.colors.tpsHigh
}]
}
};
var series = {
playersOnline: {
name: s.name.playersOnline,
type: s.type.areaSpline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.playersOnline,
color: v.colors.playersOnline,
yAxis: 0
}
};
playersChart('playerChartWeek', series.playersOnline, 3);
setLoadingText('Sorting players table..');
jsonRequest("../json/players?serverName=${serverName}", function (playersTableJson, error) {
if (playersTableJson) {