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:
Risto Lahtela
parent
b5365d2321
commit
be92653508
@ -1,4 +1,4 @@
|
||||
var linegraphButtons = [{
|
||||
const linegraphButtons = [{
|
||||
type: 'hour',
|
||||
count: 12,
|
||||
text: '12h'
|
||||
@ -19,7 +19,7 @@ var linegraphButtons = [{
|
||||
text: 'All'
|
||||
}];
|
||||
|
||||
var graphs = [];
|
||||
const graphs = [];
|
||||
window.calendars = {};
|
||||
|
||||
function activityPie(id, activitySeries) {
|
||||
@ -406,15 +406,15 @@ function serverPie(id, serverSeries) {
|
||||
}
|
||||
|
||||
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);
|
||||
var dh = Math.floor(seconds / 3600);
|
||||
const dh = Math.floor(seconds / 3600);
|
||||
seconds -= (dh * 3600);
|
||||
var dm = Math.floor(seconds / 60);
|
||||
const dm = Math.floor(seconds / 60);
|
||||
seconds -= (dm * 60);
|
||||
seconds = Math.floor(seconds);
|
||||
if (dd !== 0) {
|
||||
@ -610,9 +610,9 @@ function worldMap(id, colorMin, colorMax, mapSeries) {
|
||||
}
|
||||
|
||||
function worldPie(id, worldSeries, gmSeries) {
|
||||
var defaultTitle = '';
|
||||
var defaultSubtitle = 'Click to expand';
|
||||
var chart = Highcharts.chart(id, {
|
||||
const defaultTitle = '';
|
||||
const defaultSubtitle = 'Click to expand';
|
||||
const chart = Highcharts.chart(id, {
|
||||
chart: {
|
||||
plotBackgroundColor: 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_chunks').innerText = data.low_tps_chunks;
|
||||
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) {
|
||||
const timestamp = Date.now();
|
||||
const addressWithTimestamp = address.includes('?')
|
||||
@ -6,12 +9,18 @@ function refreshingJsonRequest(address, callback, tabID) {
|
||||
|
||||
const refreshElement = document.querySelector(`#${tabID} .refresh-element`);
|
||||
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..';
|
||||
refreshingJsonRequest(address, callback, tabID);
|
||||
});
|
||||
|
||||
let timeout = 1000;
|
||||
|
||||
if (!currentlyRefreshing[tabID]) currentlyRefreshing[tabID] = [];
|
||||
currentlyRefreshing[tabID].push(address);
|
||||
|
||||
function makeTheRequest() {
|
||||
jsonRequest(addressWithTimestamp, (json, error) => {
|
||||
if (error) {
|
||||
@ -32,7 +41,10 @@ function refreshingJsonRequest(address, callback, tabID) {
|
||||
setTimeout(makeTheRequest, timeout);
|
||||
timeout = timeout >= 12000 ? timeout : timeout * 2;
|
||||
} 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);
|
||||
})
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
<body>
|
||||
<script>
|
||||
var gmPieColors = [${gmPieColors}];
|
||||
const gmPieColors = [${gmPieColors}];
|
||||
</script>
|
||||
<div class="page-loader">
|
||||
<span class="loader"></span>
|
||||
@ -846,7 +846,7 @@
|
||||
setLoadingText('Rendering graphs..');
|
||||
|
||||
// TODO remove
|
||||
var v = {
|
||||
const v = {
|
||||
colors: {
|
||||
playersOnline: '${playersGraphColor}',
|
||||
newPlayers: '#8BC34A',
|
||||
@ -867,7 +867,7 @@
|
||||
});
|
||||
|
||||
// HighCharts Series
|
||||
var s = {
|
||||
const s = {
|
||||
name: {
|
||||
playersOnline: 'Players Online',
|
||||
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) {
|
||||
var series = {
|
||||
const series = {
|
||||
playersOnline: {
|
||||
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
|
||||
data: json.playersOnline, color: v.colors.playersOnline, yAxis: 0
|
||||
@ -902,15 +902,15 @@
|
||||
} else if (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) {
|
||||
var uniquePlayers = {
|
||||
const uniquePlayers = {
|
||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||
data: json.uniquePlayers, color: v.colors.playersOnline
|
||||
};
|
||||
var newPlayers = {
|
||||
const newPlayers = {
|
||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||
data: json.newPlayers, color: v.colors.newPlayers
|
||||
};
|
||||
@ -918,15 +918,15 @@
|
||||
} else if (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) {
|
||||
var uniquePlayers = {
|
||||
const uniquePlayers = {
|
||||
name: s.name.uniquePlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||
data: json.uniquePlayers, color: v.colors.playersOnline
|
||||
};
|
||||
var newPlayers = {
|
||||
const newPlayers = {
|
||||
name: s.name.newPlayers, type: s.type.spline, tooltip: s.tooltip.zeroDecimals,
|
||||
data: json.newPlayers, color: v.colors.newPlayers
|
||||
};
|
||||
@ -934,9 +934,9 @@
|
||||
} else if (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) {
|
||||
serverPieSeries = {
|
||||
name: 'Server Playtime',
|
||||
@ -948,9 +948,9 @@
|
||||
} else if (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) {
|
||||
activityPie('activityPie', {
|
||||
name: 'Players', colorByPoint: true, data: json.activity_pie_series
|
||||
@ -960,25 +960,25 @@
|
||||
$('#activityPie').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) {
|
||||
var geolocationSeries = {
|
||||
const geolocationSeries = {
|
||||
name: 'Players',
|
||||
type: 'map',
|
||||
mapData: Highcharts.maps['custom/world'],
|
||||
data: json.geolocation_series,
|
||||
joinBy: ['iso-a3', 'code']
|
||||
};
|
||||
var geolocationBarSeries = {
|
||||
const 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) {
|
||||
const geolocationBarCategories = json.geolocation_bar_series.map(function (bar) {
|
||||
return bar.label
|
||||
});
|
||||
worldMap('worldMap', json.colors.low, json.colors.high, geolocationSeries);
|
||||
@ -987,7 +987,7 @@
|
||||
$('#worldMap').text("Failed to load graph data: " + error);
|
||||
$('#countryBarChart').text("Failed to load graph data: " + error);
|
||||
}
|
||||
});
|
||||
}, 'geolocations');
|
||||
|
||||
setLoadingText('Sorting out plugin tables..');
|
||||
|
||||
|
||||
@ -1325,6 +1325,34 @@
|
||||
<script src="../js/server-values.js"></script>
|
||||
|
||||
<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 {
|
||||
setLoadingText('Calculating values..');
|
||||
refreshingJsonRequest("../v1/serverOverview?server=${serverUUID}", loadserverOverviewValues, 'server-overview');
|
||||
@ -1340,265 +1368,15 @@
|
||||
time: {timezoneOffset: (${timeZone}) * 60}
|
||||
});
|
||||
|
||||
// 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)'
|
||||
},
|
||||
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)
|
||||
}
|
||||
});
|
||||
refreshingJsonRequest("../v1/graph?type=optimizedPerformance&server=${serverUUID}", loadOptimizedPerformanceGraph, 'performance');
|
||||
refreshingJsonRequest("../v1/graph?type=aggregatedPing&server=${serverUUID}", loadPingGraph, 'performance');
|
||||
refreshingJsonRequest("../v1/graph?type=worldPie&server=${serverUUID}", loadWorldPie, 'sessions-overview');
|
||||
refreshingJsonRequest("../v1/graph?type=activity&server=${serverUUID}", loadActivityGraph, 'playerbase-overview');
|
||||
refreshingJsonRequest("../v1/graph?type=geolocation&server=${serverUUID}", loadGeolocationGraph, 'geolocations');
|
||||
refreshingJsonRequest("../v1/graph?type=uniqueAndNew&server=${serverUUID}", loadUniqueAndNewGraph, 'online-activity-overview');
|
||||
refreshingJsonRequest("../v1/graph?type=hourlyUniqueAndNew&server=${serverUUID}", loadHourlyUniqueAndNewGraph, 'online-activity-overview');
|
||||
jsonRequest("../v1/graph?type=serverCalendar&server=${serverUUID}", loadServerCalendar, 'online-activity-overview');
|
||||
refreshingJsonRequest("../v1/graph?type=punchCard&server=${serverUUID}", loadPunchCard, 'online-activity-overview');
|
||||
|
||||
setLoadingText('Sorting players table..');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user