Added summary row to overview

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -16,6 +16,7 @@
           [tooltip]="element.name"
         />
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>
 
     <ng-container matColumnDef="nameWithSymbol">
@@ -42,6 +43,7 @@
           <small class="text-muted">{{ element.symbol }}</small>
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell>Total</td>
     </ng-container>
 
     <ng-container matColumnDef="dateOfFirstActivity">
@@ -66,6 +68,7 @@
           />
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>
     <ng-container
       matColumnDef="marketPrice"
@@ -89,6 +92,7 @@
           />
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>
 
     <ng-container
@@ -116,6 +120,14 @@
           />
         </div>
       </td>
+
+      <td *matFooterCellDef class="px-1" mat-footer-cell>
+        <gf-value
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="totalValue"
+        ></gf-value>
+      </td>
     </ng-container>
 
     <ng-container
@@ -140,6 +152,7 @@
           />
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>
 
     <ng-container
@@ -168,6 +181,15 @@
           />
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="totalChange"
+          ></gf-value>
+        </div>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="performanceInPercentage" stickyEnd>
@@ -194,6 +216,15 @@
           />
         </div>
       </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isPercent]="true"
+            [locale]="locale"
+            [value]="totalChangePercentage"
+          ></gf-value>
+        </div>
+      </td>
     </ng-container>
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
@@ -213,6 +244,11 @@
           })
       "
     ></tr>
+    <tr
+      *matFooterRowDef="displayedColumns"
+      mat-footer-row
+      [ngClass]="{ hidden: isLoading }"
+    ></tr>
   </table>
 </div>
 

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<void>();
 
   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;