Feature/extend position detail dialog (#54)

* Extend position detail dialog

* Absolute change
* Number of transactions

CHANGELOG.md

@@ -5,6 +5,13 @@ 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 absolute change to the position detail dialog
+- Added the number of transactions to the position detail dialog
+
 ## 0.95.0 - 28.04.2021
 
 ### Added

apps/api/src/app/portfolio/interfaces/portfolio-item.interface.ts

@@ -16,4 +16,5 @@ export interface Position {
   investmentInOriginalCurrency?: number;
   marketPrice?: number;
   quantity: number;
+  transactionCount: number;
 }

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

@@ -13,6 +13,7 @@ export interface PortfolioPositionDetail {
   minPrice: number;
   quantity: number;
   symbol: string;
+  transactionCount: number;
 }
 
 export interface HistoricalDataItem {

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

@@ -20,6 +20,7 @@ export interface PortfolioPosition {
   sector?: string;
   shareCurrent: number;
   shareInvestment: number;
+  transactionCount: number;
   symbol: string;
   type?: string;
   url?: string;

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

@@ -209,7 +209,8 @@ export class PortfolioService {
         firstBuyDate,
         investment,
         marketPrice,
-        quantity
+        quantity,
+        transactionCount
       } = portfolio.getPositions(new Date())[aSymbol];
 
       const historicalData = await this.dataProviderService.getHistorical(
@@ -262,6 +263,7 @@ export class PortfolioService {
         maxPrice,
         minPrice,
         quantity,
+        transactionCount,
         grossPerformance: this.exchangeRateDataService.toCurrency(
           marketPrice - averagePrice,
           currency,
@@ -315,7 +317,8 @@ export class PortfolioService {
         maxPrice: undefined,
         minPrice: undefined,
         quantity: undefined,
-        symbol: aSymbol
+        symbol: aSymbol,
+        transactionCount: undefined
       };
     }
 
@@ -331,7 +334,8 @@ export class PortfolioService {
       maxPrice: undefined,
       minPrice: undefined,
       quantity: undefined,
-      symbol: aSymbol
+      symbol: aSymbol,
+      transactionCount: undefined
     };
   }
 

apps/api/src/models/portfolio.ts

@@ -57,7 +57,7 @@ export class Portfolio implements PortfolioInterface {
   public async addCurrentPortfolioItems() {
     const currentData = await this.dataProviderService.get(this.getSymbols());
 
-    let currentDate = new Date();
+    const currentDate = new Date();
 
     const year = getYear(currentDate);
     const month = getMonth(currentDate);
@@ -82,7 +82,9 @@ export class Portfolio implements PortfolioInterface {
         marketPrice:
           currentData[symbol]?.marketPrice ??
           portfolioItemsYesterday.positions[symbol]?.marketPrice,
-        quantity: portfolioItemsYesterday?.positions[symbol]?.quantity
+        quantity: portfolioItemsYesterday?.positions[symbol]?.quantity,
+        transactionCount:
+          portfolioItemsYesterday?.positions[symbol]?.transactionCount
       };
     });
 
@@ -289,7 +291,9 @@ export class Portfolio implements PortfolioInterface {
             data[symbol]?.currency,
             this.user.Settings.currency
           ) / value,
-        shareInvestment: portfolioItem.positions[symbol].investment / investment
+        shareInvestment:
+          portfolioItem.positions[symbol].investment / investment,
+        transactionCount: portfolioItem.positions[symbol].transactionCount
       };
     });
 
@@ -582,7 +586,8 @@ export class Portfolio implements PortfolioInterface {
           marketPrice:
             historicalData[symbol]?.[format(currentDate, 'yyyy-MM-dd')]
               ?.marketPrice || 0,
-          quantity: 0
+          quantity: 0,
+          transactionCount: 0
         };
       });
 
@@ -623,7 +628,8 @@ export class Portfolio implements PortfolioInterface {
           marketPrice:
             historicalData[symbol]?.[format(yesterday, 'yyyy-MM-dd')]
               ?.marketPrice || 0,
-          quantity: 0
+          quantity: 0,
+          transactionCount: 0
         };
       });
 
@@ -730,6 +736,10 @@ export class Portfolio implements PortfolioInterface {
           order.getSymbol()
         ].currency = order.getCurrency();
 
+        this.portfolioItems[i].positions[
+          order.getSymbol()
+        ].transactionCount += 1;
+
         if (order.getType() === 'BUY') {
           if (
             !this.portfolioItems[i].positions[order.getSymbol()].firstBuyDate

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

@@ -23,6 +23,7 @@ export class PositionDetailDialog {
   public benchmarkDataItems: LineChartItem[];
   public currency: string;
   public firstBuyDate: string;
+  public grossPerformance: number;
   public grossPerformancePercent: number;
   public historicalDataItems: LineChartItem[];
   public investment: number;
@@ -30,6 +31,7 @@ export class PositionDetailDialog {
   public maxPrice: number;
   public minPrice: number;
   public quantity: number;
+  public transactionCount: number;
 
   public constructor(
     private cd: ChangeDetectorRef,
@@ -44,18 +46,21 @@ export class PositionDetailDialog {
           averagePrice,
           currency,
           firstBuyDate,
+          grossPerformance,
           grossPerformancePercent,
           historicalData,
           investment,
           marketPrice,
           maxPrice,
           minPrice,
-          quantity
+          quantity,
+          transactionCount
         }) => {
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
           this.currency = currency;
           this.firstBuyDate = firstBuyDate;
+          this.grossPerformance = quantity * grossPerformance;
           this.grossPerformancePercent = grossPerformancePercent;
           this.historicalDataItems = historicalData.map(
             (historicalDataItem) => {
@@ -75,6 +80,7 @@ export class PositionDetailDialog {
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
           this.quantity = quantity;
+          this.transactionCount = transactionCount;
 
           if (isToday(parseISO(this.firstBuyDate))) {
             // Add average price

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

@@ -19,6 +19,16 @@
     ></gf-line-chart>
 
     <div class="row">
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Change"
+          size="medium"
+          [colorizeSign]="true"
+          [currency]="data.baseCurrency"
+          [locale]="data.locale"
+          [value]="grossPerformance"
+        ></gf-value>
+      </div>
       <div class="col-6 mb-3">
         <gf-value
           label="Performance"
@@ -29,13 +39,6 @@
           [value]="grossPerformancePercent"
         ></gf-value>
       </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          label="First Buy Date"
-          size="medium"
-          [value]="firstBuyDate"
-        ></gf-value>
-      </div>
       <div class="col-6 mb-3">
         <gf-value
           label="Ø Buy Price"
@@ -91,6 +94,22 @@
           [value]="investment"
         ></gf-value>
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="First Buy Date"
+          size="medium"
+          [value]="firstBuyDate"
+        ></gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Transactions"
+          size="medium"
+          [isCurrency]="true"
+          [locale]="data.locale"
+          [value]="transactionCount"
+        ></gf-value>
+      </div>
     </div>
   </div>
 </div>