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,18 +504,20 @@
       />
     </div>
   </div>
-  <div class="flex-nowrap px-3 py-1 row">
-    <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
-    <div class="justify-content-end">
-      <gf-value
-        class="justify-content-end"
-        [isCurrency]="true"
-        [isLoading]="isLoading"
-        [locale]="locale"
-        [precision]="precision"
-        [unit]="displayedCurrency"
-        [value]="summary?.dividendInBaseCurrency"
-      />
+  @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">
+        <gf-value
+          class="justify-content-end"
+          [isCurrency]="true"
+          [isLoading]="isLoading"
+          [locale]="locale"
+          [precision]="precision"
+          [unit]="displayedCurrency"
+          [value]="summary?.dividendInBaseCurrency"
+        />
+      </div>
     </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,6 +187,45 @@
               />
             </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 Dividend Performance</span>
+                @if (user?.subscription?.type === 'Basic') {
+                  <gf-premium-indicator class="ml-1" />
+                }
+              </div>
+              <div class="d-flex justify-content-end">
+                <gf-value
+                  class="justify-content-end"
+                  position="end"
+                  [isCurrency]="true"
+                  [isLoading]="isLoadingInvestmentChart"
+                  [locale]="user?.settings?.locale"
+                  [unit]="user?.settings?.baseCurrency"
+                  [value]="performance?.dividendInBaseCurrency"
+                />
+              </div>
+            </div>
+            <div class="d-flex mb-3 ml-3 py-1">
+              <div class="flex-grow-1 mr-2 text-truncate">
+                <ng-container i18n>Dividend Performance</ng-container>
+              </div>
+              <div class="d-flex justify-content-end">
+                <gf-value
+                  class="justify-content-end"
+                  position="end"
+                  [colorizeSign]="true"
+                  [isLoading]="isLoadingInvestmentChart"
+                  [isPercent]="true"
+                  [locale]="user?.settings?.locale"
+                  [value]="performance?.dividendPercentageWithCurrencyEffect"
+                />
+              </div>
+            </div>
+          }
           <div class="d-flex py-1">
             <div
               class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
@@ -247,7 +286,7 @@
                 [isLoading]="isLoadingInvestmentChart"
                 [locale]="user?.settings?.locale"
                 [unit]="user?.settings?.baseCurrency"
-                [value]="performance?.netPerformanceWithCurrencyEffect"
+                [value]="netPerformanceWithCurrencyEffect"
               />
             </div>
           </div>
@@ -273,52 +312,10 @@
                 [isLoading]="isLoadingInvestmentChart"
                 [isPercent]="true"
                 [locale]="user?.settings?.locale"
-                [value]="
-                  performance?.netPerformancePercentageWithCurrencyEffect
-                "
+                [value]="netPerformancePercentageWithCurrencyEffect"
               />
             </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>
-              <div class="d-flex justify-content-end">
-                <gf-value
-                  class="justify-content-end"
-                  position="end"
-                  [isCurrency]="true"
-                  [isLoading]="isLoadingInvestmentChart"
-                  [locale]="user?.settings?.locale"
-                  [unit]="user?.settings?.baseCurrency"
-                  [value]="performance?.dividendInBaseCurrency"
-                />
-              </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>
-              </div>
-              <div class="d-flex justify-content-end">
-                <gf-value
-                  class="justify-content-end"
-                  position="end"
-                  [colorizeSign]="true"
-                  [isLoading]="isLoadingInvestmentChart"
-                  [isPercent]="true"
-                  [locale]="user?.settings?.locale"
-                  [value]="performance?.dividendPercentageWithCurrencyEffect"
-                />
-              </div>
-            </div>
-          }
         </mat-card-content>
       </mat-card>
     </div>