Feature/add absolute change column to holdings table (#3378)

* Add absolute change column

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the absolute change column to the holdings table on the home page
+
 ### Changed
 
 - Increased the number of attempts of queue jobs from `10` to `12` (fail later)

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

@@ -109,7 +109,30 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="performance" stickyEnd>
+    <ng-container matColumnDef="performance">
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header="netPerformanceWithCurrencyEffect"
+      >
+        <ng-container i18n>Change</ng-container>
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [colorizeSign]="true"
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="
+              isLoading ? undefined : element.netPerformanceWithCurrencyEffect
+            "
+          />
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="performanceInPercentage" stickyEnd>
       <th
         *matHeaderCellDef
         class="justify-content-end px-1"

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

@@ -84,7 +84,12 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
     }
 
     this.displayedColumns.push('allocationInPercentage');
+
+    if (this.hasPermissionToShowValues) {
       this.displayedColumns.push('performance');
+    }
+
+    this.displayedColumns.push('performanceInPercentage');
 
     this.isLoading = true;