Feature/Add dividend yield to position detail dialog (#2636)

* Add dividend yield to position detail dialog

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added the dividend yield to the position detail dialog (experimental)
+
 ## 2.70.0 - 2024-04-02
 
 ### Added

apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts

@@ -12,6 +12,8 @@ export interface PortfolioPositionDetail {
   averagePrice: number;
   dataProviderInfo: DataProviderInfo;
   dividendInBaseCurrency: number;
+  dividendYieldPercent: number;
+  dividendYieldPercentWithCurrencyEffect: number;
   feeInBaseCurrency: number;
   firstBuyDate: string;
   grossPerformance: number;

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

@@ -710,6 +710,8 @@ export class PortfolioService {
         averagePrice: undefined,
         dataProviderInfo: undefined,
         dividendInBaseCurrency: undefined,
+        dividendYieldPercent: undefined,
+        dividendYieldPercentWithCurrencyEffect: undefined,
         feeInBaseCurrency: undefined,
         firstBuyDate: undefined,
         grossPerformance: undefined,
@@ -769,6 +771,8 @@ export class PortfolioService {
         firstBuyDate,
         marketPrice,
         quantity,
+        timeWeightedInvestment,
+        timeWeightedInvestmentWithCurrencyEffect,
         transactionCount
       } = position;
 
@@ -781,6 +785,21 @@ export class PortfolioService {
         return Account;
       });
 
+      const dividendYieldPercent = this.getAnnualizedPerformancePercent({
+        daysInMarket: differenceInDays(new Date(), parseDate(firstBuyDate)),
+        netPerformancePercent: dividendInBaseCurrency.div(
+          timeWeightedInvestment
+        )
+      });
+
+      const dividendYieldPercentWithCurrencyEffect =
+        this.getAnnualizedPerformancePercent({
+          daysInMarket: differenceInDays(new Date(), parseDate(firstBuyDate)),
+          netPerformancePercent: dividendInBaseCurrency.div(
+            timeWeightedInvestmentWithCurrencyEffect
+          )
+        });
+
       const historicalData = await this.dataProviderService.getHistorical(
         [{ dataSource, symbol: aSymbol }],
         'day',
@@ -854,6 +873,9 @@ export class PortfolioService {
         averagePrice: averagePrice.toNumber(),
         dataProviderInfo: portfolioCalculator.getDataProviderInfos()?.[0],
         dividendInBaseCurrency: dividendInBaseCurrency.toNumber(),
+        dividendYieldPercent: dividendYieldPercent.toNumber(),
+        dividendYieldPercentWithCurrencyEffect:
+          dividendYieldPercentWithCurrencyEffect.toNumber(),
         feeInBaseCurrency: this.exchangeRateDataService.toCurrency(
           fee.toNumber(),
           SymbolProfile.currency,
@@ -930,6 +952,8 @@ export class PortfolioService {
         averagePrice: 0,
         dataProviderInfo: undefined,
         dividendInBaseCurrency: 0,
+        dividendYieldPercent: 0,
+        dividendYieldPercentWithCurrencyEffect: 0,
         feeInBaseCurrency: 0,
         firstBuyDate: undefined,
         grossPerformance: undefined,

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

@@ -48,6 +48,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
   public dataProviderInfo: DataProviderInfo;
   public dataSource: MatTableDataSource<Activity>;
   public dividendInBaseCurrency: number;
+  public dividendYieldPercentWithCurrencyEffect: number;
   public feeInBaseCurrency: number;
   public firstBuyDate: string;
   public historicalDataItems: LineChartItem[];
@@ -95,6 +96,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           averagePrice,
           dataProviderInfo,
           dividendInBaseCurrency,
+          dividendYieldPercentWithCurrencyEffect,
           feeInBaseCurrency,
           firstBuyDate,
           historicalData,
@@ -119,6 +121,8 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           this.dataProviderInfo = dataProviderInfo;
           this.dataSource = new MatTableDataSource(orders.reverse());
           this.dividendInBaseCurrency = dividendInBaseCurrency;
+          this.dividendYieldPercentWithCurrencyEffect =
+            dividendYieldPercentWithCurrencyEffect;
           this.feeInBaseCurrency = feeInBaseCurrency;
           this.firstBuyDate = firstBuyDate;
           this.historicalDataItems = historicalData.map(

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

@@ -134,17 +134,29 @@
           >Investment</gf-value
         >
       </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="data.baseCurrency"
-          [value]="dividendInBaseCurrency"
-          >Dividend</gf-value
-        >
-      </div>
+      @if (dividendInBaseCurrency && user?.settings?.isExperimentalFeatures) {
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [isCurrency]="true"
+            [locale]="data.locale"
+            [unit]="data.baseCurrency"
+            [value]="dividendInBaseCurrency"
+            >Dividend</gf-value
+          >
+        </div>
+        <div class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [isPercent]="true"
+            [locale]="data.locale"
+            [value]="dividendYieldPercentWithCurrencyEffect"
+            >Dividend Yield</gf-value
+          >
+        </div>
+      }
       <div class="col-6 mb-3">
         <gf-value
           i18n
@@ -179,6 +191,9 @@
           }
         </gf-value>
       </div>
+      @if (user?.settings?.isExperimentalFeatures) {
+        <div class="col-6 mb-3"></div>
+      }
       <div class="col-6 mb-3">
         <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
           >Asset Class</gf-value
@@ -292,7 +307,7 @@
           [deviceType]="data.deviceType"
           [hasPermissionToCreateActivity]="false"
           [hasPermissionToExportActivities]="
-            !data.hasImpersonationId && !user.settings.isRestrictedView
+            !data.hasImpersonationId && !user?.settings?.isRestrictedView
           "
           [hasPermissionToFilter]="false"
           [hasPermissionToOpenDetails]="false"