From 73ac4b41975e12f91a860205d4d13cdec424549e Mon Sep 17 00:00:00 2001
From: Basim Mohammed <107759928+Basimohd@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:21:31 +0530
Subject: [PATCH] Add chart to account detail dialog (#2502)
* Add chart to account detail dialog
* Update changelog
---------
Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>
---
CHANGELOG.md | 6 +++
.../account-detail-dialog.component.scss | 4 ++
.../account-detail-dialog.component.ts | 50 +++++++++++++++++--
.../account-detail-dialog.html | 11 ++++
.../account-detail-dialog.module.ts | 2 +
5 files changed, 69 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8b280ac..b1f881dc 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 b63df013..8831fb01 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 3a4746b6..756df74c 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<AccountDetailDialog>,
+ 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 46a5ee7b..02d1c917 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 @@
</div>
</div>
+ <div class="chart-container mb-3">
+ <gf-investment-chart
+ class="h-100"
+ [currency]="user?.settings?.baseCurrency"
+ [historicalDataItems]="historicalDataItems"
+ [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+ [isLoading]="isLoadingChart"
+ [locale]="user?.settings?.locale"
+ ></gf-investment-chart>
+ </div>
+
<div class="row">
<div class="col-6 mb-3">
<gf-value
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
index 6b6dec91..c3d45b6c 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
import { GfValueModule } from '@ghostfolio/ui/value';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -17,6 +18,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
GfActivitiesTableModule,
GfDialogFooterModule,
GfDialogHeaderModule,
+ GfInvestmentChartModule,
GfValueModule,
MatButtonModule,
MatDialogModule,