Feature/separate FIRE and X-ray pages (#4037)
* Separate FIRE / X-ray page * Update changelogpull/4029/head
Mohan
2 weeks ago
committed by
GitHub
parent
15856264f8
commit
92b025bff3
@ -0,0 +1,21 @@
|
|||||||
|
import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
|
||||||
|
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { XRayPageComponent } from './x-ray-page.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
canActivate: [AuthGuard],
|
||||||
|
component: XRayPageComponent,
|
||||||
|
path: '',
|
||||||
|
title: 'X-ray'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class XRayPageRoutingModule {}
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h2 class="d-none d-sm-block h3 mb-3 text-center">X-ray</h2>
|
||||||
|
<p class="mb-4" i18n>
|
||||||
|
Ghostfolio X-ray uses static analysis to uncover potential issues and
|
||||||
|
risks in your portfolio. Adjust the rules below and set custom
|
||||||
|
thresholds to align with your personal investment strategy.
|
||||||
|
</p>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="align-items-center d-flex m-0">
|
||||||
|
<span i18n>Emergency Fund</span>
|
||||||
|
@if (user?.subscription?.type === 'Basic') {
|
||||||
|
<gf-premium-indicator class="ml-1" />
|
||||||
|
}
|
||||||
|
</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="emergencyFundRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="align-items-center d-flex m-0">
|
||||||
|
<span i18n>Currency Cluster Risks</span>
|
||||||
|
@if (user?.subscription?.type === 'Basic') {
|
||||||
|
<gf-premium-indicator class="ml-1" />
|
||||||
|
}
|
||||||
|
</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="currencyClusterRiskRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="align-items-center d-flex m-0">
|
||||||
|
<span i18n>Account Cluster Risks</span>
|
||||||
|
@if (user?.subscription?.type === 'Basic') {
|
||||||
|
<gf-premium-indicator class="ml-1" />
|
||||||
|
}
|
||||||
|
</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="accountClusterRiskRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="align-items-center d-flex m-0">
|
||||||
|
<span i18n>Economic Market Cluster Risks</span>
|
||||||
|
@if (user?.subscription?.type === 'Basic') {
|
||||||
|
<gf-premium-indicator class="ml-1" />
|
||||||
|
}
|
||||||
|
</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="economicMarketClusterRiskRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<h4 class="align-items-center d-flex m-0">
|
||||||
|
<span i18n>Fees</span>
|
||||||
|
@if (user?.subscription?.type === 'Basic') {
|
||||||
|
<gf-premium-indicator class="ml-1" />
|
||||||
|
}
|
||||||
|
</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="feeRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
@if (inactiveRules?.length > 0) {
|
||||||
|
<div>
|
||||||
|
<h4 class="m-0" i18n>Inactive</h4>
|
||||||
|
<gf-rules
|
||||||
|
[hasPermissionToUpdateUserSettings]="
|
||||||
|
!hasImpersonationId &&
|
||||||
|
hasPermissionToUpdateUserSettings &&
|
||||||
|
user?.settings?.isExperimentalFeatures
|
||||||
|
"
|
||||||
|
[isLoading]="isLoadingPortfolioReport"
|
||||||
|
[rules]="inactiveRules"
|
||||||
|
[settings]="user?.settings?.xRayRules"
|
||||||
|
(rulesUpdated)="onRulesUpdated($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
|
||||||
|
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 {
|
||||||
|
PortfolioReportRule,
|
||||||
|
PortfolioReport
|
||||||
|
} from '@ghostfolio/common/interfaces';
|
||||||
|
import { User } from '@ghostfolio/common/interfaces/user.interface';
|
||||||
|
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
|
||||||
|
|
||||||
|
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'gf-x-ray-page',
|
||||||
|
styleUrl: './x-ray-page.component.scss',
|
||||||
|
templateUrl: './x-ray-page.component.html'
|
||||||
|
})
|
||||||
|
export class XRayPageComponent {
|
||||||
|
public accountClusterRiskRules: PortfolioReportRule[];
|
||||||
|
public currencyClusterRiskRules: PortfolioReportRule[];
|
||||||
|
public economicMarketClusterRiskRules: PortfolioReportRule[];
|
||||||
|
public emergencyFundRules: PortfolioReportRule[];
|
||||||
|
public feeRules: PortfolioReportRule[];
|
||||||
|
public hasImpersonationId: boolean;
|
||||||
|
public hasPermissionToUpdateUserSettings: boolean;
|
||||||
|
public inactiveRules: PortfolioReportRule[];
|
||||||
|
public isLoadingPortfolioReport = false;
|
||||||
|
public user: User;
|
||||||
|
|
||||||
|
private unsubscribeSubject = new Subject<void>();
|
||||||
|
|
||||||
|
public constructor(
|
||||||
|
private changeDetectorRef: ChangeDetectorRef,
|
||||||
|
private dataService: DataService,
|
||||||
|
private impersonationStorageService: ImpersonationStorageService,
|
||||||
|
private userService: UserService
|
||||||
|
) {}
|
||||||
|
|
||||||
|
public ngOnInit() {
|
||||||
|
this.impersonationStorageService
|
||||||
|
.onChangeHasImpersonation()
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe((impersonationId) => {
|
||||||
|
this.hasImpersonationId = !!impersonationId;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.userService.stateChanged
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe((state) => {
|
||||||
|
if (state?.user) {
|
||||||
|
this.user = state.user;
|
||||||
|
|
||||||
|
this.hasPermissionToUpdateUserSettings =
|
||||||
|
this.user.subscription?.type === 'Basic'
|
||||||
|
? false
|
||||||
|
: hasPermission(
|
||||||
|
this.user.permissions,
|
||||||
|
permissions.updateUserSettings
|
||||||
|
);
|
||||||
|
|
||||||
|
this.changeDetectorRef.markForCheck();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.initializePortfolioReport();
|
||||||
|
}
|
||||||
|
|
||||||
|
public onRulesUpdated(event: UpdateUserSettingDto) {
|
||||||
|
this.dataService
|
||||||
|
.putUserSetting(event)
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe(() => {
|
||||||
|
this.userService
|
||||||
|
.get(true)
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe();
|
||||||
|
|
||||||
|
this.initializePortfolioReport();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public ngOnDestroy() {
|
||||||
|
this.unsubscribeSubject.next();
|
||||||
|
this.unsubscribeSubject.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
private initializePortfolioReport() {
|
||||||
|
this.isLoadingPortfolioReport = true;
|
||||||
|
|
||||||
|
this.dataService
|
||||||
|
.fetchPortfolioReport()
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe((portfolioReport) => {
|
||||||
|
this.inactiveRules = this.mergeInactiveRules(portfolioReport);
|
||||||
|
|
||||||
|
this.accountClusterRiskRules =
|
||||||
|
portfolioReport.rules['accountClusterRisk']?.filter(
|
||||||
|
({ isActive }) => {
|
||||||
|
return isActive;
|
||||||
|
}
|
||||||
|
) ?? null;
|
||||||
|
|
||||||
|
this.currencyClusterRiskRules =
|
||||||
|
portfolioReport.rules['currencyClusterRisk']?.filter(
|
||||||
|
({ isActive }) => {
|
||||||
|
return isActive;
|
||||||
|
}
|
||||||
|
) ?? null;
|
||||||
|
|
||||||
|
this.economicMarketClusterRiskRules =
|
||||||
|
portfolioReport.rules['economicMarketClusterRisk']?.filter(
|
||||||
|
({ isActive }) => {
|
||||||
|
return isActive;
|
||||||
|
}
|
||||||
|
) ?? null;
|
||||||
|
|
||||||
|
this.emergencyFundRules =
|
||||||
|
portfolioReport.rules['emergencyFund']?.filter(({ isActive }) => {
|
||||||
|
return isActive;
|
||||||
|
}) ?? null;
|
||||||
|
|
||||||
|
this.feeRules =
|
||||||
|
portfolioReport.rules['fees']?.filter(({ isActive }) => {
|
||||||
|
return isActive;
|
||||||
|
}) ?? null;
|
||||||
|
|
||||||
|
this.isLoadingPortfolioReport = false;
|
||||||
|
|
||||||
|
this.changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private mergeInactiveRules(report: PortfolioReport): PortfolioReportRule[] {
|
||||||
|
let inactiveRules: PortfolioReportRule[] = [];
|
||||||
|
|
||||||
|
for (const category in report.rules) {
|
||||||
|
const rulesArray = report.rules[category];
|
||||||
|
|
||||||
|
inactiveRules = inactiveRules.concat(
|
||||||
|
rulesArray.filter(({ isActive }) => {
|
||||||
|
return !isActive;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return inactiveRules;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
|
||||||
|
import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
|
||||||
|
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||||
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
||||||
|
|
||||||
|
import { XRayPageRoutingModule } from './x-ray-page-routing.module';
|
||||||
|
import { XRayPageComponent } from './x-ray-page.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [XRayPageComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
GfPremiumIndicatorComponent,
|
||||||
|
GfRulesModule,
|
||||||
|
NgxSkeletonLoaderModule,
|
||||||
|
XRayPageRoutingModule
|
||||||
|
],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||||
|
})
|
||||||
|
export class XRayPageModule {}
|
||||||
Loading…
Reference in new issue