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 5e4526fdc..48a652ebe 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,7 @@
/>
+ |
@@ -86,6 +89,14 @@
/>
+
+
+
+ |
@@ -107,6 +118,7 @@
/>
+ |
@@ -130,6 +142,15 @@
/>
+
+
+
+
+ |
@@ -156,6 +177,15 @@
/>
+
+
+
+
+ |
@@ -175,6 +205,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 14382f420..c40b69a12 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() {
@@ -92,6 +96,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;