Feature/add allocations by platform chart (#1915)

* Add allocations by platform

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Introduced the allocations by platform chart on the allocations page
+
 ### Changed
 
 - Deprecated the use of the environment variable `BASE_CURRENCY`

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

@@ -91,6 +91,7 @@ export class PortfolioController {
       filteredValueInPercentage,
       hasErrors,
       holdings,
+      platforms,
       summary,
       totalValueInBaseCurrency
     } = await this.portfolioService.getDetails({
@@ -139,6 +140,10 @@ export class PortfolioController {
       for (const [name, { valueInBaseCurrency }] of Object.entries(accounts)) {
         accounts[name].valueInPercentage = valueInBaseCurrency / totalValue;
       }
+
+      for (const [name, { valueInBaseCurrency }] of Object.entries(platforms)) {
+        platforms[name].valueInPercentage = valueInBaseCurrency / totalValue;
+      }
     }
 
     if (
@@ -181,6 +186,7 @@ export class PortfolioController {
       filteredValueInPercentage,
       hasError,
       holdings,
+      platforms,
       totalValueInBaseCurrency,
       summary: portfolioSummary
     };

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

@@ -583,7 +583,7 @@ export class PortfolioService {
       }
     }
 
-    const accounts = await this.getValueOfAccounts({
+    const { accounts, platforms } = await this.getValueOfAccountsAndPlatforms({
       filters,
       orders,
       portfolioItemsNow,
@@ -641,6 +641,7 @@ export class PortfolioService {
     return {
       accounts,
       holdings,
+      platforms,
       summary,
       filteredValueInBaseCurrency: filteredValueInBaseCurrency.toNumber(),
       filteredValueInPercentage: summary.netWorth
@@ -1171,7 +1172,7 @@ export class PortfolioService {
       portfolioItemsNow[position.symbol] = position;
     }
 
-    const accounts = await this.getValueOfAccounts({
+    const { accounts } = await this.getValueOfAccountsAndPlatforms({
       orders,
       portfolioItemsNow,
       userCurrency,
@@ -1691,7 +1692,7 @@ export class PortfolioService {
     };
   }
 
-  private async getValueOfAccounts({
+  private async getValueOfAccountsAndPlatforms({
     filters = [],
     orders,
     portfolioItemsNow,
@@ -1715,6 +1716,7 @@ export class PortfolioService {
     });
 
     const accounts: PortfolioDetails['accounts'] = {};
+    const platforms: PortfolioDetails['platforms'] = {};
 
     let currentAccounts: (Account & {
       Order?: Order[];
@@ -1767,6 +1769,26 @@ export class PortfolioService {
         )
       };
 
+      if (platforms[account.Platform?.id || UNKNOWN_KEY]?.valueInBaseCurrency) {
+        platforms[account.Platform?.id || UNKNOWN_KEY].valueInBaseCurrency +=
+          this.exchangeRateDataService.toCurrency(
+            account.balance,
+            account.currency,
+            userCurrency
+          );
+      } else {
+        platforms[account.Platform?.id || UNKNOWN_KEY] = {
+          balance: account.balance,
+          currency: account.currency,
+          name: account.Platform?.name,
+          valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
+            account.balance,
+            account.currency,
+            userCurrency
+          )
+        };
+      }
+
       for (const order of ordersByAccount) {
         let currentValueOfSymbolInBaseCurrency =
           order.quantity *
@@ -1789,10 +1811,26 @@ export class PortfolioService {
             valueInBaseCurrency: currentValueOfSymbolInBaseCurrency
           };
         }
+
+        if (
+          platforms[order.Account?.Platform?.id || UNKNOWN_KEY]
+            ?.valueInBaseCurrency
+        ) {
+          platforms[
+            order.Account?.Platform?.id || UNKNOWN_KEY
+          ].valueInBaseCurrency += currentValueOfSymbolInBaseCurrency;
+        } else {
+          platforms[order.Account?.Platform?.id || UNKNOWN_KEY] = {
+            balance: 0,
+            currency: order.Account?.currency,
+            name: account.Platform?.name,
+            valueInBaseCurrency: currentValueOfSymbolInBaseCurrency
+          };
+        }
       }
     }
 
-    return accounts;
+    return { accounts, platforms };
   }
 
   private async getUserId(aImpersonationId: string, aUserId: string) {

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

@@ -20,7 +20,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Market } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
-import { Account, AssetClass, DataSource } from '@prisma/client';
+import { Account, AssetClass, DataSource, Platform } from '@prisma/client';
 import { isNumber } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -55,6 +55,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     [key in Market]: { name: string; value: number };
   };
   public placeholder = '';
+  public platforms: {
+    [id: string]: Pick<Platform, 'name'> & {
+      id: string;
+      value: number;
+    };
+  };
   public portfolioDetails: PortfolioDetails;
   public positions: {
     [symbol: string]: Pick<
@@ -230,6 +236,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         value: undefined
       }
     };
+    this.platforms = {};
     this.positions = {};
     this.sectors = {
       [UNKNOWN_KEY]: {
@@ -371,6 +378,25 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       };
     }
 
+    for (const [
+      id,
+      { name, valueInBaseCurrency, valueInPercentage }
+    ] of Object.entries(this.portfolioDetails.platforms)) {
+      let value = 0;
+
+      if (this.hasImpersonationId) {
+        value = valueInPercentage;
+      } else {
+        value = valueInBaseCurrency;
+      }
+
+      this.platforms[id] = {
+        id,
+        name,
+        value
+      };
+    }
+
     const marketsTotal =
       this.markets.developedMarkets.value +
       this.markets.emergingMarkets.value +

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

@@ -38,18 +38,18 @@
     <div class="col-md-4">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
+          <mat-card-title class="text-truncate" i18n
+            >By Platform</mat-card-title
+          >
         </mat-card-header>
         <mat-card-content>
           <gf-portfolio-proportion-chart
-            cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['id']"
             [locale]="user?.settings?.locale"
-            [positions]="accounts"
-            (proportionChartClicked)="onAccountChartClicked($event)"
+            [positions]="platforms"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
@@ -250,6 +250,25 @@
     </div>
   </div>
   <div class="row">
+    <div class="col-md-4">
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            cursor="pointer"
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['id']"
+            [locale]="user?.settings?.locale"
+            [positions]="accounts"
+            (proportionChartClicked)="onAccountChartClicked($event)"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <div class="col-md-4">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">

libs/common/src/lib/interfaces/portfolio-details.interface.ts

@@ -16,6 +16,15 @@ export interface PortfolioDetails {
   filteredValueInBaseCurrency?: number;
   filteredValueInPercentage: number;
   holdings: { [symbol: string]: PortfolioPosition };
+  platforms: {
+    [id: string]: {
+      balance: number;
+      currency: string;
+      name: string;
+      valueInBaseCurrency: number;
+      valueInPercentage?: number;
+    };
+  };
   summary: PortfolioSummary;
   totalValueInBaseCurrency?: number;
 }