mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-12-15 05:41:51 +08:00
Added yAxis to all Performance tab charts (#492) Far more readable.
This commit is contained in:
parent
be58984d64
commit
431d758212
@ -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]
|
||||
});
|
||||
}
|
@ -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]
|
||||
});
|
||||
}
|
@ -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]
|
||||
});
|
||||
}
|
@ -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]
|
||||
});
|
||||
}
|
@ -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]);
|
||||
|
Loading…
Reference in New Issue
Block a user