Rerefactor acceleration dashboard

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.html

@@ -28,19 +28,8 @@
   </div>
 
   <div *ngIf="widget">
-    <div class="acceleration-fees">
+    <div class="item">
-      <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
+      <h5 class="card-title" i18n="acceleration.block-fees">Out-of-band Fees Per Block</h5>
-        <h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
-        <p class="card-text">
-          <app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
-        </p>
-      </div>
-      <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
-        <h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
-        <p class="card-text">
-          <app-btc [satoshis]="stats.avgFeesPaid"></app-btc>
-        </p>
-      </div>
     </div>
   </div>
 
@@ -50,22 +39,4 @@
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
-
 </div>
-
-<ng-template #loadingHrStats>
-  <div class="item">
-    <h5 class="card-title" i18n="mining.avg-oob-fees-24h">Avg Out-of-band Fees (24h)</h5>
-    <p class="card-text">
-      <span class="skeleton-loader skeleton-loader-big"></span>
-    </p>
-  </div>
-</ng-template>
-<ng-template #loadingStats>
-  <div class="item">
-    <h5 class="card-title" i18n="mining.avg-oob-fees-1w">Avg Out-of-band Fees (1w)</h5>
-    <p class="card-text">
-      <span class="skeleton-loader skeleton-loader-big"></span>
-    </p>
-  </div>
-</ng-template>

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss

@@ -56,61 +56,16 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 238px;
+  max-height: 290px;
 }
 
-.acceleration-fees {
+h5 {
-  min-height: 56px;
+  margin-bottom: 10px;
-  display: block;
-  @media (min-width: 485px) {
-    display: flex;
-    flex-direction: row;
-  }
-  h5 {
-    margin-bottom: 10px;
-  }
-  .item {
-    width: 50%;
-    display: inline-block;
-    margin: 0px auto 20px;
-    &:nth-child(2) {
-      order: 2;
-      @media (min-width: 485px) {
-        order: 3;
-      }
-    }
-    &:nth-child(3) {
-      order: 3;
-      @media (min-width: 485px) {
-        order: 2;
-        display: block;
-      }
-      @media (min-width: 768px) {
-        display: none;
-      }
-      @media (min-width: 992px) {
-        display: block;
-      }
-    }
-    .card-title {
-      font-size: 1rem;
-      color: #4a68b9;
-    }
-    .card-text {
-      font-size: 18px;
-      span {
-        color: #ffffff66;
-        font-size: 12px;
-      }
-    }
-  }
 }
 
-.skeleton-loader {
+.card-title {
-  width: 100%;
+  font-size: 1rem;
-  display: block;
+  color: #4a68b9;
-  max-width: 80px;
-  margin: 15px auto 3px;
 }
 
 .disabled {

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.ts

@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnDestroy, OnInit } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
-import { Observable, combineLatest } from 'rxjs';
+import { Observable, Subscription, combineLatest } from 'rxjs';
-import { map, startWith, switchMap, tap } from 'rxjs/operators';
+import { map, max, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
 import { SeoService } from '../../../services/seo.service';
 import { formatNumber } from '@angular/common';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { download, formatterXAxis } from '../../../shared/graphs.utils';
+import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../../shared/graphs.utils';
 import { StorageService } from '../../../services/storage.service';
 import { MiningService } from '../../../services/mining.service';
 import { ActivatedRoute } from '@angular/router';
@@ -26,7 +26,7 @@ import { Acceleration } from '../../../interfaces/node-api.interface';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccelerationFeesGraphComponent implements OnInit {
+export class AccelerationFeesGraphComponent implements OnInit, OnDestroy {
   @Input() widget: boolean = false;
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
@@ -42,6 +42,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
 
   hrStatsObservable$: Observable<any>;
   statsObservable$: Observable<any>;
+  statsSubscription: Subscription;
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
@@ -66,26 +67,17 @@ export class AccelerationFeesGraphComponent implements OnInit {
 
   ngOnInit(): void {
     this.seoService.setTitle($localize`:@@6c453b11fd7bd159ae30bc381f367bc736d86909:Acceleration Fees`);
+    this.isLoading = true;
     if (this.widget) {
-      this.miningWindowPreference = '1w';
+      this.miningWindowPreference = '1m';
-      this.isLoading = true;
       this.timespan = this.miningWindowPreference;
 
-      this.hrStatsObservable$ = (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: '24h' })).pipe(
-        map((accelerations) => {
-          return {
-            avgFeesPaid: accelerations.filter(acc => acc.status === 'completed' && acc.lastUpdated < (Date.now() - (24 * 60 * 60 * 1000))).reduce((total, acc) => total + acc.feePaid, 0) / accelerations.length
-          };
-        })
-      );
-
       this.statsObservable$ = combineLatest([
         (this.accelerations$ || this.apiService.getAccelerationHistory$({ timeframe: this.miningWindowPreference })),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
-          this.isLoading = false;
         }),
         map(([accelerations, blockFeesResponse]) => {
           return {
@@ -121,11 +113,13 @@ export class AccelerationFeesGraphComponent implements OnInit {
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
-          this.isLoading = false;
-          this.cd.markForCheck();
         })
       );
     }
+    this.statsSubscription = this.statsObservable$.subscribe(() => {
+      this.isLoading = false;
+      this.cd.markForCheck();
+    });
   }
 
   prepareChartOptions(accelerations, blockFees) {
@@ -143,6 +137,8 @@ export class AccelerationFeesGraphComponent implements OnInit {
     }
 
     let last = null;
+    let minValue = Infinity;
+    let maxValue = 0;
     const data = [];
     for (const val of blockFees) {
       if (last == null) {
@@ -151,31 +147,29 @@ export class AccelerationFeesGraphComponent implements OnInit {
       let totalFeeDelta = 0;
       let totalFeePaid = 0;
       let totalCount = 0;
+      let blockCount = 0;
       while (last <= val.avgHeight) {
+        blockCount++;
         totalFeeDelta += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feeDelta, 0);
         totalFeePaid += (blockAccelerations[last] || []).reduce((total, acc) => total + acc.feePaid, 0);
         totalCount += (blockAccelerations[last] || []).length;
         last++;
       }
+      minValue = Math.min(minValue, val.avgFees);
+      maxValue = Math.max(maxValue, val.avgFees);
       data.push({
         ...val,
         feeDelta: totalFeeDelta,
-        feePaid: totalFeePaid,
+        avgFeePaid: (totalFeePaid / blockCount),
-        accelerations: totalCount,
+        accelerations: totalCount / blockCount,
       });
     }
 
     this.chartOptions = {
       title: title,
       color: [
-        '#1E88E5',
+        '#8F5FF6',
-        new graphic.LinearGradient(0, 0, 0, 0.65, [
+        '#6b6b6b',
-          { offset: 0, color: '#F4511E' },
-          { offset: 0.25, color: '#FB8C00' },
-          { offset: 0.5, color: '#FFB300' },
-          { offset: 0.75, color: '#FDD835' },
-          { offset: 1, color: '#7CB342' }
-        ]),
       ],
       animation: false,
       grid: {
@@ -205,11 +199,11 @@ export class AccelerationFeesGraphComponent implements OnInit {
           let tooltip = `<b style="color: white; margin-left: 2px">
             ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
-          for (const tick of data) {
+          for (const tick of data.reverse()) {
-            if (tick.seriesIndex === 1) {
+            if (tick.data[1] >= 1_000_000) {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1] / 100_000_000, this.locale, '1.0-3')} BTC<br>`;
+            } else {
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats<br>`;
-            } else if (tick.seriesIndex === 0) {
-              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}<br>`;
             }
           }
 
@@ -224,16 +218,27 @@ export class AccelerationFeesGraphComponent implements OnInit {
       },
       xAxis: data.length === 0 ? undefined :
       {
-        type: 'time',
+        name: this.widget ? undefined : formatterXAxisLabel(this.locale, this.timespan),
-        splitNumber: this.isMobile() ? 5 : 10,
+        nameLocation: 'middle',
+        nameTextStyle: {
+          padding: [10, 0, 0, 0],
+        },
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { onZero: true },
         axisLabel: {
+          formatter: val => formatterXAxisTimeCategory(this.locale, this.timespan, parseInt(val, 10)),
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12,
           hideOverlap: true,
-        }
+          padding: [0, 5],
+        },
       },
-      legend: (this.widget || data.length === 0) ? undefined : {
+      legend: {
         data: [
           {
-            name: 'Total accelerations',
+            name: 'In-band fees per block',
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -241,7 +246,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
             icon: 'roundRect',
           },
           {
-            name: 'Out-of-band fees paid',
+            name: 'Out-of-band fees per block',
             inactiveColor: 'rgb(110, 112, 121)',
             textStyle: {
               color: 'white',
@@ -249,6 +254,11 @@ export class AccelerationFeesGraphComponent implements OnInit {
             icon: 'roundRect',
           },
         ],
+        selected: {
+          'In-band fees per block': false,
+          'Out-of-band fees per block': true,
+        },
+        show: !this.widget,
       },
       yAxis: data.length === 0 ? undefined : [
         {
@@ -288,35 +298,23 @@ export class AccelerationFeesGraphComponent implements OnInit {
       series: data.length === 0 ? undefined : [
         {
           legendHoverLink: false,
-          zlevel: 0,
+          zlevel: 1,
-          yAxisIndex: 1,
+          name: 'Out-of-band fees per block',
-          name: 'Total accelerations',
+          data: data.map(block =>  [block.timestamp * 1000, block.avgFeePaid, block.avgHeight]),
-          data: data.map(block =>  [block.timestamp * 1000, block.accelerations, block.avgHeight]),
+          stack: 'Total',
-          type: 'line',
+          type: 'bar',
-          symbol: 'none',
+          barWidth: '100%',
-          areaStyle: {
+          large: true,
-            color: '#1E88E5',
-            opacity: 0.5
-          },
-          lineStyle: {
-            width: 1,
-            opacity: 1,
-          },
-          step: 'middle',
         },
         {
           legendHoverLink: false,
-          zlevel: 1,
+          zlevel: 0,
-          yAxisIndex: 0,
+          name: 'In-band fees per block',
-          name: 'Out-of-band fees paid',
+          data: data.map(block =>  [block.timestamp * 1000, block.avgFees, block.avgHeight]),
-          data: data.map(block =>  [block.timestamp * 1000, block.feePaid, block.avgHeight]),
+          stack: 'Total',
-          type: 'line',
+          type: 'bar',
-          smooth: 0.25,
+          barWidth: '100%',
-          symbol: 'none',
+          large: true,
-          lineStyle: {
-            width: 2,
-            opacity: 1,
-          }
         },
       ],
       dataZoom: (this.widget || data.length === 0 )? undefined : [{
@@ -344,6 +342,17 @@ export class AccelerationFeesGraphComponent implements OnInit {
           }
         },
       }],
+      visualMap: {
+        type: 'continuous',
+        min: minValue,
+        max: maxValue,
+        dimension: 1,
+        seriesIndex: 1,
+        show: false,
+        inRange: {
+          color: ['#F4511E7f', '#FB8C007f', '#FFB3007f', '#FDD8357f', '#7CB3427f'].reverse() // Gradient color range
+        }
+      },
     };
   }
 
@@ -372,4 +381,10 @@ export class AccelerationFeesGraphComponent implements OnInit {
     this.chartOptions.backgroundColor = 'none';
     this.chartInstance.setOption(this.chartOptions);
   }
+
+  ngOnDestroy(): void {
+    if (this.statsSubscription) {
+      this.statsSubscription.unsubscribe();
+    }
+  }
 }

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts

@@ -12,7 +12,7 @@ import { Acceleration } from '../../../interfaces/node-api.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccelerationStatsComponent implements OnInit {
-  @Input() timespan: '24h' | '1w' = '24h';
+  @Input() timespan: '24h' | '1w' | '1m' = '24h';
   @Input() accelerations$: Observable<Acceleration[]>;
   public accelerationStats$: Observable<any>;
 

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -8,9 +8,16 @@
     <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
-        <th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
+        <ng-container *ngIf="pending">
-        <th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
+          <th class="fee-rate text-right" i18n="transaction.fee|Transaction fee">Fee Rate</th>
-        <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
+          <th class="bid text-right" i18n="transaction.fee|Transaction fee">Acceleration Bid</th>
+          <th class="time text-right" i18n="accelerator.block">Requested</th>
+        </ng-container>
+        <ng-container *ngIf="!pending">
+          <th class="fee text-right" i18n="transaction.fee|Transaction fee">Out-of-band Fee</th>
+          <th class="block text-right" i18n="accelerator.block">Block</th>
+          <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
+        </ng-container>
       </thead>
       <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <tr *ngFor="let acceleration of accelerations; let i= index;">
@@ -19,20 +26,33 @@
               <app-truncate [text]="acceleration.txid" [lastChars]="5"></app-truncate>
             </a>
           </td>
-          <td *ngIf="acceleration.feePaid" class="fee text-right">
+          <ng-container *ngIf="pending">
-            {{ (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+            <td class="fee-rate text-right">
-          </td>
+              <app-fee-rate [fee]="acceleration.effectiveFee" [weight]="acceleration.effectiveVsize * 4"></app-fee-rate>
-          <td *ngIf="!acceleration.feePaid" class="fee text-right">
+            </td>
-            ~
+            <td class="bid text-right">
-          </td>
+              {{ (acceleration.feeDelta) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
-          <td class="fee-delta text-right">
+            </td>
-            {{ acceleration.feeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+            <td class="time text-right">
-          </td>
+              <app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time>
-          <td class="status text-right">
+            </td>
-            <span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="transaction.rbf.mined">Pending</span>
+          </ng-container>
-            <span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+          <ng-container *ngIf="!pending">
-            <span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
+            <td *ngIf="acceleration.feePaid" class="fee text-right">
-          </td>
+              {{ (acceleration.feePaid) | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
+            </td>
+            <td *ngIf="!acceleration.feePaid" class="fee text-right">
+              ~
+            </td>
+            <td class="block text-right">
+              <a [routerLink]="['/block' | relativeUrl, acceleration.blockHeight]">{{ acceleration.blockHeight }}</a>
+            </td>
+            <td class="status text-right">
+              <span *ngIf="acceleration.status === 'accelerating'" class="badge badge-warning" i18n="transaction.rbf.mined">Pending</span>
+              <span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
+              <span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
+            </td>
+          </ng-container>
         </tr>
       </tbody>
       <ng-template #skeleton>
@@ -63,7 +83,8 @@
 
   <ng-template #noData>
     <div class="no-data">
-      <span i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
+      <span *ngIf="pending" i18n="accelerations.no-accelerations-yet">There are no active accelerations yet!</span>
+      <span *ngIf="!pending" i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
     </div>
   </ng-template>
   

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss

@@ -50,7 +50,7 @@ tr, td, th {
 }
 
 .txid {
-  width: 30%;
+  width: 25%;
   @media (max-width: 1100px) {
     padding-right: 10px;
   }
@@ -64,10 +64,18 @@ tr, td, th {
 }
 
 .fee {
-  width: 25%;
+  width: 35%;
 }
 
-.fee-delta {
+.block {
+  width: 20%;
+}
+
+.bid {
+  width: 30%;
+}
+
+.time {
   width: 25%;
 }
 

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -7,7 +7,7 @@
     <!-- pending stats -->
     <div class="col">
       <div class="main-title">
-        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
+        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Active accelerations</span>
       </div>
       <div class="card-wrapper">
         <div class="card">
@@ -18,16 +18,16 @@
       </div>
     </div>
 
-    <!-- 1w stats -->
+    <!-- 1m stats -->
     <div class="col">
       <div class="main-title">
         <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
-        <span style="font-size: xx-small" i18n="mining.144-blocks">(1008 blocks)</span>
+        <span style="font-size: xx-small" i18n="mining.144-blocks">(1 month)</span>
       </div>
       <div class="card-wrapper">
         <div class="card">
           <div class="card-body more-padding">
-            <app-acceleration-stats timespan="1w" [accelerations$]="minedAccelerations$"></app-acceleration-stats>
+            <app-acceleration-stats timespan="1m" [accelerations$]="minedAccelerations$"></app-acceleration-stats>
           </div>
         </div>
       </div>
@@ -54,11 +54,23 @@
       </div>
     </div>
 
-    <!-- Pending List -->
+    <!-- Avg block fees graph -->
+    <!-- <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card">
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
+          <app-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
+          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- Recent Accelerations List -->
     <div class="col">
       <div class="card list-card">
         <div class="card-body">
-          <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Pending Accelerations</h5>
+          <div class="title-link">
+            <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Active Accelerations</h5>
+          </div>
           <app-accelerations-list [attr.data-cy]="'pending-accelerations'" [widget]=true [pending]="true" [accelerations$]="pendingAccelerations$"></app-accelerations-list>
         </div>
       </div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -56,7 +56,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     this.accelerations$ = this.stateService.chainTip$.pipe(
       distinctUntilChanged(),
       switchMap((chainTip) => {
-        return this.apiService.getAccelerationHistory$({ timeframe: '1w' });
+        return this.apiService.getAccelerationHistory$({ timeframe: '1m' });
       }),
       catchError((e) => {
         return of([]);