From ccb27dbdb90a1a36d502725b04aac5bd0a964bdd Mon Sep 17 00:00:00 2001 From: Mononaut Date: Fri, 26 Apr 2024 17:53:44 +0000 Subject: [PATCH] Address widget timespans --- frontend/custom-sv-config.json | 3 +- .../address-graph/address-graph.component.ts | 45 ++++++++++++++++--- .../balance-widget.component.ts | 2 - .../custom-dashboard.component.html | 2 +- .../custom-dashboard.component.ts | 3 -- 5 files changed, 43 insertions(+), 12 deletions(-) diff --git a/frontend/custom-sv-config.json b/frontend/custom-sv-config.json index ec676837c..c39ea9c44 100644 --- a/frontend/custom-sv-config.json +++ b/frontend/custom-sv-config.json @@ -24,7 +24,8 @@ { "component": "address", "props": { - "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo" + "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo", + "period": "1m" } }, { diff --git a/frontend/src/app/components/address-graph/address-graph.component.ts b/frontend/src/app/components/address-graph/address-graph.component.ts index 9538f8750..5098bd850 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/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: [ diff --git a/frontend/src/app/components/balance-widget/balance-widget.component.ts b/frontend/src/app/components/balance-widget/balance-widget.component.ts index 91f9b5ecc..1cdfae525 100644 --- a/frontend/src/app/components/balance-widget/balance-widget.component.ts +++ b/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); } } diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html index 6e931d0a7..b21dd1fa3 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html +++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html @@ -234,7 +234,7 @@
Balance History
- +
diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts index 4cfffe8b6..20ea25ebd 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts +++ b/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); }),