Feature/improve fire section (#813)

* Improve FIRE section

* Update changelog

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
+
+### Changed
+
+- Improved the 4% rule in the _FIRE_ section
+
 ## 1.133.0 - 07.04.2022
 
 ### Changed

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -14,12 +14,11 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './fire-page.html'
 })
 export class FirePageComponent implements OnDestroy, OnInit {
-  public fireWealth: number;
-  public hasImpersonationId: boolean;
+  public fireWealth: Big;
   public isLoading = false;
   public user: User;
-  public withdrawalRatePerMonth: number;
-  public withdrawalRatePerYear: number;
+  public withdrawalRatePerMonth: Big;
+  public withdrawalRatePerYear: Big;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -39,13 +38,6 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public ngOnInit() {
     this.isLoading = true;
 
-    this.impersonationStorageService
-      .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((aId) => {
-        this.hasImpersonationId = !!aId;
-      });
-
     this.dataService
       .fetchPortfolioSummary()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -54,14 +46,9 @@ export class FirePageComponent implements OnDestroy, OnInit {
           return;
         }
 
-        this.fireWealth = new Big(currentValue).plus(cash).toNumber();
-        this.withdrawalRatePerYear = new Big(this.fireWealth)
-          .mul(4)
-          .div(100)
-          .toNumber();
-        this.withdrawalRatePerMonth = new Big(this.withdrawalRatePerYear)
-          .div(12)
-          .toNumber();
+        this.fireWealth = new Big(currentValue);
+        this.withdrawalRatePerYear = this.fireWealth.mul(4).div(100);
+        this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
 
         this.isLoading = false;
 

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -27,7 +27,8 @@
             ><gf-value
               class="d-inline-block"
               [currency]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerYear"
+              [locale]="user?.settings?.locale"
+              [value]="withdrawalRatePerYear?.toNumber()"
             ></gf-value>
             per year</span
           >
@@ -36,16 +37,18 @@
             ><gf-value
               class="d-inline-block"
               [currency]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerMonth"
+              [locale]="user?.settings?.locale"
+              [value]="withdrawalRatePerMonth?.toNumber()"
             ></gf-value>
             per month</span
-          >, based on your net worth of
+          >, based on your investment of
           <gf-value
             class="d-inline-block"
             [currency]="user?.settings?.baseCurrency"
-            [value]="fireWealth"
+            [locale]="user?.settings?.locale"
+            [value]="fireWealth?.toNumber()"
           ></gf-value>
-          (excluding emergency fund) and a withdrawal rate of 4%.
+          and a withdrawal rate of 4%.
         </div>
       </div>
     </div>