Feature/add footer row to accounts table (#471)

* Add footer row to accounts table with total balance and value

* Update changelog

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 footer row with buying power and net worth to the accounts table
+
 ## 1.75.0 - 13.11.2021
 
 ### Added

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

@@ -1,16 +1,17 @@
 import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
-import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
+import {
+  nullifyValuesInObject,
+  nullifyValuesInObjects
+} from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
+import { Accounts } from '@ghostfolio/common/interfaces';
 import {
   getPermissions,
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import type {
-  AccountWithValue,
-  RequestWithUser
-} from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -90,32 +91,39 @@ export class AccountController {
   @UseGuards(AuthGuard('jwt'))
   public async getAllAccounts(
     @Headers('impersonation-id') impersonationId
-  ): Promise<AccountWithValue[]> {
+  ): Promise<Accounts> {
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(
         impersonationId,
         this.request.user.id
       );
 
-    let accounts = await this.portfolioService.getAccounts(
-      impersonationUserId || this.request.user.id
-    );
+    let accountsWithAggregations =
+      await this.portfolioService.getAccountsWithAggregations(
+        impersonationUserId || this.request.user.id
+      );
 
     if (
       impersonationUserId ||
       this.userService.isRestrictedView(this.request.user)
     ) {
-      accounts = nullifyValuesInObjects(accounts, [
-        'balance',
-        'convertedBalance',
-        'fee',
-        'quantity',
-        'unitPrice',
-        'value'
-      ]);
+      accountsWithAggregations = {
+        ...nullifyValuesInObject(accountsWithAggregations, [
+          'totalBalance',
+          'totalValue'
+        ]),
+        accounts: nullifyValuesInObjects(accountsWithAggregations.accounts, [
+          'balance',
+          'convertedBalance',
+          'fee',
+          'quantity',
+          'unitPrice',
+          'value'
+        ])
+      };
     }
 
-    return accounts;
+    return accountsWithAggregations;
   }
 
   @Get(':id')

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

@@ -28,6 +28,7 @@ import {
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
+  Accounts,
   PortfolioDetails,
   PortfolioPerformance,
   PortfolioReport,
@@ -101,7 +102,7 @@ export class PortfolioService {
           userCurrency
         ),
         transactionCount: account.Order.length,
-        value: details.accounts[account.name].current
+        value: details.accounts[account.name]?.current ?? 0
       };
 
       delete result.Order;
@@ -110,6 +111,21 @@ export class PortfolioService {
     });
   }
 
+  public async getAccountsWithAggregations(aUserId: string): Promise<Accounts> {
+    const accounts = await this.getAccounts(aUserId);
+    let totalBalance = 0;
+    let totalValue = 0;
+    let transactionCount = 0;
+
+    for (const account of accounts) {
+      totalBalance += account.convertedBalance;
+      totalValue += account.value;
+      transactionCount += account.transactionCount;
+    }
+
+    return { accounts, totalBalance, totalValue, transactionCount };
+  }
+
   public async getInvestments(
     aImpersonationId: string
   ): Promise<InvestmentItem[]> {
@@ -924,16 +940,9 @@ export class PortfolioService {
       };
 
       for (const order of ordersByAccount) {
-        let currentValueOfSymbol = this.exchangeRateDataService.toCurrency(
-          order.quantity * portfolioItemsNow[order.symbol].marketPrice,
-          order.currency,
-          userCurrency
-        );
-        let originalValueOfSymbol = this.exchangeRateDataService.toCurrency(
-          order.quantity * order.unitPrice,
-          order.currency,
-          userCurrency
-        );
+        let currentValueOfSymbol =
+          order.quantity * portfolioItemsNow[order.symbol].marketPrice;
+        let originalValueOfSymbol = order.quantity * order.unitPrice;
 
         if (order.type === 'SELL') {
           currentValueOfSymbol *= -1;

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -15,6 +15,7 @@
         >(Default)</span
       >
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell>Total</td>
   </ng-container>
 
   <ng-container matColumnDef="currency">
@@ -29,6 +30,7 @@
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       {{ element.currency }}
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell>{{ baseCurrency }}</td>
   </ng-container>
 
   <ng-container matColumnDef="platform">
@@ -51,6 +53,7 @@
         <span>{{ element.Platform?.name }}</span>
       </div>
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
   </ng-container>
 
   <ng-container matColumnDef="transactions">
@@ -63,6 +66,9 @@
         element.transactionCount
       }}</ng-container>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      {{ transactionCount }}
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="balance">
@@ -77,6 +83,14 @@
         [value]="element.convertedBalance"
       ></gf-value>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="totalBalance"
+      ></gf-value>
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="value">
@@ -91,6 +105,14 @@
         [value]="element.value"
       ></gf-value>
     </td>
+    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="totalValue"
+      ></gf-value>
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="actions">
@@ -118,10 +140,16 @@
         </button>
       </mat-menu>
     </td>
+    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
   </ng-container>
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  <tr
+    *matFooterRowDef="displayedColumns"
+    mat-footer-row
+    [ngClass]="{ 'd-none': isLoading }"
+  ></tr>
 </table>
 
 <ngx-skeleton-loader

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -10,6 +10,16 @@
   }
 
   .mat-table {
+    td {
+      &.mat-footer-cell {
+        border-top: 1px solid
+          rgba(
+            var(--palette-foreground-divider),
+            var(--palette-foreground-divider-alpha)
+          );
+      }
+    }
+
     th {
       ::ng-deep {
         .mat-sort-header-container {

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -24,6 +24,9 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() deviceType: string;
   @Input() locale: string;
   @Input() showActions: boolean;
+  @Input() totalBalance: number;
+  @Input() totalValue: number;
+  @Input() transactionCount: number;
 
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -28,6 +28,9 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
   public hasPermissionToCreateAccount: boolean;
   public hasPermissionToDeleteAccount: boolean;
   public routeQueryParams: Subscription;
+  public totalBalance = 0;
+  public totalValue = 0;
+  public transactionCount = 0;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -103,8 +106,11 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
     this.dataService
       .fetchAccounts()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
-        this.accounts = response;
+      .subscribe(({ accounts, totalBalance, totalValue, transactionCount }) => {
+        this.accounts = accounts;
+        this.totalBalance = totalBalance;
+        this.totalValue = totalValue;
+        this.transactionCount = transactionCount;
 
         if (this.accounts?.length <= 0) {
           this.router.navigate([], { queryParams: { createDialog: true } });

apps/client/src/app/pages/accounts/accounts-page.html

@@ -8,6 +8,9 @@
         [deviceType]="deviceType"
         [locale]="user?.settings?.locale"
         [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
+        [totalBalance]="totalBalance"
+        [totalValue]="totalValue"
+        [transactionCount]="transactionCount"
         (accountDeleted)="onDeleteAccount($event)"
         (accountToUpdate)="onUpdateAccount($event)"
       ></gf-accounts-table>

apps/client/src/app/services/data.service.ts

@@ -17,6 +17,7 @@ import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setti
 import { UpdateUserSettingsDto } from '@ghostfolio/api/app/user/update-user-settings.dto';
 import {
   Access,
+  Accounts,
   AdminData,
   Export,
   InfoItem,
@@ -62,7 +63,7 @@ export class DataService {
   }
 
   public fetchAccounts() {
-    return this.http.get<AccountWithValue[]>('/api/account');
+    return this.http.get<Accounts>('/api/account');
   }
 
   public fetchAdminData() {

apps/client/src/styles/table.scss

@@ -1,8 +1,12 @@
 @mixin gf-table($darkTheme: false) {
   background: transparent !important;
 
-  td {
-    border: 0 !important;
+  .mat-footer-row,
+  .mat-row {
+    .mat-cell,
+    .mat-footer-cell {
+      border-bottom: 0;
+    }
   }
 
   .mat-row {

libs/common/src/lib/interfaces/accounts.interface.ts

@@ -0,0 +1,8 @@
+import { AccountWithValue } from '@ghostfolio/common/types';
+
+export interface Accounts {
+  accounts: AccountWithValue[];
+  totalBalance: number;
+  totalValue: number;
+  transactionCount: number;
+}

libs/common/src/lib/interfaces/index.ts

@@ -1,4 +1,5 @@
 import { Access } from './access.interface';
+import { Accounts } from './accounts.interface';
 import { AdminData } from './admin-data.interface';
 import { Export } from './export.interface';
 import { InfoItem } from './info-item.interface';
@@ -19,6 +20,7 @@ import { User } from './user.interface';
 
 export {
   Access,
+  Accounts,
   AdminData,
   Export,
   InfoItem,

libs/common/src/lib/types/account-with-value.type.ts

@@ -2,5 +2,6 @@ import { Account as AccountModel } from '@prisma/client';
 
 export type AccountWithValue = AccountModel & {
   convertedBalance: number;
+  transactionCount: number;
   value: number;
 };