Feat: Improve aggregate using sliding window

src/components/PingChart.vue

@@ -213,7 +213,7 @@ export default {
                 let colorData = []; // Color Data for Bar Chart
 
                 const period = parseInt(this.chartPeriodHrs);
-                let aggregatePoints = period > 6 ? 10 : 5;
+                let aggregatePoints = period > 6 ? 12 : 4;
 
                 let aggregateBuffer = [];
 
@@ -224,24 +224,25 @@ export default {
                             continue;
                         }
 
-                        if (datapoint.down > 0) {
+                        if (datapoint.up > 0) {
-                            // Clear the aggregate buffer
+                            // Aggregate Up data using a sliding window
-                            if (aggregateBuffer.length > 0) {
+                            aggregateBuffer.push(datapoint);
+
+                            if (aggregateBuffer.length === aggregatePoints) {
                                 const average = this.getAverage(aggregateBuffer);
                                 this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
-                                aggregateBuffer = [];
+                                aggregateBuffer = aggregateBuffer.slice(Math.floor(aggregatePoints / 2));
                             }
-
-                            this.pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData);
                         } else {
-                            // Only aggregate up datapoints
+                            // datapoint is fully down, no need to aggregate
-                            aggregateBuffer.push(datapoint);
+                            // Clear the aggregate buffer
-
+                            if (aggregateBuffer.length > 0) {
-                            if (aggregateBuffer.length === aggregatePoints) {
                                 const average = this.getAverage(aggregateBuffer);
                                 this.pushDatapoint(average, avgPingData, minPingData, maxPingData, downData, colorData);
                                 aggregateBuffer = [];
                             }
+
+                            this.pushDatapoint(datapoint, avgPingData, minPingData, maxPingData, downData, colorData);
                         }
                     }
                 }