mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
* Improve the consistent use of symbol with dataSource * Update changelogpull/659/head
Thomas Kaul
4 years ago
committed by
GitHub
GitHub
22 changed files with 122 additions and 201 deletions
@ -1,6 +0,0 @@ |
|||
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface'; |
|||
|
|||
export interface PositionDetailDialogParams { |
|||
deviceType: string; |
|||
historicalDataItems: LineChartItem[]; |
|||
} |
|||
@ -1,12 +0,0 @@ |
|||
:host { |
|||
display: block; |
|||
|
|||
.mat-dialog-content { |
|||
max-height: unset; |
|||
|
|||
gf-line-chart { |
|||
aspect-ratio: 16 / 9; |
|||
margin: 0 -1rem; |
|||
} |
|||
} |
|||
} |
|||
@ -1,94 +0,0 @@ |
|||
import { |
|||
ChangeDetectionStrategy, |
|||
ChangeDetectorRef, |
|||
Component, |
|||
Inject |
|||
} from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { DataService } from '@ghostfolio/client/services/data.service'; |
|||
import { DATE_FORMAT } from '@ghostfolio/common/helper'; |
|||
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface'; |
|||
import { isToday, parse } from 'date-fns'; |
|||
import { Subject } from 'rxjs'; |
|||
import { takeUntil } from 'rxjs/operators'; |
|||
|
|||
import { PositionDetailDialogParams } from './interfaces/interfaces'; |
|||
|
|||
@Component({ |
|||
selector: 'gf-performance-chart-dialog', |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
templateUrl: 'performance-chart-dialog.html', |
|||
styleUrls: ['./performance-chart-dialog.component.scss'] |
|||
}) |
|||
export class PerformanceChartDialog { |
|||
public benchmarkDataItems: LineChartItem[]; |
|||
public benchmarkSymbol = 'VOO'; |
|||
public currency: string; |
|||
public firstBuyDate: string; |
|||
public marketPrice: number; |
|||
public historicalDataItems: LineChartItem[]; |
|||
|
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
public constructor( |
|||
private changeDetectorRef: ChangeDetectorRef, |
|||
private dataService: DataService, |
|||
public dialogRef: MatDialogRef<PerformanceChartDialog>, |
|||
@Inject(MAT_DIALOG_DATA) public data: PositionDetailDialogParams |
|||
) { |
|||
this.dataService |
|||
.fetchPositionDetail(this.benchmarkSymbol) |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe(({ currency, firstBuyDate, historicalData, marketPrice }) => { |
|||
this.benchmarkDataItems = []; |
|||
this.currency = currency; |
|||
this.firstBuyDate = firstBuyDate; |
|||
this.historicalDataItems = []; |
|||
this.marketPrice = marketPrice; |
|||
|
|||
let coefficient = 1; |
|||
|
|||
this.historicalDataItems = this.data.historicalDataItems; |
|||
|
|||
this.historicalDataItems?.forEach((historicalDataItem) => { |
|||
const benchmarkItem = historicalData.find((item) => { |
|||
return item.date === historicalDataItem.date; |
|||
}); |
|||
|
|||
if (benchmarkItem) { |
|||
if (coefficient === 1) { |
|||
coefficient = historicalDataItem.value / benchmarkItem.value || 1; |
|||
} |
|||
|
|||
this.benchmarkDataItems.push({ |
|||
date: historicalDataItem.date, |
|||
value: benchmarkItem.value * coefficient |
|||
}); |
|||
} else if ( |
|||
isToday(parse(historicalDataItem.date, DATE_FORMAT, new Date())) |
|||
) { |
|||
this.benchmarkDataItems.push({ |
|||
date: historicalDataItem.date, |
|||
value: marketPrice * coefficient |
|||
}); |
|||
} else { |
|||
this.benchmarkDataItems.push({ |
|||
date: historicalDataItem.date, |
|||
value: undefined |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
this.changeDetectorRef.markForCheck(); |
|||
}); |
|||
} |
|||
|
|||
public onClose(): void { |
|||
this.dialogRef.close(); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
} |
|||
@ -1,27 +0,0 @@ |
|||
<gf-dialog-header |
|||
mat-dialog-title |
|||
title="Performance" |
|||
[deviceType]="data.deviceType" |
|||
(closeButtonClicked)="onClose()" |
|||
></gf-dialog-header> |
|||
|
|||
<div mat-dialog-content> |
|||
<div class="container p-0"> |
|||
<gf-line-chart |
|||
class="mb-4" |
|||
symbol="Performance" |
|||
[benchmarkDataItems]="benchmarkDataItems" |
|||
[historicalDataItems]="historicalDataItems" |
|||
[showGradient]="true" |
|||
[showLegend]="true" |
|||
[showXAxis]="true" |
|||
[showYAxis]="false" |
|||
></gf-line-chart> |
|||
</div> |
|||
</div> |
|||
|
|||
<gf-dialog-footer |
|||
mat-dialog-actions |
|||
[deviceType]="data.deviceType" |
|||
(closeButtonClicked)="onClose()" |
|||
></gf-dialog-footer> |
|||
@ -1,28 +0,0 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { MatButtonModule } from '@angular/material/button'; |
|||
import { MatDialogModule } from '@angular/material/dialog'; |
|||
import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module'; |
|||
import { GfValueModule } from '@ghostfolio/ui/value'; |
|||
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|||
|
|||
import { GfDialogFooterModule } from '../dialog-footer/dialog-footer.module'; |
|||
import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module'; |
|||
import { PerformanceChartDialog } from './performance-chart-dialog.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [PerformanceChartDialog], |
|||
exports: [], |
|||
imports: [ |
|||
CommonModule, |
|||
GfDialogFooterModule, |
|||
GfDialogHeaderModule, |
|||
GfLineChartModule, |
|||
GfValueModule, |
|||
MatButtonModule, |
|||
MatDialogModule, |
|||
NgxSkeletonLoaderModule |
|||
], |
|||
providers: [] |
|||
}) |
|||
export class GfPerformanceChartDialogModule {} |
|||
Loading…
Reference in new issue