Polish address balance graph, add period toggle

frontend/src/app/components/address/address.component.html

@@ -53,10 +53,20 @@
 
     <ng-container *ngIf="(stateService.backend$ | async) === 'esplora' && address && transactions && transactions.length > 2">
       <br>
+      <div class="title-tx">
+        <h2 class="text-left" i18n="address.balance-history">Balance History</h2>
+      </div>
       <div class="box">
+        <div class="widget-toggler" *ngIf="showBalancePeriod()">
+          <a href="" (click)="setBalancePeriod('all')" class="toggler-option"
+            [ngClass]="{'inactive': balancePeriod === 'all'}"><small i18n="all">all</small></a>
+          <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
+          <a href="" (click)="setBalancePeriod('1m')" class="toggler-option"
+            [ngClass]="{'inactive': balancePeriod === '1m'}"><small i18n="recent">recent</small></a>
+        </div>
         <div class="row">
           <div class="col-md">
-            <app-address-graph [address]="addressString" [isPubkey]="address?.is_pubkey" [stats]="address.chain_stats" />
+            <app-address-graph [address]="addressString" [isPubkey]="address?.is_pubkey" [stats]="address.chain_stats" [period]="balancePeriod" />
           </div>
         </div>
       </div>

frontend/src/app/components/address/address.component.scss

@@ -109,3 +109,19 @@ h1 {
     flex-grow: 0.5;
   }
 }
+
+.widget-toggler {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  right: 3px;
+  text-align: right;
+}
+
+.toggler-option {
+  text-decoration: none;
+}
+
+.inactive {
+  color: var(--transparent-fg);
+}

frontend/src/app/components/address/address.component.ts

@@ -38,6 +38,8 @@ export class AddressComponent implements OnInit, OnDestroy {
   txCount = 0;
   received = 0;
   sent = 0;
+  now = Date.now() / 1000;
+  balancePeriod: 'all' | '1m' = 'all';
 
   private tempTransactions: Transaction[];
   private timeTxIndexes: number[];
@@ -174,6 +176,10 @@ export class AddressComponent implements OnInit, OnDestroy {
 
         this.transactions = this.tempTransactions;
         this.isLoadingTransactions = false;
+
+        if (!this.showBalancePeriod()) {
+          this.setBalancePeriod('all');
+        }
       },
       (error) => {
         console.log(error);
@@ -296,6 +302,18 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.txCount = this.address.chain_stats.tx_count + this.address.mempool_stats.tx_count;
   }
 
+  setBalancePeriod(period: 'all' | '1m'): boolean {
+    this.balancePeriod = period;
+    return false;
+  }
+
+  showBalancePeriod(): boolean {
+    return this.transactions?.length && (
+      !this.transactions[0].status?.confirmed
+      || this.transactions[0].status.block_time > (this.now - (60 * 60 * 24 * 30))
+    );
+  }
+
   ngOnDestroy() {
     this.mainSubscription.unsubscribe();
     this.mempoolTxSubscription.unsubscribe();