Move to async lib for processing cpu data

Still doesn’t fix the page lag which seems to be due to the rendering
of the graphs.

README.md

@@ -30,6 +30,8 @@ SOFTWARE.
 ### Credits
 Animate.css - [license](https://github.com/daneden/animate.css/blob/master/LICENSE) - [homepage](http://daneden.github.io/animate.css/)
 
+Async.js - [license](https://github.com/caolan/async/blob/master/LICENSE) - [homepage](https://github.com/caolan/async/)
+
 BinaryJS - [license](https://github.com/binaryjs/binaryjs/blob/master/LICENSE) - [homepage](http://binaryjs.com)
 
 Bootstrap - [license](https://github.com/twbs/bootstrap/blob/master/LICENSE) - [homepage](http://getbootstrap.com)

resources/views/server/index.blade.php

@@ -28,6 +28,7 @@
     {!! Theme::css('css/metricsgraphics.css') !!}
     {!! Theme::js('js/d3.min.js') !!}
     {!! Theme::js('js/metricsgraphics.min.js') !!}
+    {!! Theme::js('js/async.min.js') !!}
 @endsection
 
 @section('content')
@@ -167,6 +168,7 @@ $(window).load(function () {
         target: document.getElementById('chart_memory'),
         x_accessor: 'date',
         y_accessor: 'memory',
+        animate_on_load: false,
         y_rug: true,
         area: false,
     };
@@ -200,6 +202,7 @@ $(window).load(function () {
         y_accessor: 'cpu',
         aggregate_rollover: true,
         missing_is_hidden: true,
+        animate_on_load: false,
         area: false,
     };
 
@@ -229,46 +232,60 @@ $(window).load(function () {
             'cpu': ({{ $server->cpu }} > 0) ? parseFloat(((proc.data.cpu.total / {{ $server->cpu }}) * 100).toFixed(3).toString()) : proc.data.cpu.total
         });
 
-        // Remove blank values from listing
+        async.waterfall([
-        var activeCores = [];
+            function (callback) {
-        for (i = 0, length = proc.data.cpu.cores.length; i < length; i++) {
+                // Remove blank values from listing
-            if (proc.data.cpu.cores[i] > 0) {
+                var activeCores = [];
-                activeCores.push(proc.data.cpu.cores[i]);
+                async.forEachOf(proc.data.cpu.cores, function(inner, i, eachCallback) {
-            }
+                    if (proc.data.cpu.cores[i] > 0) {
-        }
+                        activeCores.push(proc.data.cpu.cores[i]);
-
+                    }
-        var modifedActiveCores = { '0': 0 };
+                    return eachCallback();
-        for (i = 0, length = activeCores.length; i < length; i++) {
+                }, function () {
-            if (i > 7) {
+                    return callback(null, activeCores);
-                modifedActiveCores['0'] = modifedActiveCores['0'] + activeCores[i];
-            } else {
-                if (activeChartArrays.indexOf(i) < 0) {
-                    activeChartArrays.push(i);
-                }
-                modifedActiveCores[i] = activeCores[i];
-            }
-        }
-
-        for (i = 0, length = activeChartArrays.length; i < length; i++) {
-            if (typeof cpuGraphData[(i + 1)] === 'undefined') {
-                cpuGraphData[(i + 1)] = [{
-                    'date': curDate,
-                    'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
-                }];
-            } else {
-                if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') {
-                    cpuGraphData[(i + 1)].shift();
-                }
-                cpuGraphData[(i + 1)].push({
-                    'date': curDate,
-                    'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modifedActiveCores[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modifedActiveCores[i] || null
                 });
-            }
+            },
-        }
+            function (active, callback) {
-
+                var modifedActiveCores = { '0': 0 };
-        cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
+                async.forEachOf(active, function (inner, i, eachCallback) {
-        MG.data_graphic(memoryGraphSettings);
+                    if (i > 7) {
-        MG.data_graphic(cpuGraphSettings);
+                        modifedActiveCores['0'] = modifedActiveCores['0'] + active[i];
+                    } else {
+                        if (activeChartArrays.indexOf(i) < 0) activeChartArrays.push(i);
+                        modifedActiveCores[i] = active[i];
+                    }
+                    return eachCallback();
+                }, function () {
+                    return callback(null, modifedActiveCores);
+                });
+            },
+            function (modified, callback) {
+                async.forEachOf(activeChartArrays, function (inner, i, eachCallback) {
+                    if (typeof cpuGraphData[(i + 1)] === 'undefined') {
+                        cpuGraphData[(i + 1)] = [{
+                            'date': curDate,
+                            'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
+                        }];
+                    } else {
+                        if (typeof cpuGraphData[(i + 1)][20] !== 'undefined') cpuGraphData[(i + 1)].shift();
+                        cpuGraphData[(i + 1)].push({
+                            'date': curDate,
+                            'cpu': ({{ $server->cpu }} > 0) ? parseFloat((((modified[i] || 0)/ {{ $server->cpu }}) * 100).toFixed(3).toString()) : modified[i] || null
+                        });
+                    }
+                    return eachCallback();
+                }, function () {
+                    return callback();
+                });
+            },
+            function (callback) {
+                cpuGraphSettings.data = (showOnlyTotal === true) ? cpuGraphData[0] : cpuGraphData;
+                return callback();
+            },
+        ], function () {
+            MG.data_graphic(memoryGraphSettings);
+            MG.data_graphic(cpuGraphSettings);
+        });
     });
 
     // Socket Recieves New Query