From 7516db0c71576b2f16c9d70652482c01ac1719c0 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 19 Nov 2024 17:45:09 +0100 Subject: [PATCH 1/4] Fix USD y axis overflow in address graph --- .../app/components/address-graph/address-graph.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 e8762fbec..964fb5148 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -10,7 +10,6 @@ import { RelativeUrlPipe } from '@app/shared/pipes/relative-url/relative-url.pip import { StateService } from '@app/services/state.service'; import { PriceService } from '@app/services/price.service'; import { FiatCurrencyPipe } from '@app/shared/pipes/fiat-currency.pipe'; -import { FiatShortenerPipe } from '@app/shared/pipes/fiat-shortener.pipe'; const periodSeconds = { '1d': (60 * 60 * 24), @@ -77,7 +76,6 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { private relativeUrlPipe: RelativeUrlPipe, private priceService: PriceService, private fiatCurrencyPipe: FiatCurrencyPipe, - private fiatShortenerPipe: FiatShortenerPipe, private zone: NgZone, ) {} @@ -336,7 +334,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { axisLabel: { color: 'rgb(110, 112, 121)', formatter: function(val) { - return this.fiatShortenerPipe.transform(val, null, 'USD'); + return `$${this.amountShortenerPipe.transform(val, 0)}`; }.bind(this) }, splitLine: { From 8bd6d40ed254609e4986b7f2135a6a413e77b75b Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 19 Nov 2024 18:00:00 +0100 Subject: [PATCH 2/4] Don't use SI units in address balance graph axis --- .../components/address-graph/address-graph.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 964fb5148..01baeddf6 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -309,10 +309,10 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { formatter: (val): string => { 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`; + return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0, undefined, true)} BTC`; } else if (valSpan > 1_000_000_000) { - return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2)} BTC`; + return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true)} BTC`; } else if (valSpan > 100_000_000) { return `${(val / 100_000_000).toFixed(1)} BTC`; } else if (valSpan > 10_000_000) { @@ -320,7 +320,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { } else if (valSpan > 1_000_000) { return `${(val / 100_000_000).toFixed(3)} BTC`; } else { - return `${this.amountShortenerPipe.transform(val, 0)} sats`; + return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`; } } }, @@ -334,7 +334,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { axisLabel: { color: 'rgb(110, 112, 121)', formatter: function(val) { - return `$${this.amountShortenerPipe.transform(val, 0)}`; + return `$${this.amountShortenerPipe.transform(val, 0, undefined, true)}`; }.bind(this) }, splitLine: { From 535e5313eff78264d2f21b74b5862394701c6c11 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 19 Nov 2024 18:11:02 +0100 Subject: [PATCH 3/4] Polish address balance graph tooltip --- .../address-graph/address-graph.component.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) 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 01baeddf6..2cc3406fb 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -243,18 +243,19 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { let tooltip = '
'; const hasTx = data[0].data[2].txid; + const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' }); + + tooltip += `
+
+
${date}
`; + if (hasTx) { const header = data.length === 1 ? `${data[0].data[2].txid.slice(0, 6)}...${data[0].data[2].txid.slice(-6)}` : `${data.length} transactions`; - tooltip += `${header}`; + tooltip += `
${header}
`; } - const date = new Date(data[0].data[0]).toLocaleTimeString(this.locale, { year: 'numeric', month: 'short', day: 'numeric' }); - - tooltip += `
-
`; - const formatBTC = (val, decimal) => (val / 100_000_000).toFixed(decimal); const formatFiat = (val) => this.fiatCurrencyPipe.transform(val, null, 'USD'); @@ -289,7 +290,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { } } - tooltip += `
${date}
`; + tooltip += `
`; return tooltip; }.bind(this) }, From cb3326d6917344ecf2999ebd95ac86d097df16eb Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 19 Nov 2024 19:32:28 +0100 Subject: [PATCH 4/4] Wrap large amounts in power of ten in address graph --- .../app/components/address-graph/address-graph.component.ts | 3 +++ 1 file changed, 3 insertions(+) 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 2cc3406fb..e4c38c897 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -319,6 +319,9 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { } else if (valSpan > 10_000_000) { return `${(val / 100_000_000).toFixed(2)} BTC`; } else if (valSpan > 1_000_000) { + if (maxValue > 100_000_000_000) { + return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true)} BTC`; + } return `${(val / 100_000_000).toFixed(3)} BTC`; } else { return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`;