Feature/improve consistent use of symbol with data source (#656)
* Improve the consistent use of symbol with dataSource * Update changelogpull/659/head
Thomas Kaul
2 years ago
committed by
GitHub
parent
035d8ad9eb
commit
62885ea890
@ -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