Tidy acceleration dashboard, add missing fields

2023-08-30 22:25:33 +09:00 · 2023-08-30 22:25:33 +09:00 · 472a76560f
commit 472a76560f
parent f26b630aab
4 changed files with 97 additions and 67 deletions
--- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.html
+++ b/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">
+<ng-template #loadingHrStats>
  <div class="item">
-      <h5 class="card-title" i18n="mining.???">???</h5>
+    <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>
-    <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>
 </ng-template>
--- a/frontend/src/app/components/acceleration-fees-graph/acceleration-fees-graph.component.ts
+++ b/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,7 +228,7 @@ 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: {  
              color: 'white',
@ -232,7 +236,7 @@ export class AccelerationFeesGraphComponent implements OnInit {
            icon: 'roundRect',
          },
          {
-            name: 'Total accelerations',
+            name: 'Total fee delta',
            inactiveColor: 'rgb(110, 112, 121)',
            textStyle: {
              color: 'white',
@ -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',
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
+++ b/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 #loadingStats>
-  <div class="block-fee-rates">
+<ng-template #loadingHrStats>
  <div class="item">
-      <h5 class="card-title" i18n="mining.avg-block-fee">Avg Block Fee</h5>
+    <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="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>
-    <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>
 </ng-template>
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/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$