[accelerator] show acceleration count in aggregated history chart, show 1y history by default in dashboard

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

@@ -11,12 +11,6 @@
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="daysAvailable">
       <div class="btn-group btn-group-toggle" name="radioBasic">
-        <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
-          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 24H
-        </label>
-        <label class="btn btn-primary btn-sm" *ngIf="daysAvailable >= 1" [class.active]="radioGroupForm.get('dateSpan').value === '3d'">
-          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 3D
-        </label>
         <label class="btn btn-primary btn-sm" *ngIf="daysAvailable >= 3" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
           <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" formControlName="dateSpan"> 1W
         </label>

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { EChartsOption } from '../../../graphs/echarts';
+import { echarts, EChartsOption } from '../../../graphs/echarts';
 import { Observable, Subject, Subscription, combineLatest, fromEvent, merge, share } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
 import { SeoService } from '../../../services/seo.service';
@@ -8,11 +8,10 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { download, formatterXAxis, formatterXAxisLabel, formatterXAxisTimeCategory } from '../../../shared/graphs.utils';
 import { StorageService } from '../../../services/storage.service';
 import { MiningService } from '../../../services/mining.service';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { Acceleration } from '../../../interfaces/node-api.interface';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { StateService } from '../../../services/state.service';
-import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url.pipe';
 
 @Component({
   selector: 'app-acceleration-fees-graph',
@@ -31,9 +30,9 @@ import { RelativeUrlPipe } from '../../../shared/pipes/relative-url/relative-url
 export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDestroy {
   @Input() widget: boolean = false;
   @Input() height: number = 300;
-  @Input() right: number | string = 45;
+  @Input() right: number | string = 70;
-  @Input() left: number | string = 75;
+  @Input() left: number | string = 55;
-  @Input() period: '24h' | '3d' | '1w' | '1m' | 'all' = '1w';
+  @Input() period: '24h' | '1w' | '1m' | '1y' | 'all' = '1y';
   @Input() accelerations$: Observable<Acceleration[]>;
 
   miningWindowPreference: string;
@@ -49,7 +48,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
   isLoading = true;
   formatNumber = formatNumber;
   timespan = '';
-  periodSubject$: Subject<'24h' | '3d' | '1w' | '1m' | 'all'> = new Subject();
+  periodSubject$: Subject<'24h' | '1w' | '1m' | '1y' | 'all'> = new Subject();
   chartInstance: any = undefined;
   daysAvailable: number = 0;
 
@@ -62,9 +61,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
     private miningService: MiningService,
     private route: ActivatedRoute,
     public stateService: StateService,
-    private cd: ChangeDetectorRef,
+    private cd: ChangeDetectorRef
-    private router: Router,
-    private zone: NgZone,
   ) {
     this.radioGroupForm = this.formBuilder.group({ dateSpan: '1w' });
     this.radioGroupForm.controls.dateSpan.setValue('1w');
@@ -81,7 +78,7 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
     
     this.route.fragment.subscribe((fragment) => {
-      if (['24h', '3d', '1w', '1m', '3m', 'all'].indexOf(fragment) > -1) {
+      if (['1w', '1m', '1y', 'all'].indexOf(fragment) > -1) {
         this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
       }
     });
@@ -96,7 +93,9 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
           if (!this.widget) {
             this.storageService.setValue('miningWindowPreference', timespan);
           }
-          this.isLoading = true;
+          if (timespan !== this.timespan) {
+            this.isLoading = true;
+          }
           this.timespan = timespan;
           return this.servicesApiService.getAggregatedAccelerationHistory$({timeframe: this.timespan});
         })
@@ -118,6 +117,9 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.period) {
+      if (this.period === '24h') {
+        this.period = '1m';
+      }
       this.periodSubject$.next(this.period);
     }
   }
@@ -139,13 +141,19 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
     this.chartOptions = {
       title: title,
       color: [
-        '#8F5FF6',
+        new echarts.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' }
+        ]),
+        '#ab2dce',
       ],
       animation: false,
       grid: {
-        height: (this.widget && this.height) ? this.height - 30 : undefined,
+        height: (this.widget && this.height) ? this.height - 50 : undefined,
-        top: this.widget ? 20 : 40,
+        top: this.widget ? 40 : 60,
         bottom: this.widget ? 30 : 80,
         right: this.right,
         left: this.left,
@@ -167,17 +175,18 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
         formatter: (ticks) => {
           let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(ticks[0].axisValue, 10))}</b><br>`;
 
-          if (ticks[0].data[1] > 10_000_000) {
+          for (const tick of ticks) {
-            tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1] / 100_000_000, this.locale, '1.0-8')} BTC<br>`;
+            if (tick.seriesName === 'Total bid boost') {
-          } else {
+              if (tick.data[1] > 10_000_000) {
-            tooltip += `${ticks[0].marker} ${ticks[0].seriesName}: ${formatNumber(ticks[0].data[1], this.locale, '1.0-0')} sats<br>`;
+                tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1] / 100_000_000, this.locale, '1.0-8')} BTC<br>`;
-          }
+              } else {
-
+                tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats<br>`;
-          if (['24h', '3d'].includes(this.timespan)) {
+              }
-            tooltip += `<small>` + $localize`At block: ${ticks[0].data[2]}` + `</small>`;
+            } else if (tick && tick.seriesName === 'Accelerated') {
-          } else {
+              tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}<br>`;
-            tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
+            }  
           }
+          tooltip += `<small>` + $localize`Around block: ${ticks[0].data[2]}` + `</small>`;
 
           return tooltip;
         }
@@ -209,6 +218,17 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
             textStyle: {
               color: 'white',
             },
+            itemStyle: {
+              color: '#FFB300',
+            },
+            icon: 'roundRect',
+          },
+          {
+            name: 'Accelerated',
+            inactiveColor: 'rgb(110, 112, 121)',
+            textStyle: {
+              color: 'white',
+            },
             icon: 'roundRect',
           },
         ],
@@ -220,6 +240,13 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
       yAxis: data.length === 0 ? undefined : [
         {
           type: 'value',
+          name: 'Total bid boost',
+          position: 'right',
+          nameTextStyle: {
+            align: 'right',
+            padding: [0, -65, 0, 0],
+            fontStyle: 'italic',
+          },
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
@@ -230,6 +257,20 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
               }
             }
           },
+          splitLine: null
+        },
+        {
+          type: 'value',
+          name: 'Accelerated',
+          position: 'left',
+          axisLabel: {
+            color: 'rgb(110, 112, 121)',
+          },
+          nameTextStyle: {
+            align: 'right',
+            padding: [0, -35, 0, 0],
+            fontStyle: 'italic',
+          },
           splitLine: {
             lineStyle: {
               type: 'dotted',
@@ -238,33 +279,28 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
             }
           },
         },
-        {
-          type: 'value',
-          position: 'right',
-          axisLabel: {
-            color: 'rgb(110, 112, 121)',
-            formatter: function(val) {
-              return `${val}`;
-            }.bind(this)
-          },
-          splitLine: {
-            show: false,
-          },
-        },
       ],
       series: data.length === 0 ? undefined : [
         {
-          legendHoverLink: false,
-          zlevel: 1,
           name: 'Total bid boost',
           data: data.map(h =>  {
             return [h.timestamp * 1000, h.sumBidBoost, h.avgHeight]
           }),
-          stack: 'Total',
+          type: 'line',
+          symbol: 'none',
+          lineStyle: {
+            width: 1,
+          },
+          smooth: true,
+        },
+        {
+          name: 'Accelerated',
+          yAxisIndex: 1,
+          data: data.map(h =>  {
+            return [h.timestamp * 1000, h.count, h.avgHeight]
+          }),
           type: 'bar',
           barWidth: '90%',
-          large: true,
-          barMinHeight: 3,
         },
       ],
       dataZoom: (this.widget || data.length === 0 )? undefined : [{
@@ -297,19 +333,6 @@ export class AccelerationFeesGraphComponent implements OnInit, OnChanges, OnDest
 
   onChartInit(ec) {
     this.chartInstance = ec;
-
-    this.chartInstance.on('click', (e) => {
-      this.zone.run(() => {
-        if (['24h', '3d'].includes(this.timespan)) {
-          const url = new RelativeUrlPipe(this.stateService).transform(`/block/${e.data[2]}`);
-          if (e.event.event.shiftKey || e.event.event.ctrlKey || e.event.event.metaKey) {
-            window.open(url);
-          } else {
-            this.router.navigate([url]);
-          }
-        }
-      });
-    });
   }
 
   isMobile() {

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

@@ -16,7 +16,7 @@ export type AccelerationStats = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccelerationStatsComponent implements OnInit, OnChanges {
-  @Input() timespan: '24h' | '3d' | '1w' | '1m' | 'all' = '1w';
+  @Input() timespan: '24h' | '1m' | '1y' | 'all' = '1y';
   accelerationStats$: Observable<AccelerationStats>;
   blocksInPeriod: number = 7 * 144;
 
@@ -38,14 +38,11 @@ export class AccelerationStatsComponent implements OnInit, OnChanges {
       case '24h':
         this.blocksInPeriod = 144;
         break;
-      case '3d':
-        this.blocksInPeriod = 3 * 144;
-        break;
-      case '1w':
-        this.blocksInPeriod = 7 * 144;
-        break;
       case '1m':
-        this.blocksInPeriod = 30 * 144;
+        this.blocksInPeriod = 30.5 * 144;
+        break;
+      case '1y':
+        this.blocksInPeriod = 30.5 * 144 * 365;
         break;  
       case 'all':
         this.blocksInPeriod = Infinity;

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

@@ -26,12 +26,12 @@
           @case ('24h') {
             <span style="font-size: xx-small" i18n="mining.1-day">(1 day)</span>
           }
-          @case ('1w') {
-            <span style="font-size: xx-small" i18n="mining.1-week">(1 week)</span>
-          }
           @case ('1m') {
             <span style="font-size: xx-small" i18n="mining.1-month">(1 month)</span>
           }
+          @case ('1y') {
+            <span style="font-size: xx-small" i18n="mining.1-year">(1 year)</span>
+          }
           @case ('all') {
             <span style="font-size: xx-small" i18n="mining.all-time">(all time)</span>
           }
@@ -45,12 +45,12 @@
               <a href="" (click)="setTimespan('24h')" class="toggler-option"
                 [ngClass]="{'inactive': timespan === '24h'}"><small>24h</small></a>
               <span style="color: #ffffff66; font-size: 8px"> | </span>
-              <a href="" (click)="setTimespan('1w')" class="toggler-option"
-                [ngClass]="{'inactive': timespan === '1w'}"><small>1w</small></a>
-              <span style="color: #ffffff66; font-size: 8px"> | </span>
               <a href="" (click)="setTimespan('1m')" class="toggler-option"
               [ngClass]="{'inactive': timespan === '1m'}"><small>1m</small></a>
               <span style="color: #ffffff66; font-size: 8px"> | </span>
+              <a href="" (click)="setTimespan('1y')" class="toggler-option"
+                [ngClass]="{'inactive': timespan === '1y'}"><small>1y</small></a>
+              <span style="color: #ffffff66; font-size: 8px"> | </span>
               <a href="" (click)="setTimespan('all')" class="toggler-option"
               [ngClass]="{'inactive': timespan === 'all'}"><small>all</small></a>
             </div>
@@ -79,13 +79,15 @@
     <div class="col" style="margin-bottom: 1.47rem">
       <div class="card graph-card">
         <div class="card-body pl-2 pr-2">
-          <h5 class="card-title" i18n="acceleration.total-bid-boost">Total Bid Boost</h5>
+          <h5 class="card-title" i18n="acceleration.historical-trend">Historical Trend</h5>
           <div class="mempool-graph">
             <app-acceleration-fees-graph
               [height]="graphHeight"
               [attr.data-cy]="'acceleration-fees'"
               [widget]=true
               [period]="timespan"
+              [right]="80"
+              [left]="50"
             ></app-acceleration-fees-graph>
           </div>
           <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>

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

@@ -37,7 +37,7 @@ export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
   webGlEnabled = true;
   seen: Set<string> = new Set();
   firstLoad = true;
-  timespan: '24h' | '3d' | '1w' | '1m' | 'all' = '1w';
+  timespan: '24h' | '1m' | '1y' | 'all' = '1y';
 
   accelerationDeltaSubscription: Subscription;