mirror of https://github.com/ghostfolio/ghostfolio
mohan
10 months ago
7 changed files with 319 additions and 131 deletions
@ -0,0 +1,129 @@ |
|||
<div class="container mt-5"> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<h2 class="h3 mb-3 text-center">X-ray</h2> |
|||
<p class="mb-4"> |
|||
<span i18n |
|||
>Ghostfolio X-ray uses static analysis to identify potential issues |
|||
and risks in your portfolio.</span |
|||
> |
|||
<span class="d-none" |
|||
>It will be highly configurable in the future: activate / deactivate |
|||
rules and customize the thresholds to match your personal investment |
|||
style.</span |
|||
> |
|||
</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-xray-page', |
|||
templateUrl: './x-ray.component.html', |
|||
styleUrl: './x-ray.component.scss' |
|||
}) |
|||
export class XRayComponent { |
|||
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,26 @@ |
|||
import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module'; |
|||
import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator'; |
|||
import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; |
|||
import { GfValueComponent } from '@ghostfolio/ui/value'; |
|||
|
|||
import { CommonModule } from '@angular/common'; |
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
|||
import { RouterModule } from '@angular/router'; |
|||
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|||
|
|||
import { XRayComponent } from './x-ray.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [XRayComponent], |
|||
imports: [ |
|||
CommonModule, |
|||
GfFireCalculatorComponent, |
|||
GfPremiumIndicatorComponent, |
|||
GfRulesModule, |
|||
GfValueComponent, |
|||
NgxSkeletonLoaderModule, |
|||
RouterModule.forChild([{ path: '', component: XRayComponent }]) |
|||
], |
|||
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
|||
}) |
|||
export class XRayModule {} |
|||
Loading…
Reference in new issue