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 0fb8b9b0a..b7145970e 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"
/>
+
|
@@ -42,6 +43,7 @@
{{ element.symbol }}
+ Total |
@@ -66,6 +68,7 @@
/>
+ |
+ |
+
+
+
+ |
+ |
+
+
+
+
+ |
@@ -194,6 +216,15 @@
/>
+
+
+
+
+ |
@@ -213,6 +244,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 7aa40e9f9..6c3a63029 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
@@ -70,6 +70,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() {
@@ -93,6 +97,15 @@ 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.netPerformancePercentWithCurrencyEffect,
+ 0
+ );
+ this.totalChangePercentage = (this.totalChange / this.totalValue) * 100;
if (this.holdings) {
this.isLoading = false;