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 e4c38c897..d20c7a77d 100644 --- a/frontend/src/app/components/address-graph/address-graph.component.ts +++ b/frontend/src/app/components/address-graph/address-graph.component.ts @@ -310,21 +310,21 @@ 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, undefined, true)} BTC`; + return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 0, undefined, true, true)} BTC`; } else if (valSpan > 1_000_000_000) { - return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true)} BTC`; + return `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 2, undefined, true, true)} BTC`; } else if (valSpan > 100_000_000) { return `${(val / 100_000_000).toFixed(1)} BTC`; } 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 `${this.amountShortenerPipe.transform(Math.round(val / 100_000_000), 3, undefined, true, true)} BTC`; } return `${(val / 100_000_000).toFixed(3)} BTC`; } else { - return `${this.amountShortenerPipe.transform(val, 0, undefined, true)} sats`; + return `${this.amountShortenerPipe.transform(val, 0, undefined, true, true)} sats`; } } }, @@ -338,7 +338,7 @@ export class AddressGraphComponent implements OnChanges, OnDestroy { axisLabel: { color: 'rgb(110, 112, 121)', formatter: function(val) { - return `$${this.amountShortenerPipe.transform(val, 0, undefined, true)}`; + return `$${this.amountShortenerPipe.transform(val, 0, undefined, true, true)}`; }.bind(this) }, splitLine: { diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index 71ff76f77..3c7211d58 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -5,9 +5,10 @@ import { Pipe, PipeTransform } from '@angular/core'; }) export class AmountShortenerPipe implements PipeTransform { transform(num: number, ...args: any[]): unknown { - const digits = args[0] ?? 1; + let digits = args[0] ?? 1; const unit = args[1] || undefined; const isMoney = args[2] || false; + const addMoreDigits = args[3] || false; if (num < 1000) { return num.toFixed(digits); @@ -25,6 +26,12 @@ export class AmountShortenerPipe implements PipeTransform { const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; const item = lookup.slice().reverse().find((item) => num >= item.value); + if (addMoreDigits) { + // Add more decimal digits if the integer part is small + const integerPartLength = Math.floor(num / item.value).toString().length; + digits += Math.max(0, 3 - integerPartLength); + } + if (unit !== undefined) { return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + ' ' + item.symbol + unit : '0'; } else {