Task/improve value in benchmark detail dialog (#8260)

* Improve value in benchmark detail dialog

* 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 market price in the benchmark detail dialog by adding the currency and reducing the precision on mobile
 - Improved the style of the close button in the dialog footer component
 - Improved the style of the close button in the dialog header component
 - Upgraded `prettier` from version `3.9.9` to `3.9.10`

apps/api/src/app/endpoints/asset-profiles/asset.controller.ts

@@ -30,7 +30,12 @@ export class AssetController {
     return {
       marketData,
       splits,
-      assetProfile: pick(assetProfile, ['dataSource', 'name', 'symbol'])
+      assetProfile: {
+        ...pick(assetProfile, ['dataSource', 'name', 'symbol']),
+        // An index has no asset class and its value has no currency,
+        // thus show no currency for any asset profile without asset class
+        currency: assetProfile.assetClass ? assetProfile.currency : undefined
+      }
     };
   }
 }

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -1,3 +1,4 @@
+import { NUMERICAL_PRECISION_THRESHOLD_4_FIGURES } from '@ghostfolio/common/config';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
   AdminMarketDataDetails,
@@ -47,6 +48,7 @@ export class GfBenchmarkDetailDialogComponent implements OnInit {
   public assetProfile?: AdminMarketDataDetails['assetProfile'];
   public historicalDataItems: LineChartItem[];
   public isLoading = true;
+  public precision = 2;
   public value: number;
 
   public constructor(
@@ -80,6 +82,13 @@ export class GfBenchmarkDetailDialogComponent implements OnInit {
           }
         );
 
+        if (
+          this.data.deviceType === 'mobile' &&
+          this.value >= NUMERICAL_PRECISION_THRESHOLD_4_FIGURES
+        ) {
+          this.precision = 0;
+        }
+
         this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -13,16 +13,17 @@
           size="large"
           [isLoading]="isLoading"
           [locale]="data.locale"
-          [precision]="2"
+          [precision]="precision"
+          [unit]="assetProfile?.currency"
           [value]="value"
         />
       </div>
     </div>
 
     <gf-line-chart
-      benchmarkLabel="Average Unit Price"
       class="mb-4"
       [colorScheme]="data.colorScheme"
+      [currency]="assetProfile?.currency"
       [historicalDataItems]="historicalDataItems"
       [isAnimated]="true"
       [label]="data.symbol"