Feature/setup fire page with 4 percent rule (#773)

* Setup page for FIRE

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a _FIRE_ (Financial Independence, Retire Early) section including the 4% rule
 - Added more durations in the coupon system
 
 ### Fixed

apps/client/src/app/app-routing.module.ts

@@ -113,6 +113,13 @@ const routes: Routes = [
         (m) => m.AnalysisPageModule
       )
   },
+  {
+    path: 'portfolio/fire',
+    loadChildren: () =>
+      import('./pages/portfolio/fire/fire-page.module').then(
+        (m) => m.FirePageModule
+      )
+  },
   {
     path: 'portfolio/report',
     loadChildren: () =>

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { FirePageComponent } from './fire-page.component';
+
+const routes: Routes = [
+  { path: '', component: FirePageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FirePageRoutingModule {}

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

@@ -0,0 +1,86 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+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 { User } from '@ghostfolio/common/interfaces';
+import Big from 'big.js';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-fire-page',
+  styleUrls: ['./fire-page.scss'],
+  templateUrl: './fire-page.html'
+})
+export class FirePageComponent implements OnDestroy, OnInit {
+  public fireWealth: number;
+  public hasImpersonationId: boolean;
+  public isLoading = false;
+  public user: User;
+  public withdrawalRatePerMonth: number;
+  public withdrawalRatePerYear: number;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private impersonationStorageService: ImpersonationStorageService,
+    private userService: UserService
+  ) {}
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {
+    this.isLoading = true;
+
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((aId) => {
+        this.hasImpersonationId = !!aId;
+      });
+
+    this.dataService
+      .fetchPortfolioSummary()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ cash, currentValue }) => {
+        if (cash === null || currentValue === null) {
+          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.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,53 @@
+<div class="container">
+  <div class="row">
+    <div class="col-lg">
+      <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
+      <div class="mb-4">
+        <h4 i18n>4% Rule</h4>
+        <div *ngIf="isLoading">
+          <ngx-skeleton-loader
+            animation="pulse"
+            class="my-1"
+            [theme]="{
+              height: '1rem',
+              width: '100%'
+            }"
+          ></ngx-skeleton-loader>
+          <ngx-skeleton-loader
+            animation="pulse"
+            [theme]="{
+              height: '1rem',
+              width: '10rem'
+            }"
+          ></ngx-skeleton-loader>
+        </div>
+        <div *ngIf="!isLoading">
+          If you retire today, you would be able to withdraw
+          <span class="font-weight-bold"
+            ><gf-value
+              class="d-inline-block"
+              [currency]="user?.settings?.baseCurrency"
+              [value]="withdrawalRatePerYear"
+            ></gf-value>
+            per year</span
+          >
+          or
+          <span class="font-weight-bold"
+            ><gf-value
+              class="d-inline-block"
+              [currency]="user?.settings?.baseCurrency"
+              [value]="withdrawalRatePerMonth"
+            ></gf-value>
+            per month</span
+          >, based on your net worth of
+          <gf-value
+            class="d-inline-block"
+            [currency]="user?.settings?.baseCurrency"
+            [value]="fireWealth"
+          ></gf-value>
+          (excluding emergency fund) and a withdrawal rate of 4%.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui/value';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { FirePageRoutingModule } from './fire-page-routing.module';
+import { FirePageComponent } from './fire-page.component';
+
+@NgModule({
+  declarations: [FirePageComponent],
+  imports: [
+    CommonModule,
+    FirePageRoutingModule,
+    GfValueModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FirePageModule {}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -101,5 +101,32 @@
         </div>
       </mat-card>
     </div>
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
+        <h4 class="align-items-center d-flex">
+          <span i18n>FIRE</span>
+          <ion-icon
+            *ngIf="hasPermissionForSubscription"
+            class="ml-1 text-muted"
+            name="diamond-outline"
+          ></ion-icon>
+        </h4>
+        <div class="flex-grow-1">
+          Ghostfolio FIRE calculates metrics for the
+          <i>Financial Independence, Retire Early</i> lifestyle.
+        </div>
+        <div class="mt-2 text-right">
+          <a
+            color="primary"
+            mat-button
+            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
+            [routerLink]="['/portfolio', 'fire']"
+          >
+            <span i18n>Open FIRE</span>
+            <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
+          </a>
+        </div>
+      </mat-card>
+    </div>
   </div>
 </div>