mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2025-03-10 13:49:17 +01:00
Graphs now load again similarly to overview content
This commit is contained in:
parent
b5365d2321
commit
be92653508
@ -1,4 +1,4 @@
|
|||||||
var linegraphButtons = [{
|
const linegraphButtons = [{
|
||||||
type: 'hour',
|
type: 'hour',
|
||||||
count: 12,
|
count: 12,
|
||||||
text: '12h'
|
text: '12h'
|
||||||
@ -19,7 +19,7 @@ var linegraphButtons = [{
|
|||||||
text: 'All'
|
text: 'All'
|
||||||
}];
|
}];
|
||||||
|
|
||||||
var graphs = [];
|
const graphs = [];
|
||||||
window.calendars = {};
|
window.calendars = {};
|
||||||
|
|
||||||
function activityPie(id, activitySeries) {
|
function activityPie(id, activitySeries) {
|
||||||
@ -406,15 +406,15 @@ function serverPie(id, serverSeries) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formatTimeAmount(ms) {
|
function formatTimeAmount(ms) {
|
||||||
var out = "";
|
let out = "";
|
||||||
|
|
||||||
var seconds = Math.floor(ms / 1000);
|
let seconds = Math.floor(ms / 1000);
|
||||||
|
|
||||||
var dd = Math.floor(seconds / 86400);
|
const dd = Math.floor(seconds / 86400);
|
||||||
seconds -= (dd * 86400);
|
seconds -= (dd * 86400);
|
||||||
var dh = Math.floor(seconds / 3600);
|
const dh = Math.floor(seconds / 3600);
|
||||||
seconds -= (dh * 3600);
|
seconds -= (dh * 3600);
|
||||||
var dm = Math.floor(seconds / 60);
|
const dm = Math.floor(seconds / 60);
|
||||||
seconds -= (dm * 60);
|
seconds -= (dm * 60);
|
||||||
seconds = Math.floor(seconds);
|
seconds = Math.floor(seconds);
|
||||||
if (dd !== 0) {
|
if (dd !== 0) {
|
||||||
@ -610,9 +610,9 @@ function worldMap(id, colorMin, colorMax, mapSeries) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function worldPie(id, worldSeries, gmSeries) {
|
function worldPie(id, worldSeries, gmSeries) {
|
||||||
var defaultTitle = '';
|
const defaultTitle = '';
|
||||||
var defaultSubtitle = 'Click to expand';
|
const defaultSubtitle = 'Click to expand';
|
||||||
var chart = Highcharts.chart(id, {
|
const chart = Highcharts.chart(id, {
|
||||||
chart: {
|
chart: {
|
||||||
plotBackgroundColor: null,
|
plotBackgroundColor: null,
|
||||||
plotBorderWidth: null,
|
plotBorderWidth: null,
|
||||||
|
@ -345,4 +345,237 @@ function loadPerformanceValues(json, error) {
|
|||||||
element.querySelector('#data_low_tps_entities').innerText = data.low_tps_entities;
|
element.querySelector('#data_low_tps_entities').innerText = data.low_tps_entities;
|
||||||
element.querySelector('#data_low_tps_chunks').innerText = data.low_tps_chunks;
|
element.querySelector('#data_low_tps_chunks').innerText = data.low_tps_chunks;
|
||||||
element.querySelector('#data_low_tps_cpu').innerText = data.low_tps_cpu;
|
element.querySelector('#data_low_tps_cpu').innerText = data.low_tps_cpu;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptimizedPerformanceGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const zones = {
|
||||||
|
tps: [{
|
||||||
|
value: json.zones.tpsThresholdMed,
|
||||||
|
color: json.colors.low
|
||||||
|
}, {
|
||||||
|
value: json.zones.tpsThresholdHigh,
|
||||||
|
color: json.colors.med
|
||||||
|
}, {
|
||||||
|
value: 30,
|
||||||
|
color: json.colors.high
|
||||||
|
}],
|
||||||
|
disk: [{
|
||||||
|
value: json.zones.diskThresholdMed,
|
||||||
|
color: json.colors.low
|
||||||
|
}, {
|
||||||
|
value: json.zones.tpsThresholdHigh,
|
||||||
|
color: json.colors.med
|
||||||
|
}, {
|
||||||
|
value: Number.MAX_VALUE,
|
||||||
|
color: json.colors.high
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
const dataSeries = mapToDataSeries(json.values);
|
||||||
|
const series = {
|
||||||
|
playersOnline: {
|
||||||
|
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.playersOnline, color: json.colors.playersOnline, yAxis: 0
|
||||||
|
},
|
||||||
|
tps: {
|
||||||
|
name: s.name.tps, type: s.type.spline, color: json.colors.high,
|
||||||
|
zones: zones.tps, tooltip: s.tooltip.twoDecimals, data: dataSeries.tps,
|
||||||
|
yAxis: 1
|
||||||
|
},
|
||||||
|
cpu: {
|
||||||
|
name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
|
||||||
|
data: dataSeries.cpu, color: json.colors.cpu, yAxis: 2
|
||||||
|
},
|
||||||
|
cpu_alt: {
|
||||||
|
name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
|
||||||
|
data: dataSeries.cpu, color: json.colors.cpu, yAxis: 1
|
||||||
|
},
|
||||||
|
ram: {
|
||||||
|
name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.ram, color: json.colors.ram, yAxis: 3
|
||||||
|
},
|
||||||
|
ram_alt: {
|
||||||
|
name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.ram, color: json.colors.ram, yAxis: 2
|
||||||
|
},
|
||||||
|
entities: {
|
||||||
|
name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.entities, color: json.colors.entities, yAxis: 4
|
||||||
|
},
|
||||||
|
entities_alt: {
|
||||||
|
name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.entities, color: json.colors.entities, yAxis: 1
|
||||||
|
},
|
||||||
|
chunks: {
|
||||||
|
name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.chunks, color: json.colors.chunks, yAxis: 5
|
||||||
|
},
|
||||||
|
chunks_alt: {
|
||||||
|
name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: dataSeries.chunks, color: json.colors.chunks, yAxis: 2
|
||||||
|
},
|
||||||
|
disk: {
|
||||||
|
name: s.name.disk, type: s.type.spline, color: json.colors.high,
|
||||||
|
zones: zones.disk, tooltip: s.tooltip.zeroDecimals, data: dataSeries.disk
|
||||||
|
}
|
||||||
|
};
|
||||||
|
playersChart('playersOnlineChart', 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_alt, series.ram_alt, series.playersOnline);
|
||||||
|
worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline);
|
||||||
|
diskChart('diskGraph', [series.disk]);
|
||||||
|
} else if (error) {
|
||||||
|
const errorMessage = `Failed to load graph data: ${error}`;
|
||||||
|
document.getElementById('playersOnlineChart').innerText = errorMessage;
|
||||||
|
document.getElementById('performanceGraph').innerText = errorMessage;
|
||||||
|
document.getElementById('tpsGraph').innerText = errorMessage;
|
||||||
|
document.getElementById('resourceGraph').innerText = errorMessage;
|
||||||
|
document.getElementById('worldGraph').innerText = errorMessage;
|
||||||
|
document.getElementById('diskGraph').innerText = errorMessage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPingGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const series = {
|
||||||
|
avgPing: {
|
||||||
|
name: s.name.avgPing,
|
||||||
|
type: s.type.spline,
|
||||||
|
tooltip: s.tooltip.twoDecimals,
|
||||||
|
data: json.avg_ping_series,
|
||||||
|
color: json.colors.avg
|
||||||
|
},
|
||||||
|
maxPing: {
|
||||||
|
name: s.name.maxPing,
|
||||||
|
type: s.type.spline,
|
||||||
|
tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.max_ping_series,
|
||||||
|
color: json.colors.max
|
||||||
|
},
|
||||||
|
minPing: {
|
||||||
|
name: s.name.minPing,
|
||||||
|
type: s.type.spline,
|
||||||
|
tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.min_ping_series,
|
||||||
|
color: json.colors.min
|
||||||
|
}
|
||||||
|
};
|
||||||
|
lineChart('pingGraph', [series.avgPing, series.maxPing, series.minPing]);
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('pingGraph').innerText = `Failed to load graph data: ${error}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadWorldPie(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const worldSeries = {name: 'World Playtime', colorByPoint: true, data: json.world_series};
|
||||||
|
const gmSeries = json.gm_series;
|
||||||
|
worldPie("worldPie", worldSeries, gmSeries);
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('worldPie').innerText = `Failed to load graph data: ${error}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadActivityGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
activityPie('activityPie', {
|
||||||
|
name: s.name.unit_players, colorByPoint: true, data: json.activity_pie_series
|
||||||
|
});
|
||||||
|
stackChart('activityStackGraph', json.activity_labels, json.activity_series, s.name.unit_players);
|
||||||
|
} else if (error) {
|
||||||
|
const errorMessage = `Failed to load graph data: ${error}`;
|
||||||
|
document.getElementById('activityPie').innerText = errorMessage;
|
||||||
|
document.getElementById('activityStackGraph').innerText = errorMessage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadGeolocationGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const geolocationSeries = {
|
||||||
|
name: s.name.unit_players,
|
||||||
|
type: 'map',
|
||||||
|
mapData: Highcharts.maps['custom/world'],
|
||||||
|
data: json.geolocation_series,
|
||||||
|
joinBy: ['iso-a3', 'code']
|
||||||
|
};
|
||||||
|
const geolocationBarSeries = {
|
||||||
|
color: json.colors.bars,
|
||||||
|
name: s.name.unit_players,
|
||||||
|
data: json.geolocation_bar_series.map(function (bar) {
|
||||||
|
return bar.value
|
||||||
|
})
|
||||||
|
};
|
||||||
|
const geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
|
||||||
|
return bar.label
|
||||||
|
});
|
||||||
|
worldMap('worldMap', json.colors.low, json.colors.high, geolocationSeries);
|
||||||
|
horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], s.name.unit_players);
|
||||||
|
} else if (error) {
|
||||||
|
const errorMessage = `Failed to load graph data: ${error}`;
|
||||||
|
document.getElementById('worldMap').innerText = errorMessage;
|
||||||
|
document.getElementById('countryBarChart').innerText = errorMessage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadUniqueAndNewGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const uniquePlayers = {
|
||||||
|
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.uniquePlayers, color: json.colors.playersOnline
|
||||||
|
};
|
||||||
|
const newPlayers = {
|
||||||
|
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.newPlayers, color: json.colors.newPlayers
|
||||||
|
};
|
||||||
|
dayByDay('uniqueChart', [uniquePlayers, newPlayers]);
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('uniqueChart').innerText = `Failed to load graph data: ${error}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadHourlyUniqueAndNewGraph(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const uniquePlayers = {
|
||||||
|
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.uniquePlayers, color: json.colors.playersOnline
|
||||||
|
};
|
||||||
|
const newPlayers = {
|
||||||
|
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
|
data: json.newPlayers, color: json.colors.newPlayers
|
||||||
|
};
|
||||||
|
dayByDay('hourlyUniqueChart', [uniquePlayers, newPlayers]);
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('uniqueChart').innerText = `Failed to load graph data: ${error}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadServerCalendar(json, error) {
|
||||||
|
if (json) {
|
||||||
|
document.getElementById('calendar').innerText = '';
|
||||||
|
onlineActivityCalendar('#calendar', json.data, json.firstDay);
|
||||||
|
document.getElementById('online-calendar-tab').addEventListener('click', function () {
|
||||||
|
// Wrapping this in a 0ms setTimeout waits for all other event handlers
|
||||||
|
// to finish. We need this because if the calendar is rendered
|
||||||
|
// immediately, it renders for a width of 0.
|
||||||
|
setTimeout(function () {
|
||||||
|
window.calendars.online_activity.render();
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('calendar').innerText = `Failed to load calendar data: ${error}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPunchCard(json, error) {
|
||||||
|
if (json) {
|
||||||
|
const punchCardSeries = {
|
||||||
|
name: 'Relative Join Activity',
|
||||||
|
color: json.color,
|
||||||
|
data: json.punchCard
|
||||||
|
};
|
||||||
|
punchCard('punchCard', punchCardSeries);
|
||||||
|
} else if (error) {
|
||||||
|
document.getElementById('punchCard').innerText = `Failed to load graph data: ${error}`;
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,3 +1,6 @@
|
|||||||
|
// Stored by tab {'tab-id': ['address', 'address']}
|
||||||
|
const currentlyRefreshing = {};
|
||||||
|
|
||||||
function refreshingJsonRequest(address, callback, tabID) {
|
function refreshingJsonRequest(address, callback, tabID) {
|
||||||
const timestamp = Date.now();
|
const timestamp = Date.now();
|
||||||
const addressWithTimestamp = address.includes('?')
|
const addressWithTimestamp = address.includes('?')
|
||||||
@ -6,12 +9,18 @@ function refreshingJsonRequest(address, callback, tabID) {
|
|||||||
|
|
||||||
const refreshElement = document.querySelector(`#${tabID} .refresh-element`);
|
const refreshElement = document.querySelector(`#${tabID} .refresh-element`);
|
||||||
refreshElement.querySelector('i').addEventListener('click', () => {
|
refreshElement.querySelector('i').addEventListener('click', () => {
|
||||||
|
if (currentlyRefreshing[tabID].includes(address)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
refreshElement.querySelector('.refresh-notice').innerHTML = '<i class="fa fa-fw fa-cog fa-spin"></i> Updating..';
|
refreshElement.querySelector('.refresh-notice').innerHTML = '<i class="fa fa-fw fa-cog fa-spin"></i> Updating..';
|
||||||
refreshingJsonRequest(address, callback, tabID);
|
refreshingJsonRequest(address, callback, tabID);
|
||||||
});
|
});
|
||||||
|
|
||||||
let timeout = 1000;
|
let timeout = 1000;
|
||||||
|
|
||||||
|
if (!currentlyRefreshing[tabID]) currentlyRefreshing[tabID] = [];
|
||||||
|
currentlyRefreshing[tabID].push(address);
|
||||||
|
|
||||||
function makeTheRequest() {
|
function makeTheRequest() {
|
||||||
jsonRequest(addressWithTimestamp, (json, error) => {
|
jsonRequest(addressWithTimestamp, (json, error) => {
|
||||||
if (error) {
|
if (error) {
|
||||||
@ -32,7 +41,10 @@ function refreshingJsonRequest(address, callback, tabID) {
|
|||||||
setTimeout(makeTheRequest, timeout);
|
setTimeout(makeTheRequest, timeout);
|
||||||
timeout = timeout >= 12000 ? timeout : timeout * 2;
|
timeout = timeout >= 12000 ? timeout : timeout * 2;
|
||||||
} else {
|
} else {
|
||||||
refreshElement.querySelector('.refresh-notice').innerHTML = "";
|
currentlyRefreshing[tabID].splice(currentlyRefreshing[tabID].indexOf(address), 1);
|
||||||
|
if (!currentlyRefreshing[tabID].length) {
|
||||||
|
refreshElement.querySelector('.refresh-notice').innerHTML = "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
callback(json, error);
|
callback(json, error);
|
||||||
})
|
})
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script>
|
||||||
var gmPieColors = [${gmPieColors}];
|
const gmPieColors = [${gmPieColors}];
|
||||||
</script>
|
</script>
|
||||||
<div class="page-loader">
|
<div class="page-loader">
|
||||||
<span class="loader"></span>
|
<span class="loader"></span>
|
||||||
@ -846,7 +846,7 @@
|
|||||||
setLoadingText('Rendering graphs..');
|
setLoadingText('Rendering graphs..');
|
||||||
|
|
||||||
// TODO remove
|
// TODO remove
|
||||||
var v = {
|
const v = {
|
||||||
colors: {
|
colors: {
|
||||||
playersOnline: '${playersGraphColor}',
|
playersOnline: '${playersGraphColor}',
|
||||||
newPlayers: '#8BC34A',
|
newPlayers: '#8BC34A',
|
||||||
@ -867,7 +867,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// HighCharts Series
|
// HighCharts Series
|
||||||
var s = {
|
const s = {
|
||||||
name: {
|
name: {
|
||||||
playersOnline: 'Players Online',
|
playersOnline: 'Players Online',
|
||||||
uniquePlayers: 'Unique Players',
|
uniquePlayers: 'Unique Players',
|
||||||
@ -890,9 +890,9 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=playersOnline&server=${serverUUID}", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=playersOnline&server=${serverUUID}", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
var series = {
|
const series = {
|
||||||
playersOnline: {
|
playersOnline: {
|
||||||
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
|
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
|
||||||
data: json.playersOnline, color: v.colors.playersOnline, yAxis: 0
|
data: json.playersOnline, color: v.colors.playersOnline, yAxis: 0
|
||||||
@ -902,15 +902,15 @@
|
|||||||
} else if (error) {
|
} else if (error) {
|
||||||
$('#playersOnlineChart').text("Failed to load graph data: " + error);
|
$('#playersOnlineChart').text("Failed to load graph data: " + error);
|
||||||
}
|
}
|
||||||
});
|
}, 'network-overview');
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=uniqueAndNew", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=uniqueAndNew", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
var uniquePlayers = {
|
const uniquePlayers = {
|
||||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
data: json.uniquePlayers, color: v.colors.playersOnline
|
data: json.uniquePlayers, color: v.colors.playersOnline
|
||||||
};
|
};
|
||||||
var newPlayers = {
|
const newPlayers = {
|
||||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
data: json.newPlayers, color: v.colors.newPlayers
|
data: json.newPlayers, color: v.colors.newPlayers
|
||||||
};
|
};
|
||||||
@ -918,15 +918,15 @@
|
|||||||
} else if (error) {
|
} else if (error) {
|
||||||
$('#uniqueChart').text("Failed to load graph data: " + error)
|
$('#uniqueChart').text("Failed to load graph data: " + error)
|
||||||
}
|
}
|
||||||
});
|
}, 'network-overview');
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=hourlyUniqueAndNew", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=hourlyUniqueAndNew", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
var uniquePlayers = {
|
const uniquePlayers = {
|
||||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
data: json.uniquePlayers, color: v.colors.playersOnline
|
data: json.uniquePlayers, color: v.colors.playersOnline
|
||||||
};
|
};
|
||||||
var newPlayers = {
|
const newPlayers = {
|
||||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||||
data: json.newPlayers, color: v.colors.newPlayers
|
data: json.newPlayers, color: v.colors.newPlayers
|
||||||
};
|
};
|
||||||
@ -934,9 +934,9 @@
|
|||||||
} else if (error) {
|
} else if (error) {
|
||||||
$('#uniqueChart').text("Failed to load graph data: " + error)
|
$('#uniqueChart').text("Failed to load graph data: " + error)
|
||||||
}
|
}
|
||||||
});
|
}, 'network-overview');
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=serverPie", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=serverPie", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
serverPieSeries = {
|
serverPieSeries = {
|
||||||
name: 'Server Playtime',
|
name: 'Server Playtime',
|
||||||
@ -948,9 +948,9 @@
|
|||||||
} else if (error) {
|
} else if (error) {
|
||||||
$('#serverPie').text("Failed to load graph data: " + error)
|
$('#serverPie').text("Failed to load graph data: " + error)
|
||||||
}
|
}
|
||||||
});
|
}, 'sessions-overview');
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=activity", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=activity", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
activityPie('activityPie', {
|
activityPie('activityPie', {
|
||||||
name: 'Players', colorByPoint: true, data: json.activity_pie_series
|
name: 'Players', colorByPoint: true, data: json.activity_pie_series
|
||||||
@ -960,25 +960,25 @@
|
|||||||
$('#activityPie').text("Failed to load graph data: " + error);
|
$('#activityPie').text("Failed to load graph data: " + error);
|
||||||
$('#activityStackGraph').text("Failed to load graph data: " + error);
|
$('#activityStackGraph').text("Failed to load graph data: " + error);
|
||||||
}
|
}
|
||||||
});
|
}, 'playerbase-overview');
|
||||||
|
|
||||||
jsonRequest("./v1/graph?type=geolocation", function (json, error) {
|
refreshingJsonRequest("./v1/graph?type=geolocation", function (json, error) {
|
||||||
if (json) {
|
if (json) {
|
||||||
var geolocationSeries = {
|
const geolocationSeries = {
|
||||||
name: 'Players',
|
name: 'Players',
|
||||||
type: 'map',
|
type: 'map',
|
||||||
mapData: Highcharts.maps['custom/world'],
|
mapData: Highcharts.maps['custom/world'],
|
||||||
data: json.geolocation_series,
|
data: json.geolocation_series,
|
||||||
joinBy: ['iso-a3', 'code']
|
joinBy: ['iso-a3', 'code']
|
||||||
};
|
};
|
||||||
var geolocationBarSeries = {
|
const geolocationBarSeries = {
|
||||||
color: json.colors.bars,
|
color: json.colors.bars,
|
||||||
name: 'Players',
|
name: 'Players',
|
||||||
data: json.geolocation_bar_series.map(function (bar) {
|
data: json.geolocation_bar_series.map(function (bar) {
|
||||||
return bar.value
|
return bar.value
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
|
const geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
|
||||||
return bar.label
|
return bar.label
|
||||||
});
|
});
|
||||||
worldMap('worldMap', json.colors.low, json.colors.high, geolocationSeries);
|
worldMap('worldMap', json.colors.low, json.colors.high, geolocationSeries);
|
||||||
@ -987,7 +987,7 @@
|
|||||||
$('#worldMap').text("Failed to load graph data: " + error);
|
$('#worldMap').text("Failed to load graph data: " + error);
|
||||||
$('#countryBarChart').text("Failed to load graph data: " + error);
|
$('#countryBarChart').text("Failed to load graph data: " + error);
|
||||||
}
|
}
|
||||||
});
|
}, 'geolocations');
|
||||||
|
|
||||||
setLoadingText('Sorting out plugin tables..');
|
setLoadingText('Sorting out plugin tables..');
|
||||||
|
|
||||||
|
@ -1325,6 +1325,34 @@
|
|||||||
<script src="../js/server-values.js"></script>
|
<script src="../js/server-values.js"></script>
|
||||||
|
|
||||||
<script id="mainScript">
|
<script id="mainScript">
|
||||||
|
|
||||||
|
// HighCharts Series
|
||||||
|
const s = {
|
||||||
|
name: {
|
||||||
|
playersOnline: 'Players Online',
|
||||||
|
uniquePlayers: 'Unique Players',
|
||||||
|
newPlayers: 'New Players',
|
||||||
|
tps: 'TPS',
|
||||||
|
cpu: 'CPU (%)',
|
||||||
|
ram: 'RAM (MB)',
|
||||||
|
entities: 'Entities',
|
||||||
|
chunks: 'Chunks',
|
||||||
|
maxPing: 'Worst Ping',
|
||||||
|
minPing: 'Best Ping',
|
||||||
|
avgPing: 'Average Ping',
|
||||||
|
disk: 'Free Disk Space (MB)',
|
||||||
|
unit_players: 'Players'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
twoDecimals: {valueDecimals: 2},
|
||||||
|
zeroDecimals: {valueDecimals: 0}
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
areaSpline: 'areaspline',
|
||||||
|
spline: 'spline'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
setLoadingText('Calculating values..');
|
setLoadingText('Calculating values..');
|
||||||
refreshingJsonRequest("../v1/serverOverview?server=${serverUUID}", loadserverOverviewValues, 'server-overview');
|
refreshingJsonRequest("../v1/serverOverview?server=${serverUUID}", loadserverOverviewValues, 'server-overview');
|
||||||
@ -1340,265 +1368,15 @@
|
|||||||
time: {timezoneOffset: (${timeZone}) * 60}
|
time: {timezoneOffset: (${timeZone}) * 60}
|
||||||
});
|
});
|
||||||
|
|
||||||
// HighCharts Series
|
refreshingJsonRequest("../v1/graph?type=optimizedPerformance&server=${serverUUID}", loadOptimizedPerformanceGraph, 'performance');
|
||||||
const s = {
|
refreshingJsonRequest("../v1/graph?type=aggregatedPing&server=${serverUUID}", loadPingGraph, 'performance');
|
||||||
name: {
|
refreshingJsonRequest("../v1/graph?type=worldPie&server=${serverUUID}", loadWorldPie, 'sessions-overview');
|
||||||
playersOnline: 'Players Online',
|
refreshingJsonRequest("../v1/graph?type=activity&server=${serverUUID}", loadActivityGraph, 'playerbase-overview');
|
||||||
uniquePlayers: 'Unique Players',
|
refreshingJsonRequest("../v1/graph?type=geolocation&server=${serverUUID}", loadGeolocationGraph, 'geolocations');
|
||||||
newPlayers: 'New Players',
|
refreshingJsonRequest("../v1/graph?type=uniqueAndNew&server=${serverUUID}", loadUniqueAndNewGraph, 'online-activity-overview');
|
||||||
tps: 'TPS',
|
refreshingJsonRequest("../v1/graph?type=hourlyUniqueAndNew&server=${serverUUID}", loadHourlyUniqueAndNewGraph, 'online-activity-overview');
|
||||||
cpu: 'CPU (%)',
|
jsonRequest("../v1/graph?type=serverCalendar&server=${serverUUID}", loadServerCalendar, 'online-activity-overview');
|
||||||
ram: 'RAM (MB)',
|
refreshingJsonRequest("../v1/graph?type=punchCard&server=${serverUUID}", loadPunchCard, 'online-activity-overview');
|
||||||
entities: 'Entities',
|
|
||||||
chunks: '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'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=optimizedPerformance&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
const zones = {
|
|
||||||
tps: [{
|
|
||||||
value: json.zones.tpsThresholdMed,
|
|
||||||
color: json.colors.low
|
|
||||||
}, {
|
|
||||||
value: json.zones.tpsThresholdHigh,
|
|
||||||
color: json.colors.med
|
|
||||||
}, {
|
|
||||||
value: 30,
|
|
||||||
color: json.colors.high
|
|
||||||
}],
|
|
||||||
disk: [{
|
|
||||||
value: json.zones.diskThresholdMed,
|
|
||||||
color: json.colors.low
|
|
||||||
}, {
|
|
||||||
value: json.zones.tpsThresholdHigh,
|
|
||||||
color: json.colors.med
|
|
||||||
}, {
|
|
||||||
value: Number.MAX_VALUE,
|
|
||||||
color: json.colors.high
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
const dataSeries = mapToDataSeries(json.values);
|
|
||||||
const series = {
|
|
||||||
playersOnline: {
|
|
||||||
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.playersOnline, color: json.colors.playersOnline, yAxis: 0
|
|
||||||
},
|
|
||||||
tps: {
|
|
||||||
name: s.name.tps, type: s.type.spline, color: json.colors.high,
|
|
||||||
zones: zones.tps, tooltip: s.tooltip.twoDecimals, data: dataSeries.tps,
|
|
||||||
yAxis: 1
|
|
||||||
},
|
|
||||||
cpu: {
|
|
||||||
name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
|
|
||||||
data: dataSeries.cpu, color: json.colors.cpu, yAxis: 2
|
|
||||||
},
|
|
||||||
cpu_alt: {
|
|
||||||
name: s.name.cpu, type: s.type.spline, tooltip: s.tooltip.twoDecimals,
|
|
||||||
data: dataSeries.cpu, color: json.colors.cpu, yAxis: 1
|
|
||||||
},
|
|
||||||
ram: {
|
|
||||||
name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.ram, color: json.colors.ram, yAxis: 3
|
|
||||||
},
|
|
||||||
ram_alt: {
|
|
||||||
name: s.name.ram, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.ram, color: json.colors.ram, yAxis: 2
|
|
||||||
},
|
|
||||||
entities: {
|
|
||||||
name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.entities, color: json.colors.entities, yAxis: 4
|
|
||||||
},
|
|
||||||
entities_alt: {
|
|
||||||
name: s.name.entities, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.entities, color: json.colors.entities, yAxis: 1
|
|
||||||
},
|
|
||||||
chunks: {
|
|
||||||
name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.chunks, color: json.colors.chunks, yAxis: 5
|
|
||||||
},
|
|
||||||
chunks_alt: {
|
|
||||||
name: s.name.chunks, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: dataSeries.chunks, color: json.colors.chunks, yAxis: 2
|
|
||||||
},
|
|
||||||
disk: {
|
|
||||||
name: s.name.disk, type: s.type.spline, color: json.colors.high,
|
|
||||||
zones: zones.disk, tooltip: s.tooltip.zeroDecimals, data: dataSeries.disk
|
|
||||||
}
|
|
||||||
};
|
|
||||||
playersChart('playersOnlineChart', 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_alt, series.ram_alt, series.playersOnline);
|
|
||||||
worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline);
|
|
||||||
diskChart('diskGraph', [series.disk]);
|
|
||||||
} else if (error) {
|
|
||||||
$('#playersOnlineChart').text("Failed to load graph data: " + error);
|
|
||||||
$('#performanceGraph').text("Failed to load graph data: " + error);
|
|
||||||
$('#tpsGraph').text("Failed to load graph data: " + error);
|
|
||||||
$('#resourceGraph').text("Failed to load graph data: " + error);
|
|
||||||
$('#worldGraph').text("Failed to load graph data: " + error);
|
|
||||||
$('#diskGraph').text("Failed to load graph data: " + error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=aggregatedPing&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var series = {
|
|
||||||
avgPing: {
|
|
||||||
name: s.name.avgPing,
|
|
||||||
type: s.type.spline,
|
|
||||||
tooltip: s.tooltip.twoDecimals,
|
|
||||||
data: json.avg_ping_series,
|
|
||||||
color: json.colors.avg
|
|
||||||
},
|
|
||||||
maxPing: {
|
|
||||||
name: s.name.maxPing,
|
|
||||||
type: s.type.spline,
|
|
||||||
tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.max_ping_series,
|
|
||||||
color: json.colors.max
|
|
||||||
},
|
|
||||||
minPing: {
|
|
||||||
name: s.name.minPing,
|
|
||||||
type: s.type.spline,
|
|
||||||
tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.min_ping_series,
|
|
||||||
color: json.colors.min
|
|
||||||
}
|
|
||||||
};
|
|
||||||
lineChart('pingGraph', [series.avgPing, series.maxPing, series.minPing]);
|
|
||||||
} else if (error) {
|
|
||||||
$('#pingGraph').text("Failed to load graph data: " + error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=worldPie&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var worldSeries = {name: 'World Playtime', colorByPoint: true, data: json.world_series};
|
|
||||||
var gmSeries = json.gm_series;
|
|
||||||
worldPie("worldPie", worldSeries, gmSeries);
|
|
||||||
} else if (error) {
|
|
||||||
$('#worldPie').text("Failed to load graph data: " + error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=activity&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
activityPie('activityPie', {
|
|
||||||
name: 'Players', colorByPoint: true, data: json.activity_pie_series
|
|
||||||
});
|
|
||||||
stackChart('activityStackGraph', json.activity_labels, json.activity_series, 'Players');
|
|
||||||
} else if (error) {
|
|
||||||
$('#activityPie').text("Failed to load graph data: " + error);
|
|
||||||
$('#activityStackGraph').text("Failed to load graph data: " + error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=geolocation&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var geolocationSeries = {
|
|
||||||
name: 'Players',
|
|
||||||
type: 'map',
|
|
||||||
mapData: Highcharts.maps['custom/world'],
|
|
||||||
data: json.geolocation_series,
|
|
||||||
joinBy: ['iso-a3', 'code']
|
|
||||||
};
|
|
||||||
var geolocationBarSeries = {
|
|
||||||
color: json.colors.bars,
|
|
||||||
name: 'Players',
|
|
||||||
data: json.geolocation_bar_series.map(function (bar) {
|
|
||||||
return bar.value
|
|
||||||
})
|
|
||||||
};
|
|
||||||
var geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
|
|
||||||
return bar.label
|
|
||||||
});
|
|
||||||
worldMap('worldMap', json.colors.low, json.colors.high, geolocationSeries);
|
|
||||||
horizontalBarChart('countryBarChart', geolocationBarCategories, [geolocationBarSeries], 'Players');
|
|
||||||
} else if (error) {
|
|
||||||
$('#worldMap').text("Failed to load graph data: " + error);
|
|
||||||
$('#countryBarChart').text("Failed to load graph data: " + error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=uniqueAndNew&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var uniquePlayers = {
|
|
||||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.uniquePlayers, color: json.colors.playersOnline
|
|
||||||
};
|
|
||||||
var newPlayers = {
|
|
||||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.newPlayers, color: json.colors.newPlayers
|
|
||||||
};
|
|
||||||
dayByDay('uniqueChart', [uniquePlayers, newPlayers]);
|
|
||||||
} else if (error) {
|
|
||||||
$('#uniqueChart').text("Failed to load graph data: " + error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=hourlyUniqueAndNew&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var uniquePlayers = {
|
|
||||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.uniquePlayers, color: json.colors.playersOnline
|
|
||||||
};
|
|
||||||
var newPlayers = {
|
|
||||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
|
||||||
data: json.newPlayers, color: json.colors.newPlayers
|
|
||||||
};
|
|
||||||
dayByDay('hourlyUniqueChart', [uniquePlayers, newPlayers]);
|
|
||||||
} else if (error) {
|
|
||||||
$('#uniqueChart').text("Failed to load graph data: " + error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=serverCalendar&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
$('#calendar').text('');
|
|
||||||
onlineActivityCalendar('#calendar', json.data, json.firstDay);
|
|
||||||
$('#online-calendar-tab').click(function () {
|
|
||||||
// Wrapping this in a 0ms setTimeout waits for all other event handlers
|
|
||||||
// to finish. We need this because if the calendar is rendered
|
|
||||||
// immediately, it renders for a width of 0.
|
|
||||||
setTimeout(function () {
|
|
||||||
window.calendars.online_activity.render();
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
} else if (error) {
|
|
||||||
$('#calendar').text("Failed to load calendar data: " + error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jsonRequest("../v1/graph?type=punchCard&server=${serverUUID}", function (json, error) {
|
|
||||||
if (json) {
|
|
||||||
var punchCardSeries = {
|
|
||||||
name: 'Relative Join Activity',
|
|
||||||
color: json.color,
|
|
||||||
data: json.punchCard
|
|
||||||
};
|
|
||||||
punchCard('punchCard', punchCardSeries);
|
|
||||||
} else if (error) {
|
|
||||||
$('#punchCard').text("Failed to load graph data: " + error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
setLoadingText('Sorting players table..');
|
setLoadingText('Sorting players table..');
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user