Fixed the freeze from rendering performance graphs

This commit is contained in:
Risto Lahtela 2021-02-11 09:42:20 +02:00
parent be92653508
commit d6814a8581
2 changed files with 42 additions and 29 deletions

View File

@ -183,27 +183,40 @@ function onlineActivityCalendar(id, event_data, firstDay) {
}
function mapToDataSeries(performanceData) {
const dataSeries = {
playersOnline: [],
tps: [],
cpu: [],
ram: [],
entities: [],
chunks: [],
disk: []
};
for (let i = 0; i < performanceData.length; i++) {
const entry = performanceData[i];
const date = entry[0];
dataSeries.playersOnline[i] = [date, entry[1]];
dataSeries.tps[i] = [date, entry[2]];
dataSeries.cpu[i] = [date, entry[3]];
dataSeries.ram[i] = [date, entry[4]];
dataSeries.entities[i] = [date, entry[5]];
dataSeries.chunks[i] = [date, entry[6]];
dataSeries.disk[i] = [date, entry[7]];
}
return dataSeries;
const playersOnline = [];
const tps = [];
const cpu = [];
const ram = [];
const entities = [];
const chunks = [];
const disk = [];
return new Promise((resolve => {
let i = 0;
const length = performanceData.length;
function processNextThousand() {
const to = Math.min(i + 1000, length);
for (i; i < to; i++) {
const entry = performanceData[i];
const date = entry[0];
playersOnline[i] = [date, entry[1]];
tps[i] = [date, entry[2]];
cpu[i] = [date, entry[3]];
ram[i] = [date, entry[4]];
entities[i] = [date, entry[5]];
chunks[i] = [date, entry[6]];
disk[i] = [date, entry[7]];
}
if (i >= length) {
resolve({playersOnline, tps, cpu, ram, entities, chunks, disk})
} else {
setTimeout(processNextThousand, 10);
}
}
processNextThousand();
}))
}
function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) {

View File

@ -347,7 +347,7 @@ function loadPerformanceValues(json, error) {
element.querySelector('#data_low_tps_cpu').innerText = data.low_tps_cpu;
}
function loadOptimizedPerformanceGraph(json, error) {
async function loadOptimizedPerformanceGraph(json, error) {
if (json) {
const zones = {
tps: [{
@ -371,7 +371,7 @@ function loadOptimizedPerformanceGraph(json, error) {
color: json.colors.high
}]
};
const dataSeries = mapToDataSeries(json.values);
const dataSeries = await mapToDataSeries(json.values);
const series = {
playersOnline: {
name: s.name.playersOnline, type: s.type.areaSpline, tooltip: s.tooltip.zeroDecimals,
@ -419,12 +419,12 @@ function loadOptimizedPerformanceGraph(json, error) {
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]);
setTimeout(() => playersChart('playersOnlineChart', series.playersOnline, 2), 10)
setTimeout(() => performanceChart('performanceGraph', series.playersOnline, series.tps, series.cpu, series.ram, series.entities, series.chunks), 20)
setTimeout(() => tpsChart('tpsGraph', series.tps, series.playersOnline), 30)
setTimeout(() => resourceChart('resourceGraph', series.cpu_alt, series.ram_alt, series.playersOnline), 40)
setTimeout(() => worldChart('worldGraph', series.entities_alt, series.chunks_alt, series.playersOnline), 50)
setTimeout(() => diskChart('diskGraph', [series.disk]), 60)
} else if (error) {
const errorMessage = `Failed to load graph data: ${error}`;
document.getElementById('playersOnlineChart').innerText = errorMessage;