Added yAxis to all Performance tab charts (#492) Far more readable.

This commit is contained in:
Rsl1122 2018-02-10 20:25:19 +02:00
parent be58984d64
commit 431d758212
5 changed files with 296 additions and 165 deletions

View File

@ -1,32 +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: ''},
legend: {
enabled: true,
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'
}]
},
series: [playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries]
});
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]
});
}

View File

@ -1,40 +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
}
},
legend: {
enabled: true,
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'
}]
},
series: [cpuSeries, ramSeries, playersOnlineSeries]
});
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]
});
}

View File

@ -1,40 +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
}
},
legend: {
enabled: true,
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'
}]
},
series: [tpsSeries, playersOnlineSeries]
});
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]
});
}

View File

@ -1,40 +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
}
},
legend: {
enabled: true,
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'
}]
},
series: [entitySeries, chunkSeries, playersOnlineSeries]
});
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]
});
}

View File

@ -962,22 +962,6 @@
// Replaced Variables
var v = {
data: {
playersOnline: ${playersOnlineSeries},
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}
},
colors: {
playersOnline: '${playersGraphColor}',
tpsLow: '${tpsLowColor}',
@ -994,8 +978,23 @@
values: {
tpsMed: ${tpsMedium},
tpsHigh: ${tpsHigh}
},
data: {
playersOnline: ${playersOnlineSeries},
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}
}
};
// HighCharts Series
@ -1039,42 +1038,80 @@
type: s.type.areaSpline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.playersOnline,
color: v.colors.playersOnline
color: v.colors.playersOnline,
yAxis: 0
},
tps: {
name: s.name.tps,
type: s.type.spline,
zones: s.zones.tps,
tooltip: s.tooltip.twoDecimals,
data: v.data.tps
data: v.data.tps,
yAxis: 1
},
cpu: {
name: s.name.cpu,
type: s.type.spline,
tooltip: s.tooltip.twoDecimals,
data: v.data.cpu,
color: v.colors.cpu
color: v.colors.cpu,
yAxis: 2
},
cpu_alt: {
name: s.name.cpu,
type: s.type.spline,
tooltip: s.tooltip.twoDecimals,
data: v.data.cpu,
color: v.colors.cpu,
yAxis: 1
},
ram: {
name: s.name.ram,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.ram,
color: v.colors.ram
color: v.colors.ram,
yAxis: 3
},
ram_alt: {
name: s.name.ram,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.ram,
color: v.colors.ram,
yAxis: 2
},
entities: {
name: s.name.entities,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.entities,
color: v.colors.entities
color: v.colors.entities,
yAxis: 4
},
entities_alt: {
name: s.name.entities,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.entities,
color: v.colors.entities,
yAxis: 1
},
chunks: {
name: s.name.chunks,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.chunks,
colors: v.colors.chunks
color: v.colors.chunks,
yAxis: 5
},
chunks_alt: {
name: s.name.chunks,
type: s.type.spline,
tooltip: s.tooltip.zeroDecimals,
data: v.data.chunks,
color: v.colors.chunks,
yAxis: 2
},
activityPie: {
name: 'Players',
@ -1136,8 +1173,8 @@
playersChart('playerChartMonth', series.playersOnline, 2);
performanceChart('performanceGraph', series.playersOnline, series.tps, series.cpu, series.ram, series.entities, series.chunks);
tpsChart('tpsGraph', series.tps, series.playersOnline);
resourceChart('resourceGraph', series.cpu, series.ram, series.playersOnline);
worldChart('worldGraph', series.entities, series.chunks, series.playersOnline);
resourceChart('resourceGraph', series.cpu_alt, series.ram_alt, series.playersOnline);
worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline);
worldMap('worldMap', v.colors.geolocationsLow, v.colors.geolocationsHigh, series.geolocations);
punchCard('punchCard', series.punchCard);
healthGauge('healthGauge', [v.data.healthIndex]);