diff --git a/CHANGELOG.md b/CHANGELOG.md index 706edd865..b2e20e8da 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html index 631e5b7e1..b11a76507 100644 --- a/libs/ui/src/lib/benchmark/benchmark.component.html +++ b/libs/ui/src/lib/benchmark/benchmark.component.html @@ -1,7 +1,16 @@
- +
- + @@ -91,7 +100,12 @@ -
Name + Name + {{ element?.name }} + Change from All Time High diff --git a/libs/ui/src/lib/benchmark/benchmark.component.scss b/libs/ui/src/lib/benchmark/benchmark.component.scss index 5d4e87f30..990b8b294 100644 --- a/libs/ui/src/lib/benchmark/benchmark.component.scss +++ b/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; + } + } + } + } } diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts index e773caecf..7269bb70c 100644 --- a/libs/ui/src/lib/benchmark/benchmark.component.ts +++ b/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(); + @ViewChild(MatSort) sort: MatSort; + + public dataSource = new MatTableDataSource([]); 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; }