Moved performance graph data processing to web worker

Affects issues:
- Possibly fixed #4490

Author: AuroraLS3

Plan/react/dashboard/src/util/graphs.js

@@ -40,44 +40,18 @@ export const hasValuesInSeries = series => {
 };
 
 export const mapPerformanceDataToSeries = performanceData => {
-    const playersOnline = [];
-    const tps = [];
-    const cpu = [];
-    const ram = [];
-    const entities = [];
-    const chunks = [];
-    const disk = [];
-    const msptAverage = [];
-    const mspt95thPercentile = [];
-
-    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]];
-                msptAverage[i] = [date, entry[8]];
-                mspt95thPercentile[i] = [date, entry[9]];
-            }
-            if (i >= length) {
-                resolve({playersOnline, tps, cpu, ram, entities, chunks, disk, msptAverage, mspt95thPercentile});
-            } else {
-                setTimeout(processNextThousand, 10);
-            }
-        }
-
-        processNextThousand();
-    }))
+    const worker = new Worker(new URL('./workers/performanceGraphWorker.js', import.meta.url));
+    return new Promise((resolve, error) => {
+        worker.onmessage = e => {
+            resolve(e.data)
+            worker.terminate();
+        };
+        worker.onerror = e => {
+            error(new Error(e.message));
+            worker.terminate();
+        };
+        worker.postMessage(performanceData);
+    });
 };
 
 export const yAxisConfigurations = {

Plan/react/dashboard/src/util/workers/performanceGraphWorker.js

@@ -0,0 +1,31 @@
+self.onmessage = (e) => {
+    const performanceData = e.data;
+    const playersOnline = [];
+    const tps = [];
+    const cpu = [];
+    const ram = [];
+    const entities = [];
+    const chunks = [];
+    const disk = [];
+    const msptAverage = [];
+    const mspt95thPercentile = [];
+
+    let i = 0;
+    const length = performanceData.length;
+
+    for (i; i < length; 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]];
+        msptAverage[i] = [date, entry[8]];
+        mspt95thPercentile[i] = [date, entry[9]];
+    }
+    const processedData = {playersOnline, tps, cpu, ram, entities, chunks, disk, msptAverage, mspt95thPercentile};
+    self.postMessage(processedData);
+};