Merge pull request #4364 from mempool/mononaut/fix-incoming-tx-chart

restore incoming tx clearance line, smooth moving avg

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -63,7 +63,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
       return;
     }
     this.windowPreference = this.windowPreferenceOverride ? this.windowPreferenceOverride : this.storageService.getValue('graphWindowPreference');
-    this.MA = this.calculateMA(this.data.series[0]);
+    const windowSize = Math.max(10, Math.floor(this.data.series[0].length / 8));
+    this.MA = this.calculateMA(this.data.series[0], windowSize);
     this.mountChart();
   }
 
@@ -74,33 +75,22 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
     this.isLoading = false;
   }
 
-  /// calculate the moving average of maData
+  /// calculate the moving average of the provided data based on windowSize
-  calculateMA(maData): number[][] {
+  calculateMA(data: number[][], windowSize: number = 100): number[][] {
     //update const variables that are not changed
     const ma: number[][] = [];
     let sum = 0;
     let i = 0;
-    const len = maData.length;
-
-    //Adjust window length based on the length of the data
-    //5% appeared as a good amount from tests
-    //TODO: make this a text box in the UI
-    const maWindowLen = Math.ceil(len * 0.05);
-
-    //calculate the center of the moving average window
-    const center = Math.floor(maWindowLen / 2);
 
     //calculate the centered moving average
-    for (i = center; i < len - center; i++) {
+    for (i = 0; i < data.length; i++) {
-      sum = 0;
+      sum += data[i][1];
-      //build out ma as we loop through the data
+      if (i >= windowSize) {
-      ma[i] = [];
+        sum -= data[i - windowSize][1];
-      ma[i].push(maData[i][0]);
+        const midpoint = i - Math.floor(windowSize / 2);
-      for (let j = i - center; j <= i + center; j++) {
+        const avg = sum / windowSize;
-        sum += maData[j][1];
+        ma.push([data[midpoint][0], avg]);
       }
-
-      ma[i].push(sum / maWindowLen);
     }
 
     //return the moving average array
@@ -138,36 +128,22 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
           }
         }],
       }
-    },
+    });
-    {
+    if (this.template !== 'widget') {
-      zlevel: 0,
+      seriesGraph.push({
-      name: 'MA',
+        zlevel: 0,
-      data: this.MA,
+        name: 'MA',
-      type: 'line',
+        data: this.MA,
-      smooth: false,
+        type: 'line',
-      showSymbol: false,
+        smooth: false,
-      symbol: 'none',
+        showSymbol: false,
-      lineStyle: {
-        width: 1,
-        color: "white",
-      },
-      markLine: {
-        silent: true,
         symbol: 'none',
         lineStyle: {
-          color: '#fff',
-          opacity: 1,
           width: 2,
-        },
+          color: "white",
-        data: [{
+        }
-          yAxis: 1667,
+      });
-          label: {
+    }
-            show: false,
-            color: '#ffffff',
-          }
-        }],
-      }
-    });
 
     this.mempoolStatsChartOption = {
       grid: {

frontend/src/app/graphs/echarts.ts

@@ -1,7 +1,7 @@
 // Import tree-shakeable echarts
 import * as echarts from 'echarts/core';
 import { LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent } from 'echarts/components';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GeoComponent, DataZoomComponent, VisualMapComponent, MarkLineComponent } from 'echarts/components';
 import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
 // Typescript interfaces
 import { EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts';
@@ -11,7 +11,7 @@ echarts.use([
   SVGRenderer, CanvasRenderer,
   TitleComponent, TooltipComponent, GridComponent,
   LegendComponent, GeoComponent, DataZoomComponent,
-  VisualMapComponent,
+  VisualMapComponent, MarkLineComponent,
   LineChart, LinesChart, BarChart, TreemapChart, PieChart, ScatterChart
 ]);
 export { echarts, EChartsOption, TreemapSeriesOption, LineSeriesOption, PieSeriesOption };