From d6814a85816b8d2fa8f63395964b32d90d6bee4e Mon Sep 17 00:00:00 2001
From: Risto Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Thu, 11 Feb 2021 09:42:20 +0200
Subject: [PATCH] Fixed the freeze from rendering performance graphs

---
 .../resources/assets/plan/web/js/graphs.js    | 55 ++++++++++++-------
 .../assets/plan/web/js/server-values.js       | 16 +++---
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/Plan/common/src/main/resources/assets/plan/web/js/graphs.js b/Plan/common/src/main/resources/assets/plan/web/js/graphs.js
index 9a37d2463..fdc1665b3 100644
--- a/Plan/common/src/main/resources/assets/plan/web/js/graphs.js
+++ b/Plan/common/src/main/resources/assets/plan/web/js/graphs.js
@@ -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) {
diff --git a/Plan/common/src/main/resources/assets/plan/web/js/server-values.js b/Plan/common/src/main/resources/assets/plan/web/js/server-values.js
index 8e8a345d4..94c9ceb7e 100644
--- a/Plan/common/src/main/resources/assets/plan/web/js/server-values.js
+++ b/Plan/common/src/main/resources/assets/plan/web/js/server-values.js
@@ -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;