Feature/enable column sorting in benchmark component (#4842)

* Enable column sorting in benchmark component

* Update changelog

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added support for column sorting to the markets overview
+- Added support for column sorting to the watchlist
 - Set up the language localization for the static portfolio analysis rule: _Emergency Fund_ (Setup)
 - Set up the language localization for the static portfolio analysis rule: _Fees_ (Fee Ratio)
 

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -1,7 +1,16 @@
 <div class="overflow-x-auto">
-  <table class="gf-table w-100" mat-table [dataSource]="benchmarks">
+  <table
+    class="gf-table w-100"
+    mat-table
+    matSort
+    matSortActive="name"
+    matSortDirection="asc"
+    [dataSource]="dataSource"
+  >
     <ng-container matColumnDef="name">
-      <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
+      <th *matHeaderCellDef class="px-2" i18n mat-header-cell mat-sort-header>
+        Name
+      </th>
       <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
         {{ element?.name }}
       </td>
@@ -91,7 +100,12 @@
     </ng-container>
 
     <ng-container matColumnDef="change">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th
+        *matHeaderCellDef
+        class="px-2 justify-content-end"
+        mat-header-cell
+        mat-sort-header="performances.allTimeHigh.performancePercent"
+      >
         <span class="d-none d-sm-block text-nowrap" i18n
           >Change from All Time High</span
         >

libs/ui/src/lib/benchmark/benchmark.component.scss

@@ -1,3 +1,13 @@
 :host {
   display: block;
+
+  .gf-table {
+    th {
+      ::ng-deep {
+        .mat-sort-header-container {
+          justify-content: inherit;
+        }
+      }
+    }
+  }
 }

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -19,14 +19,16 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  Output
+  Output,
+  ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatTableModule } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { isNumber } from 'lodash';
+import { get, isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -41,6 +43,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
     GfValueComponent,
     MatButtonModule,
     MatMenuModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule
@@ -59,6 +62,9 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
 
   @Output() itemDeleted = new EventEmitter<AssetProfileIdentifier>();
 
+  @ViewChild(MatSort) sort: MatSort;
+
+  public dataSource = new MatTableDataSource<Benchmark>([]);
   public displayedColumns = [
     'name',
     'date',
@@ -97,6 +103,10 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
 
   public ngOnChanges() {
     if (this.benchmarks) {
+      this.dataSource.data = this.benchmarks;
+      this.dataSource.sort = this.sort;
+      this.dataSource.sortingDataAccessor = get;
+
       this.isLoading = false;
     }