Feature/add countries and sectors to position detail dialog (#692)

* Add asset and asset sub class

* Add countries and sectors to position detail dialog

* Update changelog

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the asset and asset sub class to the position detail dialog
+- Added the countries and sectors to the position detail dialog
+
 ### Changed
 
 - Upgraded `angular` from version `13.1.2` to `13.2.3`

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

@@ -1,11 +1,8 @@
+import { EnhancedSymbolProfile } from '@ghostfolio/api/services/interfaces/symbol-profile.interface';
 import { OrderWithAccount } from '@ghostfolio/common/types';
-import { AssetClass, AssetSubClass } from '@prisma/client';
 
 export interface PortfolioPositionDetail {
-  assetClass?: AssetClass;
-  assetSubClass?: AssetSubClass;
   averagePrice: number;
-  currency: string;
   firstBuyDate: string;
   grossPerformance: number;
   grossPerformancePercent: number;
@@ -14,12 +11,11 @@ export interface PortfolioPositionDetail {
   marketPrice: number;
   maxPrice: number;
   minPrice: number;
-  name: string;
   netPerformance: number;
   netPerformancePercent: number;
   orders: OrderWithAccount[];
   quantity: number;
-  symbol: string;
+  SymbolProfile: EnhancedSymbolProfile;
   transactionCount: number;
   value: number;
 }

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

@@ -344,6 +344,7 @@ export class PortfolioController {
 
   @Get('position/:dataSource/:symbol')
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
+  @UseInterceptors(TransformDataSourceInResponseInterceptor)
   @UseGuards(AuthGuard('jwt'))
   public async getPosition(
     @Headers('impersonation-id') impersonationId: string,

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

@@ -417,7 +417,6 @@ export class PortfolioServiceNew {
     if (orders.length <= 0) {
       return {
         averagePrice: undefined,
-        currency: undefined,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -426,21 +425,20 @@ export class PortfolioServiceNew {
         marketPrice: undefined,
         maxPrice: undefined,
         minPrice: undefined,
-        name: undefined,
         netPerformance: undefined,
         netPerformancePercent: undefined,
         orders: [],
         quantity: undefined,
-        symbol: aSymbol,
+        SymbolProfile: undefined,
         transactionCount: undefined,
         value: undefined
       };
     }
 
-    const assetClass = orders[0].SymbolProfile?.assetClass;
-    const assetSubClass = orders[0].SymbolProfile?.assetSubClass;
     const positionCurrency = orders[0].currency;
-    const name = orders[0].SymbolProfile?.name ?? '';
+    const [SymbolProfile] = await this.symbolProfileService.getSymbolProfiles([
+      aSymbol
+    ]);
 
     const portfolioOrders: PortfolioOrder[] = orders
       .filter((order) => {
@@ -557,18 +555,15 @@ export class PortfolioServiceNew {
       }
 
       return {
-        assetClass,
-        assetSubClass,
-        currency,
         firstBuyDate,
         grossPerformance,
         investment,
         marketPrice,
         maxPrice,
         minPrice,
-        name,
         netPerformance,
         orders,
+        SymbolProfile,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
         grossPerformancePercent:
@@ -576,7 +571,6 @@ export class PortfolioServiceNew {
         historicalData: historicalDataArray,
         netPerformancePercent: position.netPerformancePercentage?.toNumber(),
         quantity: quantity.toNumber(),
-        symbol: aSymbol,
         value: this.exchangeRateDataService.toCurrency(
           quantity.mul(marketPrice).toNumber(),
           currency,
@@ -621,15 +615,12 @@ export class PortfolioServiceNew {
       }
 
       return {
-        assetClass,
-        assetSubClass,
         marketPrice,
         maxPrice,
         minPrice,
-        name,
         orders,
+        SymbolProfile,
         averagePrice: 0,
-        currency: currentData[aSymbol]?.currency,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -638,7 +629,6 @@ export class PortfolioServiceNew {
         netPerformance: undefined,
         netPerformancePercent: undefined,
         quantity: 0,
-        symbol: aSymbol,
         transactionCount: undefined,
         value: 0
       };

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

@@ -405,7 +405,6 @@ export class PortfolioService {
     if (orders.length <= 0) {
       return {
         averagePrice: undefined,
-        currency: undefined,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -414,21 +413,20 @@ export class PortfolioService {
         marketPrice: undefined,
         maxPrice: undefined,
         minPrice: undefined,
-        name: undefined,
         netPerformance: undefined,
         netPerformancePercent: undefined,
         orders: [],
         quantity: undefined,
-        symbol: aSymbol,
+        SymbolProfile: undefined,
         transactionCount: undefined,
         value: undefined
       };
     }
 
-    const assetClass = orders[0].SymbolProfile?.assetClass;
-    const assetSubClass = orders[0].SymbolProfile?.assetSubClass;
     const positionCurrency = orders[0].currency;
-    const name = orders[0].SymbolProfile?.name ?? '';
+    const [SymbolProfile] = await this.symbolProfileService.getSymbolProfiles([
+      aSymbol
+    ]);
 
     const portfolioOrders: PortfolioOrder[] = orders
       .filter((order) => {
@@ -543,25 +541,21 @@ export class PortfolioService {
       }
 
       return {
-        assetClass,
-        assetSubClass,
-        currency,
         firstBuyDate,
         grossPerformance,
         investment,
         marketPrice,
         maxPrice,
         minPrice,
-        name,
         netPerformance,
         orders,
+        SymbolProfile,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
         grossPerformancePercent: position.grossPerformancePercentage.toNumber(),
         historicalData: historicalDataArray,
         netPerformancePercent: position.netPerformancePercentage.toNumber(),
         quantity: quantity.toNumber(),
-        symbol: aSymbol,
         value: this.exchangeRateDataService.toCurrency(
           quantity.mul(marketPrice).toNumber(),
           currency,
@@ -606,15 +600,12 @@ export class PortfolioService {
       }
 
       return {
-        assetClass,
-        assetSubClass,
         marketPrice,
         maxPrice,
         minPrice,
-        name,
         orders,
+        SymbolProfile,
         averagePrice: 0,
-        currency: currentData[aSymbol]?.currency,
         firstBuyDate: undefined,
         grossPerformance: undefined,
         grossPerformancePercent: undefined,
@@ -623,7 +614,6 @@ export class PortfolioService {
         netPerformance: undefined,
         netPerformancePercent: undefined,
         quantity: 0,
-        symbol: aSymbol,
         transactionCount: undefined,
         value: 0
       };

apps/api/src/interceptors/transform-data-source-in-response.interceptor.ts

@@ -58,12 +58,25 @@ export class TransformDataSourceInResponseInterceptor<T>
             });
           }
 
+          if (data.orders) {
+            data.orders.map((order) => {
+              order.dataSource = encodeDataSource(order.dataSource);
+              return order;
+            });
+          }
+
           if (data.positions) {
             data.positions.map((position) => {
               position.dataSource = encodeDataSource(position.dataSource);
               return position;
             });
           }
+
+          if (data.SymbolProfile) {
+            data.SymbolProfile.dataSource = encodeDataSource(
+              data.SymbolProfile.dataSource
+            );
+          }
         }
 
         return data;

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

@@ -11,7 +11,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
-import { AssetSubClass } from '@prisma/client';
+import { SymbolProfile } from '@prisma/client';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -26,10 +26,11 @@ import { PositionDetailDialogParams } from './interfaces/interfaces';
   styleUrls: ['./position-detail-dialog.component.scss']
 })
 export class PositionDetailDialog implements OnDestroy, OnInit {
-  public assetSubClass: AssetSubClass;
   public averagePrice: number;
   public benchmarkDataItems: LineChartItem[];
-  public currency: string;
+  public countries: {
+    [code: string]: { name: string; value: number };
+  };
   public firstBuyDate: string;
   public grossPerformance: number;
   public grossPerformancePercent: number;
@@ -38,13 +39,15 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
   public marketPrice: number;
   public maxPrice: number;
   public minPrice: number;
-  public name: string;
   public netPerformance: number;
   public netPerformancePercent: number;
   public orders: OrderWithAccount[];
   public quantity: number;
   public quantityPrecision = 2;
-  public symbol: string;
+  public sectors: {
+    [name: string]: { name: string; value: number };
+  };
+  public SymbolProfile: SymbolProfile;
   public transactionCount: number;
   public value: number;
 
@@ -66,9 +69,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(
         ({
-          assetSubClass,
           averagePrice,
-          currency,
           firstBuyDate,
           grossPerformance,
           grossPerformancePercent,
@@ -77,19 +78,17 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           marketPrice,
           maxPrice,
           minPrice,
-          name,
           netPerformance,
           netPerformancePercent,
           orders,
           quantity,
-          symbol,
+          SymbolProfile,
           transactionCount,
           value
         }) => {
-          this.assetSubClass = assetSubClass;
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
-          this.currency = currency;
+          this.countries = {};
           this.firstBuyDate = firstBuyDate;
           this.grossPerformance = grossPerformance;
           this.grossPerformancePercent = grossPerformancePercent;
@@ -110,15 +109,33 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
           this.marketPrice = marketPrice;
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
-          this.name = name;
           this.netPerformance = netPerformance;
           this.netPerformancePercent = netPerformancePercent;
           this.orders = orders;
           this.quantity = quantity;
-          this.symbol = symbol;
+          this.sectors = {};
+          this.SymbolProfile = SymbolProfile;
           this.transactionCount = transactionCount;
           this.value = value;
 
+          if (SymbolProfile?.countries?.length > 0) {
+            for (const country of SymbolProfile.countries) {
+              this.countries[country.code] = {
+                name: country.name,
+                value: country.weight
+              };
+            }
+          }
+
+          if (SymbolProfile?.sectors?.length > 0) {
+            for (const sector of SymbolProfile.sectors) {
+              this.sectors[sector.name] = {
+                name: sector.name,
+                value: sector.weight
+              };
+            }
+          }
+
           if (isToday(parseISO(this.firstBuyDate))) {
             // Add average price
             this.historicalDataItems.push({
@@ -166,7 +183,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
 
           if (Number.isInteger(this.quantity)) {
             this.quantityPrecision = 0;
-          } else if (assetSubClass === 'CRYPTOCURRENCY') {
+          } else if (this.SymbolProfile?.assetSubClass === 'CRYPTOCURRENCY') {
             if (this.quantity < 1) {
               this.quantityPrecision = 7;
             } else if (this.quantity < 1000) {
@@ -196,7 +213,7 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
       .subscribe((data) => {
         downloadAsFile(
           data,
-          `ghostfolio-export-${this.symbol}-${format(
+          `ghostfolio-export-${this.SymbolProfile?.symbol}-${format(
             parseISO(data.meta.date),
             'yyyyMMddHHmm'
           )}.json`,

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

@@ -2,7 +2,7 @@
   mat-dialog-title
   position="center"
   [deviceType]="data.deviceType"
-  [title]="name ?? symbol"
+  [title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 
@@ -55,7 +55,7 @@
         <gf-value
           label="Ø Buy Price"
           size="medium"
-          [currency]="currency"
+          [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [value]="averagePrice"
         ></gf-value>
@@ -64,7 +64,7 @@
         <gf-value
           label="Market Price"
           size="medium"
-          [currency]="currency"
+          [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [value]="marketPrice"
         ></gf-value>
@@ -73,7 +73,7 @@
         <gf-value
           label="Minimum Price"
           size="medium"
-          [currency]="currency"
+          [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
           [value]="minPrice"
@@ -83,7 +83,7 @@
         <gf-value
           label="Maximum Price"
           size="medium"
-          [currency]="currency"
+          [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
           [value]="maxPrice"
@@ -122,6 +122,72 @@
           [value]="transactionCount"
         ></gf-value>
       </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          label="Asset Class"
+          size="medium"
+          [value]="SymbolProfile?.assetClass"
+        ></gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value
+          size="medium"
+          label="Asset Sub Class"
+          [locale]="data.locale"
+          [value]="SymbolProfile?.assetSubClass"
+        ></gf-value>
+      </div>
+      <ng-container
+        *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
+      >
+        <ng-container
+          *ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts"
+        >
+          <div
+            *ngIf="SymbolProfile?.countries?.length === 1"
+            class="col-6 mb-3"
+          >
+            <gf-value
+              label="Country"
+              size="medium"
+              [locale]="data.locale"
+              [value]="SymbolProfile.countries[0].name"
+            ></gf-value>
+          </div>
+          <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
+            <gf-value
+              label="Sector"
+              size="medium"
+              [locale]="data.locale"
+              [value]="SymbolProfile.sectors[0].name"
+            ></gf-value>
+          </div>
+        </ng-container>
+        <ng-template #charts>
+          <div class="col-6 mb-3">
+            <div class="h4 mb-0" i18n>Countries</div>
+            <gf-portfolio-proportion-chart
+              [baseCurrency]="user?.settings?.baseCurrency"
+              [isInPercent]="true"
+              [keys]="['name']"
+              [locale]="user?.settings?.locale"
+              [maxItems]="10"
+              [positions]="countries"
+            ></gf-portfolio-proportion-chart>
+          </div>
+          <div class="col-6 mb-3">
+            <div class="h4 mb-0" i18n>Sectors</div>
+            <gf-portfolio-proportion-chart
+              [baseCurrency]="user?.settings?.baseCurrency"
+              [isInPercent]="true"
+              [keys]="['name']"
+              [locale]="user?.settings?.locale"
+              [maxItems]="10"
+              [positions]="sectors"
+            ></gf-portfolio-proportion-chart>
+          </div>
+        </ng-template>
+      </ng-container>
     </div>
   </div>
 

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

@@ -6,6 +6,7 @@ import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-foote
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -20,6 +21,7 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartModule,
+    GfPortfolioProportionChartModule,
     GfValueModule,
     MatButtonModule,
     MatDialogModule,

libs/ui/src/lib/value/value.component.html

@@ -34,12 +34,12 @@
         {{ currency }}
       </div>
     </ng-container>
-    <ng-container *ngIf="isDate">
+    <ng-container *ngIf="isString">
       <div
-        class="mb-0"
+        class="mb-0 text-truncate"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
-        {{ formattedDate }}
+        {{ formattedValue | titlecase }}
       </div>
     </ng-container>
   </div>

libs/ui/src/lib/value/value.component.ts

@@ -5,7 +5,7 @@ import {
   OnChanges
 } from '@angular/core';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { format, isDate } from 'date-fns';
+import { format, isDate, parseISO } from 'date-fns';
 import { isNumber } from 'lodash';
 
 @Component({
@@ -28,10 +28,9 @@ export class ValueComponent implements OnChanges {
   @Input() value: number | string = '';
 
   public absoluteValue = 0;
-  public formattedDate = '';
   public formattedValue = '';
-  public isDate = false;
   public isNumber = false;
+  public isString = false;
   public useAbsoluteValue = false;
 
   public constructor() {}
@@ -39,8 +38,8 @@ export class ValueComponent implements OnChanges {
   public ngOnChanges() {
     if (this.value || this.value === 0) {
       if (isNumber(this.value)) {
-        this.isDate = false;
         this.isNumber = true;
+        this.isString = false;
         this.absoluteValue = Math.abs(<number>this.value);
 
         if (this.colorizeSign) {
@@ -98,17 +97,19 @@ export class ValueComponent implements OnChanges {
           this.formattedValue = this.formattedValue.replace(/^-/, '');
         }
       } else {
-        try {
-          if (isDate(new Date(this.value))) {
-            this.isDate = true;
-            this.isNumber = false;
+        this.isNumber = false;
+        this.isString = true;
 
-            this.formattedDate = format(
+        try {
+          if (isDate(parseISO(this.value))) {
+            this.formattedValue = format(
               new Date(<string>this.value),
               DEFAULT_DATE_FORMAT
             );
           }
-        } catch {}
+        } catch {
+          this.formattedValue = this.value;
+        }
       }
     }