Feature/improve labels of line chart components (#5162)

* Improve labels

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the label for asset profiles with `MANUAL` data source in the chart of the asset profile details dialog in the admin control panel
+- Improved the label for asset profiles with `MANUAL` data source in the chart of the holding detail dialog
 - Improved the language localization for Chinese (`zh`)
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for French (`fr`)

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -49,6 +49,7 @@ import {
   Prisma,
   SymbolProfile
 } from '@prisma/client';
+import { isUUID } from 'class-validator';
 import { format } from 'date-fns';
 import { StatusCodes } from 'http-status-codes';
 import { addIcons } from 'ionicons';
@@ -144,6 +145,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
   public isBenchmark = false;
   public isDataGatheringEnabled: boolean;
   public isEditAssetProfileIdentifierMode = false;
+  public isUUID = isUUID;
   public marketDataItems: MarketData[] = [];
 
   public modeValues = [

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -72,10 +72,12 @@
       [colorScheme]="user?.settings?.colorScheme"
       [historicalDataItems]="historicalDataItems"
       [isAnimated]="true"
+      [label]="
+        isUUID(data.symbol) ? (assetProfile?.name ?? data.symbol) : data.symbol
+      "
       [locale]="data.locale"
       [showXAxis]="true"
       [showYAxis]="true"
-      [symbol]="data.symbol"
     />
     <div class="mb-3">
       <mat-accordion class="my-3">

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -49,6 +49,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { Router, RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { Account, MarketData, Tag } from '@prisma/client';
+import { isUUID } from 'class-validator';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
@@ -101,6 +102,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public assetSubClass: string;
   public averagePrice: number;
   public benchmarkDataItems: LineChartItem[];
+  public benchmarkLabel = $localize`Average Unit Price`;
   public countries: {
     [code: string]: { name: string; value: number };
   };
@@ -116,6 +118,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public historicalDataItems: LineChartItem[];
   public investmentInBaseCurrencyWithCurrencyEffect: number;
   public investmentInBaseCurrencyWithCurrencyEffectPrecision = 2;
+  public isUUID = isUUID;
   public marketDataItems: MarketData[] = [];
   public marketPrice: number;
   public marketPriceMax: number;

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -21,18 +21,20 @@
     </div>
 
     <gf-line-chart
-      benchmarkLabel="Average Unit Price"
       class="mb-4"
       [benchmarkDataItems]="benchmarkDataItems"
+      [benchmarkLabel]="benchmarkLabel"
       [colorScheme]="data.colorScheme"
       [currency]="SymbolProfile?.currency"
       [historicalDataItems]="historicalDataItems"
       [isAnimated]="true"
+      [label]="
+        isUUID(data.symbol) ? (SymbolProfile?.name ?? data.symbol) : data.symbol
+      "
       [locale]="data.locale"
       [showGradient]="true"
       [showXAxis]="true"
       [showYAxis]="true"
-      [symbol]="data.symbol"
     />
 
     <mat-tab-group

apps/client/src/app/components/home-market/home-market.html

@@ -8,7 +8,7 @@
         </div>
         <gf-line-chart
           class="mb-3"
-          symbol="Fear & Greed Index"
+          label="Fear & Greed Index"
           [colorScheme]="user?.settings?.colorScheme"
           [historicalDataItems]="historicalDataItems"
           [isAnimated]="true"

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -36,6 +36,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public isAllTimeLow: boolean;
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
+  public performanceLabel = $localize`Performance`;
   public precision = 2;
   public routerLinkAccounts = internalRoutes.accounts.routerLink;
   public routerLinkPortfolio = internalRoutes.portfolio.routerLink;

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

@@ -65,12 +65,12 @@
         <div class="chart-container mx-auto position-relative">
           <gf-line-chart
             class="position-absolute"
-            symbol="Performance"
             unit="%"
             [colorScheme]="user?.settings?.colorScheme"
             [hidden]="historicalDataItems?.length === 0"
             [historicalDataItems]="historicalDataItems"
             [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
+            [label]="performanceLabel"
             [locale]="user?.settings?.locale"
             [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
             [showGradient]="true"

apps/client/src/app/components/markets/markets.html

@@ -18,7 +18,7 @@
       </div>
       <gf-line-chart
         class="mb-3"
-        symbol="Fear & Greed Index"
+        label="Fear & Greed Index"
         [colorScheme]="user?.settings?.colorScheme"
         [historicalDataItems]="historicalDataItems"
         [isAnimated]="true"

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

@@ -25,11 +25,11 @@
       [colorScheme]="data.colorScheme"
       [historicalDataItems]="historicalDataItems"
       [isAnimated]="true"
+      [label]="data.symbol"
       [locale]="data.locale"
       [showGradient]="true"
       [showXAxis]="true"
       [showYAxis]="true"
-      [symbol]="data.symbol"
     />
   </div>
 </div>

libs/ui/src/lib/line-chart/line-chart.component.stories.ts

@@ -229,6 +229,8 @@ export const Simple: Story = {
         value: 86666.03082624623
       }
     ],
-    isAnimated: true
+    isAnimated: true,
+    label: 'Net Worth',
+    unit: 'USD'
   }
 };

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -54,13 +54,13 @@ export class GfLineChartComponent
   @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() isAnimated = false;
+  @Input() label: string;
   @Input() locale = getLocale();
   @Input() showGradient = false;
   @Input() showLegend = false;
   @Input() showLoader = true;
   @Input() showXAxis = false;
   @Input() showYAxis = false;
-  @Input() symbol: string;
   @Input() unit: string;
   @Input() yMax: number;
   @Input() yMaxLabel: string;
@@ -162,7 +162,7 @@ export class GfLineChartComponent
           borderWidth: 2,
           data: marketPrices,
           fill: true,
-          label: this.symbol,
+          label: this.label,
           pointRadius: 0
         }
       ]