diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html index dde103077..538a51d78 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.html +++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html @@ -16,6 +16,7 @@ [tooltip]="element.name" /> + @@ -38,6 +39,7 @@ {{ element.symbol }} + Total @@ -62,6 +64,11 @@ /> + @@ -86,6 +93,14 @@ /> + + + + @@ -107,6 +122,7 @@ /> + @@ -130,6 +146,16 @@ /> + +
+ +
+
@@ -156,6 +182,16 @@ /> + +
+ +
+
@@ -175,6 +211,11 @@ }) " > + diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts index 802cdc69a..fd9bc0059 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts +++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts @@ -67,6 +67,10 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy { public isLoading = true; public routeQueryParams: Subscription; + protected totalValue = 0; + protected totalChange = 0; + protected totalChangePercentage = 0; + private unsubscribeSubject = new Subject(); public ngOnChanges() { @@ -89,6 +93,16 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy { this.dataSource = new MatTableDataSource(this.holdings); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; + this.totalValue = this.dataSource.data.reduce( + (sum, current) => (sum += current.valueInBaseCurrency), + 0 + ); + this.totalChange = this.dataSource.data.reduce( + (sum, current) => (sum += current.netPerformanceWithCurrencyEffect), + 0 + ); + this.totalChangePercentage = + this.totalChange / (this.totalValue - this.totalChange); if (this.holdings) { this.isLoading = false;