@ -2,7 +2,11 @@ import { GfPortfolioPerformanceComponent } from '@ghostfolio/client/components/p
import { LayoutService } from '@ghostfolio/client/core/layout.service' ; import { LayoutService } from '@ghostfolio/client/core/layout.service' ;
import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service' ; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service' ;
import { UserService } from '@ghostfolio/client/services/user/user.service' ; import { UserService } from '@ghostfolio/client/services/user/user.service' ;
import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config' ; import {
DEFAULT_CURRENCY ,
DEFAULT_DATE_RANGE ,
NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
} from '@ghostfolio/common/config' ;
import { import {
AssetProfileIdentifier , AssetProfileIdentifier ,
LineChartItem , LineChartItem ,
@ -15,11 +19,13 @@ import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
import { DataService } from '@ghostfolio/ui/services' ; import { DataService } from '@ghostfolio/ui/services' ;
import { import {
ChangeDetectorRef , ChangeDetectionStrategy ,
Component , Component ,
CUSTOM_ELEMENTS_SCHEMA , computed ,
DestroyRef , DestroyRef ,
OnInit inject ,
OnInit ,
signal
} from '@angular/core' ; } from '@angular/core' ;
import { takeUntilDestroyed } from '@angular/core/rxjs-interop' ; import { takeUntilDestroyed } from '@angular/core/rxjs-interop' ;
import { MatButtonModule } from '@angular/material/button' ; import { MatButtonModule } from '@angular/material/button' ;
@ -27,79 +33,80 @@ import { RouterModule } from '@angular/router';
import { DeviceDetectorService } from 'ngx-device-detector' ; import { DeviceDetectorService } from 'ngx-device-detector' ;
@Component ( { @Component ( {
changeDetection : ChangeDetectionStrategy.OnPush ,
imports : [ imports : [
GfLineChartComponent , GfLineChartComponent ,
GfPortfolioPerformanceComponent , GfPortfolioPerformanceComponent ,
MatButtonModule , MatButtonModule ,
RouterModule RouterModule
] , ] ,
schemas : [ CUSTOM_ELEMENTS_SCHEMA ] ,
selector : 'gf-home-overview' , selector : 'gf-home-overview' ,
styleUrls : [ './home-overview.scss' ] , styleUrls : [ './home-overview.scss' ] ,
templateUrl : './home-overview.html' templateUrl : './home-overview.html'
} ) } )
export class GfHomeOverviewComponent implements OnInit { export class GfHomeOverviewComponent implements OnInit {
public deviceType : string ; protected readonly errors = signal < AssetProfileIdentifier [ ] > ( [ ] ) ;
public errors : AssetProfileIdentifier [ ] ; protected readonly hasImpersonationId = signal ( false ) ;
public hasError : boolean ; protected readonly historicalDataItems = signal < LineChartItem [ ] | null > ( null ) ;
public hasImpersonationId : boolean ; protected readonly isLoadingPerformance = signal ( true ) ;
public hasPermissionToCreateActivity : boolean ; protected readonly performance = signal < PortfolioPerformance | null > ( null ) ;
public historicalDataItems : LineChartItem [ ] ; protected readonly performanceLabel = $localize ` Performance ` ;
public isAllTimeHigh : boolean ; protected readonly precision = signal ( 2 ) ;
public isAllTimeLow : boolean ; protected readonly user = signal < User | null > ( null ) ;
public isLoadingPerformance = true ;
public performance : PortfolioPerformance ; protected readonly routerLinkAccounts = internalRoutes . accounts . routerLink ;
public performanceLabel = $localize ` Performance ` ; protected readonly routerLinkPortfolio = internalRoutes . portfolio . routerLink ;
public precision = 2 ; protected readonly routerLinkPortfolioActivities =
public routerLinkAccounts = internalRoutes . accounts . routerLink ;
public routerLinkPortfolio = internalRoutes . portfolio . routerLink ;
public routerLinkPortfolioActivities =
internalRoutes . portfolio . subRoutes . activities . routerLink ; internalRoutes . portfolio . subRoutes . activities . routerLink ;
public showDetails = false ;
public unit : string ; protected readonly deviceType = computed (
public user : User ; ( ) = > this . deviceDetectorService . deviceInfo ( ) . deviceType
) ;
public constructor (
private changeDetectorRef : ChangeDetectorRef , protected readonly hasPermissionToCreateActivity = computed ( ( ) = > {
private dataService : DataService , return hasPermission ( this . user ( ) ? . permissions , permissions . createActivity ) ;
private destroyRef : DestroyRef , } ) ;
private deviceDetectorService : DeviceDetectorService ,
private impersonationStorageService : ImpersonationStorageService , protected readonly showDetails = computed ( ( ) = > {
private layoutService : LayoutService , const user = this . user ( ) ;
private userService : UserService
) { return user
? ! user . settings . isRestrictedView && user . settings . viewMode !== 'ZEN'
: false ;
} ) ;
protected readonly unit = computed ( ( ) = > {
return this . showDetails ( )
? ( this . user ( ) ? . settings ? . baseCurrency ? ? DEFAULT_CURRENCY )
: '%' ;
} ) ;
private readonly dataService = inject ( DataService ) ;
private readonly destroyRef = inject ( DestroyRef ) ;
private readonly deviceDetectorService = inject ( DeviceDetectorService ) ;
private readonly impersonationStorageService = inject (
ImpersonationStorageService
) ;
private readonly layoutService = inject ( LayoutService ) ;
private readonly userService = inject ( UserService ) ;
public constructor ( ) {
this . userService . stateChanged this . userService . stateChanged
. pipe ( takeUntilDestroyed ( this . destroyRef ) ) . pipe ( takeUntilDestroyed ( this . destroyRef ) )
. subscribe ( ( state ) = > { . subscribe ( ( state ) = > {
if ( state ? . user ) { if ( state ? . user ) {
this . user = state . user ; this . user . set ( state . user ) ;
this . hasPermissionToCreateActivity = hasPermission (
this . user . permissions ,
permissions . createActivity
) ;
this . update ( ) ; this . update ( ) ;
} }
} ) ; } ) ;
} }
public ngOnInit() { public ngOnInit() {
this . deviceType = this . deviceDetectorService . getDeviceInfo ( ) . deviceType ;
this . showDetails =
! this . user . settings . isRestrictedView &&
this . user . settings . viewMode !== 'ZEN' ;
this . unit = this . showDetails ? this . user . settings . baseCurrency : '%' ;
this . impersonationStorageService this . impersonationStorageService
. onChangeHasImpersonation ( ) . onChangeHasImpersonation ( )
. pipe ( takeUntilDestroyed ( this . destroyRef ) ) . pipe ( takeUntilDestroyed ( this . destroyRef ) )
. subscribe ( ( impersonationId ) = > { . subscribe ( ( impersonationId ) = > {
this . hasImpersonationId = ! ! impersonationId ; this . hasImpersonationId . set ( ! ! impersonationId ) ;
this . changeDetectorRef . markForCheck ( ) ;
} ) ; } ) ;
this . layoutService . shouldReloadContent $ this . layoutService . shouldReloadContent $
@ -110,40 +117,40 @@ export class GfHomeOverviewComponent implements OnInit {
} }
private update() { private update() {
this . historicalDataItems = null ; this . historicalDataItems . set ( null ) ;
this . isLoadingPerformance = true ; this . isLoadingPerformance . set ( true ) ;
this . dataService this . dataService
. fetchPortfolioPerformance ( { . fetchPortfolioPerformance ( {
range : this.user?.settings?.dateRange range : this.user ( ) ? . settings ? . dateRange ? ? DEFAULT_DATE_RANGE
} ) } )
. pipe ( takeUntilDestroyed ( this . destroyRef ) ) . pipe ( takeUntilDestroyed ( this . destroyRef ) )
. subscribe ( ( { chart , errors , performance } ) = > { . subscribe ( ( { chart , errors , performance } ) = > {
this . errors = errors ; this . errors . set ( errors ? ? [ ] ) ;
this . performance = performance ; this . performance . set ( performance ) ;
this . historicalDataItems = chart . map ( this . historicalDataItems . set (
( { date , netPerformanceInPercentageWithCurrencyEffect } ) = > { chart ? . map (
return { ( { date , netPerformanceInPercentageWithCurrencyEffect } ) = > {
date , return {
value : netPerformanceInPercentageWithCurrencyEffect * 100 date ,
} ; value : ( netPerformanceInPercentageWithCurrencyEffect ? ? 0 ) * 100
} } ;
}
) ? ? null
) ; ) ;
this . precision . set ( 2 ) ;
if ( if (
this . deviceType === 'mobile' && this . deviceType ( ) === 'mobile' &&
this . performance . currentValueInBaseCurrency >= performance . currentValueInBaseCurrency >=
NUMERICAL_PRECISION_THRESHOLD_6_FIGURES NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
) { ) {
this . precision = 0 ; this . precision . set ( 0 ) ;
} }
this . isLoadingPerformance = false ; this . isLoadingPerformance . set ( false ) ;
this . changeDetectorRef . markForCheck ( ) ;
} ) ; } ) ;
this . changeDetectorRef . markForCheck ( ) ;
} }
} }
Kenrick Tandrian
2 days ago
GitHub