Tidy acceleration dashboard, add missing fields

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

@@ -28,17 +28,17 @@
   </div>
 
   <div *ngIf="widget">
-    <div class="acceleration-fees" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
-      <div class="item">
-        <h5 class="card-title" i18n="mining.???">???</h5>
+    <div class="acceleration-fees">
+      <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
+        <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (24h)</h5>
         <p class="card-text">
-          ???
+          {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
         </p>
       </div>
-      <div class="item">
-        <h5 class="card-title" i18n="block.???">???</h5>
+      <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
+        <h5 class="card-title" i18n="mining.avg-fee-delta-1w">Avg Fee Delta (1w)</h5>
         <p class="card-text">
-          ???
+          {{ stats.avgFeeDelta | number }} <span class="symbol" i18n="shared.sat|sat">sat</span>
         </p>
       </div>
     </div>
@@ -53,19 +53,19 @@
 
 </div>
 
-<ng-template #loadingStats>
-  <div class="acceleration-fees">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.???">???</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="block.???">???</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
+<ng-template #loadingHrStats>
+  <div class="item">
+    <h5 class="card-title" i18n="mining.avg-fee-delta-24h">Avg Fee Delta (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-fee-delta-1w">Avg Fee Delta (1w)</h5>
+    <p class="card-text">
+      <span class="skeleton-loader skeleton-loader-big"></span>
+    </p>
   </div>
 </ng-template>

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

@@ -38,6 +38,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
     renderer: 'svg',
   };
 
+  hrStatsObservable$: Observable<any>;
   statsObservable$: Observable<any>;
   isLoading = true;
   formatNumber = formatNumber;
@@ -67,18 +68,26 @@ export class AccelerationFeesGraphComponent implements OnInit {
       this.miningWindowPreference = '1w';
       this.isLoading = true;
       this.timespan = this.miningWindowPreference;
+
+      this.hrStatsObservable$ = this.apiService.getAccelerationHistory$('24h').pipe(
+        map((accelerations) => {
+          return {
+            avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
+          };
+        })
+      );
+
       this.statsObservable$ = combineLatest([
         this.apiService.getAccelerationHistory$(this.miningWindowPreference),
         this.apiService.getHistoricalBlockFees$(this.miningWindowPreference),
       ]).pipe(
         tap(([accelerations, blockFeesResponse]) => {
-          console.log(accelerations, blockFeesResponse.body);
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
           this.isLoading = false;
         }),
         map(([accelerations, blockFeesResponse]) => {
           return {
-
+            avgFeeDelta: accelerations.filter(acc => acc.status === 'mined' || acc.status === 'completed').reduce((total, acc) => total + acc.feeDelta, 0) / accelerations.length
           };
         }),
       );
@@ -112,12 +121,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
           this.prepareChartOptions(accelerations, blockFeesResponse.body);
           this.isLoading = false;
           this.cd.markForCheck();
-        }),
-        map(([accelerations, blockFeesResponse]) => {
-          return {
-
-          };
-        }),
+        })
       );
     }
   }
@@ -159,6 +163,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
     this.chartOptions = {
       title: title,
       color: [
+        '#1E88E5',
         new graphic.LinearGradient(0, 0, 0, 0.65, [
           { offset: 0, color: '#F4511E' },
           { offset: 0.25, color: '#FB8C00' },
@@ -166,7 +171,6 @@ export class AccelerationFeesGraphComponent implements OnInit {
           { offset: 0.75, color: '#FDD835' },
           { offset: 1, color: '#7CB342' }
         ]),
-        '#1E88E5',
       ],
       animation: false,
       grid: {
@@ -197,9 +201,9 @@ export class AccelerationFeesGraphComponent implements OnInit {
             ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;
 
           for (const tick of data) {
-            if (tick.seriesIndex === 0) {
+            if (tick.seriesIndex === 1) {
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')} sats<br>`;
-            } else if (tick.seriesIndex === 1) {
+            } else if (tick.seriesIndex === 0) {
               tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data[1], this.locale, '1.0-0')}<br>`;
             }
           }
@@ -224,17 +228,17 @@ export class AccelerationFeesGraphComponent implements OnInit {
       legend: (this.widget || data.length === 0) ? undefined : {
         data: [
           {
-            name: 'Total fee delta',
+            name: 'Total accelerations',
             inactiveColor: 'rgb(110, 112, 121)',
-            textStyle: {
+            textStyle: {  
               color: 'white',
             },
             icon: 'roundRect',
           },
           {
-            name: 'Total accelerations',
+            name: 'Total fee delta',
             inactiveColor: 'rgb(110, 112, 121)',
-            textStyle: {  
+            textStyle: {
               color: 'white',
             },
             icon: 'roundRect',
@@ -247,7 +251,11 @@ export class AccelerationFeesGraphComponent implements OnInit {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val) => {
-              return `${val / 100_000_000} BTC`;
+              if (val >= 1_000_000) {
+                return `${(val / 100_000_000).toPrecision(5)} BTC`;
+              } else {
+                return `${val} sats`;
+              }
             }
           },
           splitLine: {
@@ -273,6 +281,24 @@ export class AccelerationFeesGraphComponent implements OnInit {
         },
       ],
       series: data.length === 0 ? undefined : [
+        {
+          legendHoverLink: false,
+          zlevel: 0,
+          yAxisIndex: 1,
+          name: 'Total accelerations',
+          data: data.map(block =>  [block.timestamp * 1000, block.accelerations, block.avgHeight]),
+          type: 'line',
+          symbol: 'none',
+          areaStyle: {
+            color: '#1E88E5',
+            opacity: 0.5
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 1,
+          },
+          step: 'middle',
+        },
         {
           legendHoverLink: false,
           zlevel: 1,
@@ -283,20 +309,10 @@ export class AccelerationFeesGraphComponent implements OnInit {
           smooth: 0.25,
           symbol: 'none',
           lineStyle: {
-            width: 1,
+            width: 2,
             opacity: 1,
           }
         },
-        {
-          legendHoverLink: false,
-          zlevel: 0,
-          yAxisIndex: 1,
-          name: 'Total accelerations',
-          data: data.map(block =>  [block.timestamp * 1000, block.accelerations, block.avgHeight]),
-          type: 'bar',
-          barWidth: '100%',
-          large: true,
-        },
       ],
       dataZoom: (this.widget || data.length === 0 )? undefined : [{
         type: 'inside',

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html

@@ -46,17 +46,17 @@
   </div>
 
   <div *ngIf="widget">
-    <div class="block-fee-rates" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
-      <div class="item">
-        <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
+    <div class="block-fee-rates">
+      <div class="item" *ngIf="(hrStatsObservable$ | async) as stats; else loadingHrStats">
+        <h5 class="card-title" i18n="mining.avg-block-fee-24h">Avg Block Fee (24h)</h5>
         <p class="card-text">
           <app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate>
         </p>
       </div>
-      <div class="item">
-        <h5 class="card-title" i18n="block.???">???</h5>
+      <div class="item" *ngIf="(statsObservable$ | async) as stats; else loadingStats">
+        <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
         <p class="card-text">
-          ???
+          <app-fee-rate [fee]="stats.avgMedianRate"></app-fee-rate>
         </p>
       </div>
     </div>
@@ -71,19 +71,19 @@
 
 </div>
 
+<ng-template #loadingHrStats>
+  <div class="item">
+    <h5 class="card-title" i18n="mining.avg-block-fee-24h">Avg Block Fee (24h)</h5>
+    <p class="card-text">
+      <span class="skeleton-loader skeleton-loader-big"></span>
+    </p>
+  </div>
+</ng-template>
 <ng-template #loadingStats>
-  <div class="block-fee-rates">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.avg-block-fee">Avg Block Fee</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
-    <div class="item">
-      <h5 class="card-title" i18n="block.???">???</h5>
-      <p class="card-text">
-        <span class="skeleton-loader skeleton-loader-big"></span>
-      </p>
-    </div>
+  <div class="item">
+    <h5 class="card-title" i18n="mining.avg-block-fee-1m">Avg Block Fee (1m)</h5>
+    <p class="card-text">
+      <span class="skeleton-loader skeleton-loader-big"></span>
+    </p>
   </div>
 </ng-template>

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -41,6 +41,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
     renderer: 'svg',
   };
 
+  hrStatsObservable$: Observable<any>;
   statsObservable$: Observable<any>;
   isLoading = true;
   formatNumber = formatNumber;
@@ -85,6 +86,19 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         });
     }
 
+    this.hrStatsObservable$ = combineLatest([
+      this.apiService.getHistoricalBlockFeeRates$('24h'),
+      this.stateService.rateUnits$
+    ]).pipe(
+      map(([response, rateUnits]) => {
+        return {
+          blockCount: parseInt(response.headers.get('x-total-count'), 10),
+          avgMedianRate: response.body.length ? response.body.reduce((acc, rate) => acc + rate.avgFee_50, 0) / response.body.length : 0,
+        };
+      }),
+      share(),
+    );
+
     this.statsObservable$ = combineLatest([
         this.widget ? of(this.miningWindowPreference) : this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)),
         this.stateService.rateUnits$