Address widget timespans

frontend/custom-sv-config.json

@@ -24,7 +24,8 @@
       {
         "component": "address",
         "props": {
-          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo"
+          "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo",
+          "period": "1m"
         }
       },
       {

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

@@ -9,6 +9,15 @@ import { Router } from '@angular/router';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { StateService } from '../../services/state.service';
 
+const periodSeconds = {
+  '1d': (60 * 60 * 24),
+  '3d': (60 * 60 * 24 * 3),
+  '1w': (60 * 60 * 24 * 7),
+  '1m': (60 * 60 * 24 * 30),
+  '6m': (60 * 60 * 24 * 180),
+  '1y': (60 * 60 * 24 * 365),
+};
+
 @Component({
   selector: 'app-address-graph',
   templateUrl: './address-graph.component.html',
@@ -27,6 +36,7 @@ export class AddressGraphComponent implements OnChanges {
   @Input() address: string;
   @Input() isPubkey: boolean = false;
   @Input() stats: ChainStats;
+  @Input() period: '1d' | '3d' | '1w' | '1m' | '6m' | '1y' | 'all' = 'all';
   @Input() height: number = 200;
   @Input() right: number | string = 10;
   @Input() left: number | string = 70;
@@ -84,7 +94,24 @@ export class AddressGraphComponent implements OnChanges {
       return [d.time * 1000, balance, d];
     }).reverse();
 
-    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1])), 0);
+    if (this.period !== 'all') {
+      const now = Date.now();
+      const start = now - (periodSeconds[this.period] * 1000);
+      this.data = this.data.filter(d => d[0] >= start);
+      this.data.push(
+        {value: [now, this.stats.funded_txo_sum - this.stats.spent_txo_sum], symbol: 'none', tooltip: { show: false }}
+      );
+
+        // [now, this.stats.funded_txo_sum - this.stats.spent_txo_sum, {
+        // txid: null,
+        // height: null,
+        // value: this.stats.funded_txo_sum - this.stats.spent_txo_sum,
+        // time: Math.floor(now / 1000),
+      // }]);
+    }
+
+    const maxValue = this.data.reduce((acc, d) => Math.max(acc, Math.abs(d[1] || d.value[1])), 0);
+    const minValue = this.data.reduce((acc, d) => Math.min(acc, Math.abs(d[1] || d.value[1])), maxValue);
 
     this.chartOptions = {
       color: [
@@ -115,6 +142,9 @@ export class AddressGraphComponent implements OnChanges {
         },
         borderColor: '#000',
         formatter: function (data): string {
+          if (!data?.length || !data[0]?.data?.[2]?.txid) {
+            return '';
+          }
           const header = data.length === 1
             ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}`
             : `${data.length} transactions`;
@@ -148,13 +178,17 @@ export class AddressGraphComponent implements OnChanges {
           axisLabel: {
             color: 'rgb(110, 112, 121)',
             formatter: (val): string => {
-              if (maxValue > 1_000_000_000) {
+              let valSpan = maxValue - (this.period === 'all' ? 0 : minValue);
+              if (valSpan > 100_000_000_000) {
                 return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0)} BTC`;
-              } else if (maxValue > 100_000_000) {
+              }
+              else if (valSpan > 1_000_000_000) {
+                return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`;
+              } else if (valSpan > 100_000_000) {
                 return `${(val / 100_000_000).toFixed(1)} BTC`;
-              } else if (maxValue > 10_000_000) {
+              } else if (valSpan > 10_000_000) {
                 return `${(val / 100_000_000).toFixed(2)} BTC`;
-              } else if (maxValue > 1_000_000) {
+              } else if (valSpan > 1_000_000) {
                 return `${(val / 100_000_000).toFixed(3)} BTC`;
               } else {
                 return `${this.amountShortenerPipe.transform(val, 0)} sats`;
@@ -164,6 +198,7 @@ export class AddressGraphComponent implements OnChanges {
           splitLine: {
             show: false,
           },
+          min: this.period === 'all' ? 0 : 'dataMin'
         },
       ],
       series: [

frontend/src/app/components/balance-widget/balance-widget.component.ts

@@ -45,7 +45,6 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
       }),
     ).subscribe(addressSummary => {
       if (addressSummary) {
-        console.log('got address summary!');
         this.error = null;
         this.calculateStats(addressSummary);
       }
@@ -67,6 +66,5 @@ export class BalanceWidgetComponent implements OnInit, OnChanges {
     }
     this.delta7d = weekTotal;
     this.delta30d = monthTotal;
-    console.log('calculated address stats: ', weekTotal, monthTotal);
   }
 }

frontend/src/app/components/custom-dashboard/custom-dashboard.component.html

@@ -234,7 +234,7 @@
             <div class="card graph-card">
               <div class="card-body">
                 <h5 class="card-title mb-4" i18n="dashboard.balance-history">Balance History</h5>
-                <app-address-graph [address]="widget.props.address" [stats]="address?.chain_stats" [widget]="true" [height]="graphHeight"></app-address-graph>
+                <app-address-graph [address]="widget.props.address" [period]="widget.props.period || 'all'" [stats]="address?.chain_stats" [widget]="true" [height]="graphHeight"></app-address-graph>
               </div>
             </div>
           </div>

frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts

@@ -290,9 +290,6 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni
         : this.electrsApiService.getAddress$(addressString)
       ).pipe(
           catchError((err) => {
-            // this.isLoadingAddress = false;
-            // this.error = err;
-            // this.seoService.logSoft404();
             console.log(err);
             return of(null);
           }),