Feature/extend portfolio summary by percentage values (#5964)

* Extend summary by percentage values

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Extended the accounts table menu with a _View Details_ item
+- Extended the portfolio summary tab on the home page by percentage values (experimental)
 - Added the _OSS Gallery_ logo to the logo carousel on the landing page
 
 ### Changed

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

@@ -7,6 +7,7 @@
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"
             [deviceType]="deviceType"
+            [hasImpersonationId]="hasImpersonationId"
             [hasPermissionToUpdateUserSettings]="
               !hasImpersonationId && hasPermissionToUpdateUserSettings
             "

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -160,7 +160,21 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Emergency Fund</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : emergencyFundPercentage"
+        />
+      }
+    </div>
     <div
       class="align-items-center d-flex justify-content-end"
       [ngClass]="{
@@ -223,10 +237,23 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
-    <div class="justify-content-end">
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Buying Power</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : buyingPowerPercentage"
+        />
+      }
+    </div>
+    <div class="align-items-center d-flex justify-content-end">
       <gf-value
-        class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
         [precision]="precision"
@@ -236,10 +263,23 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
-    <div class="justify-content-end">
+    <div class="align-items-center d-flex flex-grow-1">
+      <ng-container i18n>Excluded from Analysis</ng-container>
+      @if (
+        !hasImpersonationId &&
+        summary?.totalValueInBaseCurrency > 0 &&
+        user?.settings?.isExperimentalFeatures
+      ) {
+        <gf-value
+          class="d-lg-inline-block d-none ml-2 small text-muted"
+          [isPercent]="true"
+          [locale]="locale"
+          [value]="isLoading ? undefined : excludedFromAnalysisPercentage"
+        />
+      }
+    </div>
+    <div class="align-items-center d-flex justify-content-end">
       <gf-value
-        class="justify-content-end"
         [isCurrency]="true"
         [locale]="locale"
         [precision]="precision"

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -33,6 +33,7 @@ import {
 export class GfPortfolioSummaryComponent implements OnChanges {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasImpersonationId: boolean;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
   @Input() language: string;
@@ -49,6 +50,26 @@ export class GfPortfolioSummaryComponent implements OnChanges {
   public precision = 2;
   public timeInMarket: string;
 
+  public get buyingPowerPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? this.summary.cash / this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
+  public get emergencyFundPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? (this.summary.emergencyFund?.total || 0) /
+          this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
+  public get excludedFromAnalysisPercentage() {
+    return this.summary?.totalValueInBaseCurrency
+      ? this.summary.excludedAccountsAndActivities /
+          this.summary.totalValueInBaseCurrency
+      : 0;
+  }
+
   public constructor(private notificationService: NotificationService) {
     addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
   }