From 42d591bf4c8854193b32169fcd519977c78c01cd Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sun, 12 May 2024 18:48:50 +0200
Subject: [PATCH] Block subsidy graph: add lower timeframes

---
 backend/src/api/mining/mining.ts                  |  2 +-
 .../block-fees-subsidy-graph.component.html       |  9 +++++++++
 .../block-fees-subsidy-graph.component.ts         | 15 ++++++++++-----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/backend/src/api/mining/mining.ts b/backend/src/api/mining/mining.ts
index 85554db2d..a4e92900f 100644
--- a/backend/src/api/mining/mining.ts
+++ b/backend/src/api/mining/mining.ts
@@ -45,7 +45,7 @@ class Mining {
    */
   public async $getHistoricalBlockFees(interval: string | null = null): Promise<any> {
     return await BlocksRepository.$getHistoricalBlockFees(
-      this.getTimeRange(interval, 5),
+      this.getTimeRange(interval),
       Common.getSqlInterval(interval)
     );
   }
diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
index 8e44cbf51..e14c991f0 100644
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.html
@@ -11,6 +11,15 @@
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
+          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 24h
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 432" [class.active]="radioGroupForm.get('dateSpan').value === '3d'">
+          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 3D
+        </label>
+        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 1008" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
+          <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1W
+        </label>
         <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
           <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]" formControlName="dateSpan"> 1M
         </label>
diff --git a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
index f4e0eb5ff..41090cb25 100644
--- a/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
+++ b/frontend/src/app/components/block-fees-subsidy-graph/block-fees-subsidy-graph.component.ts
@@ -67,14 +67,14 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
     this.seoService.setTitle($localize`:@@mining.block-fees-subsidy:Block Fees Vs Subsidy`);
     this.seoService.setDescription($localize`:@@meta.description.bitcoin.graphs.block-fees-subsidy:See the mining fees earned per Bitcoin block compared to the Bitcoin block subsidy, visualized in BTC and USD over time.`);
 
-    this.miningWindowPreference = this.miningService.getDefaultTimespan('1m');
+    this.miningWindowPreference = this.miningService.getDefaultTimespan('24h');
     this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
     this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
 
     this.route
     .fragment
     .subscribe((fragment) => {
-      if (['1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
+      if (['24h', '3d', '1w', '1m', '3m', '6m', '1y', '2y', '3y', 'all'].indexOf(fragment) > -1) {
         this.radioGroupForm.controls.dateSpan.setValue(fragment, { emitEvent: false });
       }
     });
@@ -137,8 +137,8 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
     this.chartOptions = {
       title: title,
       color: [
-        'var(--orange)',
-        'var(--success)',
+        '#ff9f00',
+        '#0aab2f',
       ],
       animation: false,
       grid: {
@@ -166,7 +166,12 @@ export class BlockFeesSubsidyGraphComponent implements OnInit {
             return '';
           }
 
-          let tooltip = `Around block <b style="color: white; margin-left: 2px">${data[0].axisValue}</b><br>`;
+          let tooltip = '';
+          if (['24h', '3d'].includes(this.timespan)) {
+            tooltip += $localize`At block <b style="color: white; margin-left: 2px">${data[0].axisValue}</b><br>`;
+          } else {
+            tooltip += $localize`Around block <b style="color: white; margin-left: 2px">${data[0].axisValue}</b><br>`;
+          }
           for (let i = data.length - 1; i >= 0; i--) {
             const tick = data[i];
             if (!this.showFiat) tooltip += `${tick.marker} ${tick.seriesName}: ${formatNumber(tick.data, this.locale, '1.0-3')} BTC<br>`;