Add new component incoming-transactions-graph;

Refactor component mempool-graph; Refactor component fee-distribution-graph; Add incoming-transactions-graph to dashboard; Add incoming-transactions-graph to statistics; Add incoming-transactions-graph to television; Add mempool-graph to dashboard; Add mempool-graph to statistics; Add mempool-graph to television; Remove chartist.component;
2021-08-21 01:46:28 -03:00
parent 4772cc4517
commit c5831cc4e8
24 changed files with 578 additions and 1230 deletions
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -47,8 +47,8 @@
              <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
              <hr>
            </div>
-            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats">
-              <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="20" [small]="true"></app-mempool-graph>
+            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
+              <app-mempool-graph [data]="mempoolStats.mempool"></app-mempool-graph>
            </div>
          </div>
        </div>
@@ -59,12 +59,8 @@
            <ng-container *ngTemplateOutlet="txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
            <br>
            <hr>
-            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats">
-              <app-chartist
-                  [data]="mempoolStats.weightPerSecond"
-                  [type]="'Line'"
-                  [options]="transactionsWeightPerSecondOptions">
-                </app-chartist>
+            <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
+              <app-incoming-transactions-graph [data]="mempoolStats.weightPerSecond"></app-incoming-transactions-graph>
            </div>
          </div>
        </div>
@@ -197,13 +193,14 @@
    </span>
    <ng-template #inSync>
      <div class="progress inc-tx-progress-bar">
-        <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
+        <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth, 'background-color': mempoolInfoData.value.progressColor}">&nbsp;</div>
        <div class="progress-text">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
      </div>
    </ng-template>
  </ng-template>
 </ng-template>

+
 <ng-template #difficultyEpoch>
  <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
  <div class="card-wrapper">
@@ -228,11 +225,11 @@
              <ng-template #arrowDownDifficulty >
                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
              </ng-template>
-              {{ epochData.change | absolute | number: '1.2-2' }} 
+              {{ epochData.change | absolute | number: '1.2-2' }}
              <span class="symbol">%</span>
            </div>
            <div class="symbol">
-              <span i18n="difficulty-box.previous">Previous</span>: 
+              <span i18n="difficulty-box.previous">Previous</span>:
              <span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
                <span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
                  <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
@@ -257,6 +254,12 @@
 </ng-template>


+<ng-template #loadingSpinner>
+  <div class="text-center loadingGraphs">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>
+
 <ng-template #loadingDifficulty>
  <div class="difficulty-skeleton loading-container">
    <div class="item">
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -58,11 +58,11 @@
  display: block;
  @media (min-width: 485px) {
    display: flex;
-    flex-direction: row; 
+    flex-direction: row;
  }
  h5 {
    margin-bottom: 10px;
-  } 
+  }
  .item {
    width: 50%;
    margin: 0px auto 20px;
@@ -131,7 +131,7 @@
 .latest-transactions {
  width: 100%;
  text-align: left;
-  table-layout:fixed; 
+  table-layout:fixed;
  tr, td, th {
    border: 0px;
  }
@@ -220,6 +220,11 @@
 .mempool-graph {
  height: 250px;
 }
+.loadingGraphs{
+  height: 250px;
+  display: grid;
+  place-items: center;
+}

 .inc-tx-progress-bar {
  max-width: 250px;
@@ -247,7 +252,7 @@
    color: #ffffff66;
    font-size: 12px;
  }
-  .item {    
+  .item {
    padding: 0 5px;
    width: 100%;
    &:nth-child(1) {
@@ -276,25 +281,25 @@
  justify-content: space-between;
  @media (min-width: 376px) {
    flex-direction: row;
-  }  
+  }
  .item {
    max-width: 150px;
    margin: 0;
    width: -webkit-fill-available;
    @media (min-width: 376px) {
      margin: 0 auto 0px;
-    }    
+    }
    &:first-child{
      display: none;
      @media (min-width: 485px) {
        display: block;
-      }    
+      }
      @media (min-width: 768px) {
        display: none;
-      }    
+      }
      @media (min-width: 992px) {
        display: block;
-      }    
+      }
    }
    &:last-child {
      margin-bottom: 0;
@@ -355,4 +360,4 @@
 .previous-retarget-sign {
  margin-right: -2px;
  font-size: 10px;
-}
+}
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -6,11 +6,11 @@ import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
-import * as Chartist from '@mempool/chartist';
 import { formatDate } from '@angular/common';
 import { WebsocketService } from '../services/websocket.service';
 import { SeoService } from '../services/seo.service';
 import { StorageService } from '../services/storage.service';
+import { EChartsOption } from 'echarts';

 interface MempoolBlocksData {
  blocks: number;
@@ -34,7 +34,7 @@ interface MempoolInfoData {
  memPoolInfo: MempoolInfo;
  vBytesPerSecond: number;
  progressWidth: string;
-  progressClass: string;
+  progressColor: string;
 }

 interface MempoolStatsData {
@@ -74,15 +74,15 @@ export class DashboardComponent implements OnInit {
  ) { }

  ngOnInit(): void {
-
    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
    this.seoService.resetTitle();
    this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
    this.network$ = merge(of(''), this.stateService.networkChanged$);
    this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
-    this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$.pipe(
-      map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
-    );
+    this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
+      .pipe(
+        map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
+      );

    this.mempoolInfoData$ = combineLatest([
      this.stateService.mempoolInfo$,
@@ -92,11 +92,21 @@ export class DashboardComponent implements OnInit {
      map(([mempoolInfo, vbytesPerSecond]) => {
        const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);

-        let progressClass = 'bg-danger';
-        if (percent <= 75) {
-          progressClass = 'bg-success';
-        } else if (percent <= 99) {
-          progressClass = 'bg-warning';
+        let progressColor = '#7CB342';
+        if (vbytesPerSecond > 1667) {
+          progressColor = '#FDD835';
+        }
+        if (vbytesPerSecond > 2000) {
+          progressColor = '#FFB300';
+        }
+        if (vbytesPerSecond > 2500) {
+          progressColor = '#FB8C00';
+        }
+        if (vbytesPerSecond > 3000) {
+          progressColor = '#F4511E';
+        }
+        if (vbytesPerSecond > 3500) {
+          progressColor = '#D81B60';
        }

        const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
@@ -111,7 +121,7 @@ export class DashboardComponent implements OnInit {
          memPoolInfo: mempoolInfo,
          vBytesPerSecond: vbytesPerSecond,
          progressWidth: percent + '%',
-          progressClass: progressClass,
+          progressColor: progressColor,
          mempoolSizeProgress: mempoolSizeProgress,
        };
      })
@@ -164,7 +174,7 @@ export class DashboardComponent implements OnInit {
          }

          let colorPreviousAdjustments = '#dc3545';
-          if (previousRetarget){
+          if (previousRetarget) {
            if (previousRetarget >= 0) {
              colorPreviousAdjustments = '#3bcc49';
            }
@@ -191,7 +201,6 @@ export class DashboardComponent implements OnInit {
        })
      );

-
    this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
      .pipe(
        map((mempoolBlocks) => {
@@ -226,50 +235,32 @@ export class DashboardComponent implements OnInit {
        }, []),
      );

-    this.mempoolStats$ = this.stateService.connectionState$.pipe(
-      filter((state) => state === 2),
-      switchMap(() => this.apiService.list2HStatistics$()),
-      switchMap((mempoolStats) => {
-        return merge(
-          this.stateService.live2Chart$
-            .pipe(
-              scan((acc, stats) => {
-                acc.unshift(stats);
-                acc = acc.slice(0, 120);
-                return acc;
-              }, mempoolStats)
-            ),
-          of(mempoolStats)
-        );
-      }),
-      map((mempoolStats) => {
-        return {
-          mempool: mempoolStats,
-          weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
-        };
-      }),
-      share(),
-    );
-
-    this.transactionsWeightPerSecondOptions = {
-        showArea: false,
-        showLine: true,
-        fullWidth: true,
-        showPoint: false,
-        low: 0,
-        axisY: {
-          offset: 40
-        },
-        axisX: {
-          labelInterpolationFnc: (value: any, index: any) => index % 24 === 0 ? formatDate(value, 'HH:mm', this.locale) : null,
-          offset: 20
-        },
-        plugins: [
-          Chartist.plugins.ctTargetLine({
-            value: 1667
-          }),
-        ]
-      };
+    this.mempoolStats$ = this.stateService.connectionState$
+      .pipe(
+        filter((state) => state === 2),
+        switchMap(() => this.apiService.list2HStatistics$()),
+        switchMap((mempoolStats) => {
+          return merge(
+            this.stateService.live2Chart$
+              .pipe(
+                scan((acc, stats) => {
+                  acc.unshift(stats);
+                  acc = acc.slice(0, 120);
+                  return acc;
+                }, mempoolStats)
+              ),
+            of(mempoolStats)
+          );
+        }),
+        map((mempoolStats) => {
+          const data = this.handleNewMempoolData(mempoolStats.concat([]));
+          return {
+            mempool: mempoolStats,
+            weightPerSecond: this.handleNewMempoolData(mempoolStats.concat([])),
+          };
+        }),
+        share(),
+      );
  }

  handleNewMempoolData(mempoolStats: OptimizedMempoolStats[]) {