Adaptive decimal number length in amount shortener

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: {

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 {