diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html index 631e5b7e1..29aebc75c 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.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts index e773caecf..0fb404ffd 100644 --- a/libs/ui/src/lib/benchmark/benchmark.component.ts +++ b/libs/ui/src/lib/benchmark/benchmark.component.ts @@ -12,6 +12,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value'; import { CommonModule } from '@angular/common'; import { + AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, @@ -19,14 +20,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, SortDirection } 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 +44,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface GfValueComponent, MatButtonModule, MatMenuModule, + MatSortModule, MatTableModule, NgxSkeletonLoaderModule, RouterModule @@ -50,7 +54,9 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface styleUrls: ['./benchmark.component.scss'], templateUrl: './benchmark.component.html' }) -export class GfBenchmarkComponent implements OnChanges, OnDestroy { +export class GfBenchmarkComponent + implements AfterViewInit, OnChanges, OnDestroy +{ @Input() benchmarks: Benchmark[]; @Input() deviceType: string; @Input() hasPermissionToDeleteItem: boolean; @@ -59,6 +65,9 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy { @Output() itemDeleted = new EventEmitter(); + @ViewChild(MatSort) sort: MatSort; + + public dataSource = new MatTableDataSource([]); public displayedColumns = [ 'name', 'date', @@ -69,6 +78,8 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy { public isLoading = true; public isNumber = isNumber; public resolveMarketCondition = resolveMarketCondition; + public sortColumn = 'name'; + public sortDirection: SortDirection = 'asc'; public translate = translate; private unsubscribeSubject = new Subject(); @@ -95,8 +106,22 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy { }); } + ngAfterViewInit() { + this.dataSource.sort = this.sort; + + this.dataSource.sortingDataAccessor = (item, property) => { + switch (property) { + case 'change': + return item.performances?.allTimeHigh?.performancePercent; + default: + return get(item, property); + } + }; + } + public ngOnChanges() { if (this.benchmarks) { + this.dataSource.data = this.benchmarks; this.isLoading = false; }