Feature/include dividends in portfolio performance (#7961)

* Include dividends in portfolio performance

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extended the net performance on the analysis page to include the dividends (experimental)
+- Extended the net performance in the portfolio summary to include the dividends (experimental)
 - Improved the get quotes functionality of the _Manual_ service
 - Migrated the _ESLint_ configuration to the flat config format without `FlatCompat`
 - Upgraded `chartjs-chart-treemap` from version `4.2.0` to `4.2.2`

apps/api/src/app/portfolio/portfolio.service.ts

@@ -2140,6 +2140,7 @@ export class PortfolioService {
 
     const {
       currentValueInBaseCurrency,
+      dividendPercentageWithCurrencyEffect,
       netPerformance,
       netPerformancePercentage,
       netPerformancePercentageWithCurrencyEffect,
@@ -2236,6 +2237,7 @@ export class PortfolioService {
       cash,
       currentValueInBaseCurrency,
       dateOfFirstActivity,
+      dividendPercentageWithCurrencyEffect,
       excludedAccountsAndActivities,
       netPerformance,
       netPerformancePercentage,

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

@@ -98,10 +98,29 @@
       />
     </div>
   </div>
+  @if (user?.settings?.isExperimentalFeatures) {
+    <div class="flex-nowrap px-3 py-1 row">
+      <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
+      <div class="d-flex justify-content-end">
+        @if (isNumber(summary?.dividendInBaseCurrency)) {
+          <span class="mr-1">+</span>
+        }
+        <gf-value
+          class="justify-content-end"
+          [isCurrency]="true"
+          [isLoading]="isLoading"
+          [locale]="locale"
+          [precision]="precision"
+          [unit]="displayedCurrency"
+          [value]="summary?.dividendInBaseCurrency"
+        />
+      </div>
+    </div>
+  }
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
-      @if (summary?.fees || summary?.fees === 0) {
+      @if (isNumber(summary?.fees)) {
         <span class="mr-1">-</span>
       }
       <gf-value
@@ -128,7 +147,7 @@
         [locale]="locale"
         [precision]="precision"
         [unit]="displayedCurrency"
-        [value]="summary?.netPerformanceWithCurrencyEffect"
+        [value]="netPerformanceWithCurrencyEffect"
       />
     </div>
   </div>
@@ -154,7 +173,7 @@
         [isLoading]="isLoading"
         [isPercent]="true"
         [locale]="locale"
-        [value]="summary?.netPerformancePercentageWithCurrencyEffect"
+        [value]="netPerformancePercentageWithCurrencyEffect"
       />
     </div>
   </div>
@@ -367,10 +386,7 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
     <div class="d-flex justify-content-end">
-      @if (
-        summary?.liabilitiesInBaseCurrency ||
-        summary?.liabilitiesInBaseCurrency === 0
-      ) {
+      @if (isNumber(summary?.liabilitiesInBaseCurrency)) {
         <span class="mr-1">-</span>
       }
       <gf-value
@@ -488,6 +504,7 @@
       />
     </div>
   </div>
+  @if (!user?.settings?.isExperimentalFeatures) {
     <div class="flex-nowrap px-3 py-1 row">
       <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
       <div class="justify-content-end">
@@ -502,4 +519,5 @@
         />
       </div>
     </div>
+  }
 </div>

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

@@ -55,6 +55,7 @@ export class GfPortfolioSummaryComponent implements OnChanges {
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
 
+  protected readonly isNumber = isNumber;
   protected readonly PerformanceCalculationType = PerformanceCalculationType;
 
   protected isCashExpanded = false;
@@ -136,6 +137,36 @@ export class GfPortfolioSummaryComponent implements OnChanges {
     );
   }
 
+  protected get netPerformancePercentageWithCurrencyEffect() {
+    if (
+      !this.user?.settings?.isExperimentalFeatures ||
+      !isNumber(this.summary?.netPerformancePercentageWithCurrencyEffect)
+    ) {
+      return this.summary?.netPerformancePercentageWithCurrencyEffect;
+    }
+
+    // Include the dividends (total return)
+    return (
+      this.summary.netPerformancePercentageWithCurrencyEffect +
+      (this.summary.dividendPercentageWithCurrencyEffect ?? 0)
+    );
+  }
+
+  protected get netPerformanceWithCurrencyEffect() {
+    if (
+      !this.user?.settings?.isExperimentalFeatures ||
+      !isNumber(this.summary?.netPerformanceWithCurrencyEffect)
+    ) {
+      return this.summary?.netPerformanceWithCurrencyEffect;
+    }
+
+    // Include the dividends (total return)
+    return (
+      this.summary.netPerformanceWithCurrencyEffect +
+      this.summary.dividendInBaseCurrency
+    );
+  }
+
   public ngOnChanges() {
     if (this.summary) {
       if (

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -133,6 +133,36 @@ export class GfAnalysisPageComponent implements OnInit {
     addIcons({ copyOutline, ellipsisVertical });
   }
 
+  protected get netPerformancePercentageWithCurrencyEffect() {
+    if (
+      !this.user?.settings?.isExperimentalFeatures ||
+      !isNumber(this.performance?.netPerformancePercentageWithCurrencyEffect)
+    ) {
+      return this.performance?.netPerformancePercentageWithCurrencyEffect;
+    }
+
+    // Include the dividends (total return)
+    return (
+      this.performance.netPerformancePercentageWithCurrencyEffect +
+      (this.performance.dividendPercentageWithCurrencyEffect ?? 0)
+    );
+  }
+
+  protected get netPerformanceWithCurrencyEffect() {
+    if (
+      !this.user?.settings?.isExperimentalFeatures ||
+      !isNumber(this.performance?.netPerformanceWithCurrencyEffect)
+    ) {
+      return this.performance?.netPerformanceWithCurrencyEffect;
+    }
+
+    // Include the dividends (total return)
+    return (
+      this.performance.netPerformanceWithCurrencyEffect +
+      this.performance.dividendInBaseCurrency
+    );
+  }
+
   get savingsRate() {
     if (!this.savingsRatePerMonth) {
       return undefined;

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -187,11 +187,12 @@
               />
             </div>
           </div>
+          @if (user?.settings?.isExperimentalFeatures) {
             <div class="d-flex py-1">
               <div
                 class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
               >
-              <span i18n>Absolute Currency Performance</span>
+                <span i18n>Absolute Dividend Performance</span>
                 @if (user?.subscription?.type === 'Basic') {
                   <gf-premium-indicator class="ml-1" />
                 }
@@ -204,18 +205,13 @@
                   [isLoading]="isLoadingInvestmentChart"
                   [locale]="user?.settings?.locale"
                   [unit]="user?.settings?.baseCurrency"
-                [value]="
-                  performance?.netPerformance === null
-                    ? null
-                    : performance?.netPerformanceWithCurrencyEffect -
-                      performance?.netPerformance
-                "
+                  [value]="performance?.dividendInBaseCurrency"
                 />
               </div>
             </div>
-          <div class="d-flex ml-3 py-1">
+            <div class="d-flex mb-3 ml-3 py-1">
               <div class="flex-grow-1 mr-2 text-truncate">
-              <ng-container i18n>Currency Performance</ng-container>
+                <ng-container i18n>Dividend Performance</ng-container>
               </div>
               <div class="d-flex justify-content-end">
                 <gf-value
@@ -225,19 +221,19 @@
                   [isLoading]="isLoadingInvestmentChart"
                   [isPercent]="true"
                   [locale]="user?.settings?.locale"
-                [value]="
-                  performance?.netPerformancePercentage === null
-                    ? null
-                    : performance?.netPerformancePercentageWithCurrencyEffect -
-                      performance?.netPerformancePercentage
-                "
+                  [value]="performance?.dividendPercentageWithCurrencyEffect"
                 />
               </div>
             </div>
-          <div><hr /></div>
+          }
           <div class="d-flex py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
-              <ng-container i18n>Absolute Net Performance</ng-container>
+            <div
+              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+            >
+              <span i18n>Absolute Currency Performance</span>
+              @if (user?.subscription?.type === 'Basic') {
+                <gf-premium-indicator class="ml-1" />
+              }
             </div>
             <div class="d-flex justify-content-end">
               <gf-value
@@ -247,23 +243,18 @@
                 [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
-                [value]="performance?.netPerformanceWithCurrencyEffect"
+                [value]="
+                  performance?.netPerformance === null
+                    ? null
+                    : performance?.netPerformanceWithCurrencyEffect -
+                      performance?.netPerformance
+                "
               />
             </div>
           </div>
           <div class="d-flex ml-3 py-1">
             <div class="flex-grow-1 mr-2 text-truncate">
-              <ng-container i18n>Net Performance</ng-container>
-              @if (
-                user?.settings?.performanceCalculationType ===
-                PerformanceCalculationType.ROAI
-              ) {
-                <abbr
-                  class="d-none d-sm-inline-block initialism ml-2 text-muted"
-                  title="Return on Average Investment"
-                  >(ROAI)</abbr
-                >
-              }
+              <ng-container i18n>Currency Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
               <gf-value
@@ -274,21 +265,18 @@
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
                 [value]="
-                  performance?.netPerformancePercentageWithCurrencyEffect
+                  performance?.netPerformancePercentage === null
+                    ? null
+                    : performance?.netPerformancePercentageWithCurrencyEffect -
+                      performance?.netPerformancePercentage
                 "
               />
             </div>
           </div>
-          @if (user?.settings?.isExperimentalFeatures) {
           <div><hr /></div>
           <div class="d-flex py-1">
-              <div
-                class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
-              >
-                <span i18n>Absolute Dividend Performance</span>
-                @if (user?.subscription?.type === 'Basic') {
-                  <gf-premium-indicator class="ml-1" />
-                }
+            <div class="flex-grow-1 mr-2 text-truncate">
+              <ng-container i18n>Absolute Net Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
               <gf-value
@@ -298,13 +286,23 @@
                 [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
-                  [value]="performance?.dividendInBaseCurrency"
+                [value]="netPerformanceWithCurrencyEffect"
               />
             </div>
           </div>
           <div class="d-flex ml-3 py-1">
             <div class="flex-grow-1 mr-2 text-truncate">
-                <ng-container i18n>Dividend Performance</ng-container>
+              <ng-container i18n>Net Performance</ng-container>
+              @if (
+                user?.settings?.performanceCalculationType ===
+                PerformanceCalculationType.ROAI
+              ) {
+                <abbr
+                  class="d-none d-sm-inline-block initialism ml-2 text-muted"
+                  title="Return on Average Investment"
+                  >(ROAI)</abbr
+                >
+              }
             </div>
             <div class="d-flex justify-content-end">
               <gf-value
@@ -314,11 +312,10 @@
                 [isLoading]="isLoadingInvestmentChart"
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
-                  [value]="performance?.dividendPercentageWithCurrencyEffect"
+                [value]="netPerformancePercentageWithCurrencyEffect"
               />
             </div>
           </div>
-          }
         </mat-card-content>
       </mat-card>
     </div>