mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
4.9 KiB
137 lines
4.9 KiB
<div class="container">
|
|
<div class="row mb-5">
|
|
<div class="col-lg">
|
|
<h2 class="d-none d-sm-block h3 mb-3 text-center" i18n>FIRE</h2>
|
|
<div>
|
|
<h4 class="align-items-center d-flex mb-3">
|
|
<span i18n>Calculator</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</h4>
|
|
<gf-fire-calculator
|
|
[annualInterestRate]="user?.settings?.annualInterestRate"
|
|
[colorScheme]="user?.settings?.colorScheme"
|
|
[currency]="user?.settings?.baseCurrency"
|
|
[deviceType]="deviceType"
|
|
[fireWealth]="fireWealth?.today.valueInBaseCurrency"
|
|
[hasPermissionToUpdateUserSettings]="
|
|
!hasImpersonationId && hasPermissionToUpdateUserSettings
|
|
"
|
|
[locale]="user?.settings?.locale"
|
|
[ngStyle]="{
|
|
opacity: user?.subscription?.type === 'Basic' ? '0.67' : 'initial',
|
|
'pointer-events':
|
|
user?.subscription?.type === 'Basic' ? 'none' : 'initial'
|
|
}"
|
|
[projectedTotalAmount]="user?.settings?.projectedTotalAmount"
|
|
[retirementDate]="user?.settings?.retirementDate"
|
|
[savingsRate]="user?.settings?.savingsRate"
|
|
(annualInterestRateChanged)="onAnnualInterestRateChange($event)"
|
|
(projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
|
|
(retirementDateChanged)="onRetirementDateChange($event)"
|
|
(savingsRateChanged)="onSavingsRateChange($event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="align-items-center d-flex">
|
|
<span i18n>Sustainable retirement income</span>
|
|
@if (user?.subscription?.type === 'Basic') {
|
|
<gf-premium-indicator class="ml-1" />
|
|
}
|
|
</h4>
|
|
@if (isLoading) {
|
|
<div>
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
class="my-1"
|
|
[theme]="{
|
|
height: '1rem',
|
|
width: '100%'
|
|
}"
|
|
/>
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '1rem',
|
|
width: '10rem'
|
|
}"
|
|
/>
|
|
</div>
|
|
} @else {
|
|
<div [ngClass]="{ 'text-muted': user?.subscription?.type === 'Basic' }">
|
|
<ng-container i18n
|
|
>If you retire today, you would be able to withdraw</ng-container
|
|
>
|
|
<ng-container> </ng-container>
|
|
<span class="font-weight-bold"
|
|
><gf-value
|
|
class="d-inline-block"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="withdrawalRatePerYear?.toNumber()"
|
|
/>
|
|
<ng-container> </ng-container>
|
|
<ng-container i18n>per year</ng-container></span
|
|
>
|
|
<ng-container> </ng-container>
|
|
<ng-container i18n>or</ng-container>
|
|
<ng-container> </ng-container>
|
|
<span class="font-weight-bold"
|
|
><gf-value
|
|
class="d-inline-block"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="withdrawalRatePerMonth?.toNumber()"
|
|
/>
|
|
<ng-container> </ng-container>
|
|
<ng-container i18n>per month</ng-container></span
|
|
><ng-container i18n>,</ng-container>
|
|
<ng-container> </ng-container>
|
|
<ng-container i18n>based on your total assets of</ng-container>
|
|
<ng-container> </ng-container>
|
|
<span class="font-weight-bold"
|
|
><gf-value
|
|
class="d-inline-block"
|
|
[isCurrency]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[unit]="user?.settings?.baseCurrency"
|
|
[value]="fireWealth?.today.valueInBaseCurrency"
|
|
/>
|
|
</span>
|
|
<ng-container> </ng-container>
|
|
<ng-container i18n>and a safe withdrawal rate (SWR) of</ng-container>
|
|
@if (
|
|
!hasImpersonationId &&
|
|
hasPermissionToUpdateUserSettings &&
|
|
user?.settings?.isExperimentalFeatures
|
|
) {
|
|
<select
|
|
class="border-0 cursor-pointer d-inline-block font-weight-bold safe-withdrawal-rate-select"
|
|
[formControl]="safeWithdrawalRateControl"
|
|
>
|
|
@for (rate of safeWithdrawalRateOptions; track rate) {
|
|
<option [value]="rate">
|
|
{{ rate | percent: '1.1-1' }}
|
|
</option>
|
|
}</select
|
|
>.
|
|
} @else {
|
|
<ng-container> </ng-container>
|
|
<span class="font-weight-bold"
|
|
><gf-value
|
|
class="d-inline-block"
|
|
[isPercent]="true"
|
|
[locale]="user?.settings?.locale"
|
|
[precision]="1"
|
|
[value]="user?.settings?.safeWithdrawalRate" /></span
|
|
>.
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|