diff --git a/CHANGELOG.md b/CHANGELOG.md index e8b280ac2..b1f881dc5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unreleased + +### Added + +- Added a chart to the account detail dialog + ## 2.12.0 - 2023-10-17 ### Added diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss index b63df0134..8831fb01d 100644 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss +++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss @@ -3,5 +3,9 @@ .mat-mdc-dialog-content { max-height: unset; + + .chart-container { + aspect-ratio: 16 / 9; + } } } diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts index 3a4746b6b..756df74cf 100644 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts +++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts @@ -8,11 +8,11 @@ import { } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { DataService } from '@ghostfolio/client/services/data.service'; +import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { downloadAsFile } from '@ghostfolio/common/helper'; -import { User } from '@ghostfolio/common/interfaces'; +import { HistoricalDataItem, User } from '@ghostfolio/common/interfaces'; import { OrderWithAccount } from '@ghostfolio/common/types'; -import { translate } from '@ghostfolio/ui/i18n'; import Big from 'big.js'; import { format, parseISO } from 'date-fns'; import { isNumber } from 'lodash'; @@ -32,6 +32,9 @@ export class AccountDetailDialog implements OnDestroy, OnInit { public balance: number; public currency: string; public equity: number; + public hasImpersonationId: boolean; + public historicalDataItems: HistoricalDataItem[]; + public isLoadingChart: boolean; public name: string; public orders: OrderWithAccount[]; public platformName: string; @@ -46,6 +49,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit { @Inject(MAT_DIALOG_DATA) public data: AccountDetailDialogParams, private dataService: DataService, public dialogRef: MatDialogRef, + private impersonationStorageService: ImpersonationStorageService, private userService: UserService ) { this.userService.stateChanged @@ -59,7 +63,9 @@ export class AccountDetailDialog implements OnDestroy, OnInit { }); } - public ngOnInit(): void { + public ngOnInit() { + this.isLoadingChart = true; + this.dataService .fetchAccount(this.data.accountId) .pipe(takeUntil(this.unsubscribeSubject)) @@ -101,9 +107,45 @@ export class AccountDetailDialog implements OnDestroy, OnInit { this.changeDetectorRef.markForCheck(); }); + + this.dataService + .fetchPortfolioPerformance({ + filters: [ + { + id: this.data.accountId, + type: 'ACCOUNT' + } + ], + range: 'max' + }) + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe(({ chart }) => { + this.historicalDataItems = chart.map( + ({ date, value, valueInPercentage }) => { + return { + date, + value: + this.hasImpersonationId || this.user.settings.isRestrictedView + ? valueInPercentage + : value + }; + } + ); + + this.isLoadingChart = false; + + this.changeDetectorRef.markForCheck(); + }); + + this.impersonationStorageService + .onChangeHasImpersonation() + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe((impersonationId) => { + this.hasImpersonationId = !!impersonationId; + }); } - public onClose(): void { + public onClose() { this.dialogRef.close(); } diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html index 46a5ee7b0..02d1c917e 100644 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html +++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html @@ -20,6 +20,17 @@ +
+ +
+