Feature/improve handling of numerical precision in value component (#3595)

* Improve handling of numerical precision in value component

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the handling of the numerical precision in the value component
 - Upgraded `angular` from version `18.0.4` to `18.1.1`
 - Upgraded `Nx` from version `19.4.3` to `19.5.1`
 

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -12,11 +12,7 @@
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
             <div class="w-50">
-              <gf-value
-                [locale]="user?.settings?.locale"
-                [precision]="0"
-                [value]="userCount"
-              />
+              <gf-value [locale]="user?.settings?.locale" [value]="userCount" />
             </div>
           </div>
           <div class="d-flex my-3">
@@ -24,7 +20,6 @@
             <div class="w-50">
               <gf-value
                 [locale]="user?.settings?.locale"
-                [precision]="0"
                 [value]="transactionCount"
               />
               @if (transactionCount && userCount) {

libs/ui/src/lib/value/value.component.ts

@@ -58,8 +58,10 @@ export class GfValueComponent implements OnChanges {
               this.formattedValue = this.absoluteValue.toLocaleString(
                 this.locale,
                 {
-                  maximumFractionDigits: this.precision,
-                  minimumFractionDigits: this.precision
+                  maximumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2,
+                  minimumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2
                 }
               );
             } catch {}
@@ -68,8 +70,10 @@ export class GfValueComponent implements OnChanges {
               this.formattedValue = (this.absoluteValue * 100).toLocaleString(
                 this.locale,
                 {
-                  maximumFractionDigits: this.precision,
-                  minimumFractionDigits: this.precision
+                  maximumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2,
+                  minimumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2
                 }
               );
             } catch {}
@@ -77,8 +81,8 @@ export class GfValueComponent implements OnChanges {
         } else if (this.isCurrency) {
           try {
             this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: this.precision,
-              minimumFractionDigits: this.precision
+              maximumFractionDigits: this.precision >= 0 ? this.precision : 2,
+              minimumFractionDigits: this.precision >= 0 ? this.precision : 2
             });
           } catch {}
         } else if (this.isPercent) {
@@ -86,11 +90,18 @@ export class GfValueComponent implements OnChanges {
             this.formattedValue = (this.value * 100).toLocaleString(
               this.locale,
               {
-                maximumFractionDigits: this.precision,
-                minimumFractionDigits: this.precision
+                maximumFractionDigits: this.precision >= 0 ? this.precision : 2,
+                minimumFractionDigits: this.precision >= 0 ? this.precision : 2
               }
             );
           } catch {}
+        } else if (this.precision >= 0) {
+          try {
+            this.formattedValue = this.value?.toLocaleString(this.locale, {
+              maximumFractionDigits: this.precision,
+              minimumFractionDigits: this.precision
+            });
+          } catch {}
         } else {
           this.formattedValue = this.value?.toLocaleString(this.locale);
         }
@@ -129,7 +140,7 @@ export class GfValueComponent implements OnChanges {
     this.isNumber = false;
     this.isString = false;
     this.locale = this.locale || getLocale();
-    this.precision = this.precision >= 0 ? this.precision : 2;
+    this.precision = this.precision >= 0 ? this.precision : undefined;
     this.useAbsoluteValue = false;
   }
 }