Merge pull request #161 from briandadams85/feature/lean-fi-impact-toggle

feat(impact): add toggle to switch between FI and Lean FI budget views

Author: JackMorrissey

src/app/forecasting/output/impact/impact.component.html

@@ -3,20 +3,27 @@ <h3 class="fw-bolder">Expense Impact on FI Date</h3>
     spending to savings contributions, and you can reduce your FI Date by the amount under <strong>Impact on FI
         Date</strong>.
 </p>
+<div class="text-center mb-3">
+    <div class="btn-group" role="group">
+        <button type="button" class="btn btn-sm" [ngClass]="{'btn-primary': !showLeanFi, 'btn-outline-primary': showLeanFi}" (click)="toggleLeanFi(false)">FI Budget</button>
+        <button type="button" class="btn btn-sm" [ngClass]="{'btn-primary': showLeanFi, 'btn-outline-primary': !showLeanFi}" (click)="toggleLeanFi(true)">Lean FI Budget</button>
+    </div>
+</div>
 <div class="table-responsive">
     <table class="table table-striped">
         <thead>
             <tr>
                 <th>Category</th>
-                <th>FI Budget</th>
-                <th>Impact on FI Date</th>
+                <th>{{ showLeanFi ? 'Lean FI Budget' : 'FI Budget' }}</th>
+                <th>Impact on {{ showLeanFi ? 'Lean FI' : 'FI' }} Date</th>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let c of spendingCategoriesWithImpact">
                 <td>{{ c.category.name }}</td>
-                <td>{{ c.category.fiBudget | currency:calculateInput.currencyIsoCode }}</td>
-                <td>
+                <td *ngIf="!showLeanFi">{{ c.category.fiBudget | currency:calculateInput.currencyIsoCode }}</td>
+                <td *ngIf="showLeanFi">{{ c.category.leanFiBudget | currency:calculateInput.currencyIsoCode }}</td>
+                <td *ngIf="!showLeanFi">
                     <span [ngClass]="{'d-none': c.isFi === true}">
                         <fa-icon [icon]="['fas', 'plus-circle']"></fa-icon>
                     </span>
@@ -25,7 +32,19 @@ <h3 class="fw-bolder">Expense Impact on FI Date</h3>
                     </span>
                     {{ c.impactDate }}
                 </td>
+                <td *ngIf="showLeanFi">
+                    <span *ngIf="c.leanImpactDate">
+                        <span [ngClass]="{'d-none': c.isLeanFi === true}">
+                            <fa-icon [icon]="['fas', 'plus-circle']"></fa-icon>
+                        </span>
+                        <span [ngClass]="{'d-none': c.isLeanFi !== true}">
+                            <fa-icon [icon]="['fas', 'check-circle']"></fa-icon>
+                        </span>
+                        {{ c.leanImpactDate }}
+                    </span>
+                    <span *ngIf="!c.leanImpactDate">-</span>
+                </td>
             </tr>
         </tbody>
     </table>
-</div>
+</div>

src/app/forecasting/output/impact/impact.component.ts

@@ -14,6 +14,18 @@ export class ImpactComponent implements OnInit, OnChanges {
     @Input() forecast: Forecast;
 
     spendingCategoriesWithImpact;
+    showLeanFi = false;
+
+    toggleLeanFi(showLean: boolean) {
+        this.showLeanFi = showLean;
+        if (this.spendingCategoriesWithImpact) {
+            this.spendingCategoriesWithImpact.sort((a, b) => {
+                const aValue = showLean ? a.category.leanFiBudget : a.category.fiBudget;
+                const bValue = showLean ? b.category.leanFiBudget : b.category.fiBudget;
+                return bValue - aValue;
+            });
+        }
+    }
 
     ngOnInit() {
         this.calculateData();
@@ -29,6 +41,7 @@ export class ImpactComponent implements OnInit, OnChanges {
         }
 
         const currentFiForecast = this.getFiForecast(this.forecast, this.calculateInput.fiNumber);
+        const currentLeanFiForecast = this.getFiForecast(this.forecast, this.calculateInput.leanFiNumber);
 
         if (!currentFiForecast) {
             return;
@@ -38,21 +51,25 @@ export class ImpactComponent implements OnInit, OnChanges {
             return group.categories;
         }));
         const categoriesWithSpending = categories.filter((category) => {
-            return category.fiBudget > 0;
+            return category.fiBudget > 0 || category.leanFiBudget > 0;
         }).sort((a, b) => {
             return b.fiBudget - a.fiBudget;
         });
 
         this.spendingCategoriesWithImpact = categoriesWithSpending.map((category) => {
             const isFi = currentFiForecast.date < new Date();
+            const isLeanFi = currentLeanFiForecast && currentLeanFiForecast.date < new Date();
 
             let impactDate = 'Achieved FI!';
-            if (isFi) {
+            let leanImpactDate = null;
 
+            if (isFi) {
                 return {
                     category,
                     impactDate,
-                    isFi
+                    isFi,
+                    leanImpactDate: isLeanFi ? 'Achieved Lean FI!' : null,
+                    isLeanFi
                 };
             }
 
@@ -62,10 +79,26 @@ export class ImpactComponent implements OnInit, OnChanges {
 
             impactDate = this.getImpactDateText(currentFiForecast.date, modifiedFiForecast.date);
 
+            // Calculate Lean FI impact
+            if (category.leanFiBudget > 0 && currentLeanFiForecast) {
+                if (isLeanFi) {
+                    leanImpactDate = 'Achieved Lean FI!';
+                } else {
+                    const modifiedLeanCalcInput = this.getModifiedCalculateInputForLeanFi(category.leanFiBudget);
+                    const modifiedLeanForecast = new Forecast(modifiedLeanCalcInput);
+                    const modifiedLeanFiForecast = this.getFiForecast(modifiedLeanForecast, modifiedLeanCalcInput.leanFiNumber);
+                    if (modifiedLeanFiForecast) {
+                        leanImpactDate = this.getImpactDateText(currentLeanFiForecast.date, modifiedLeanFiForecast.date);
+                    }
+                }
+            }
+
             return {
                 category,
                 impactDate,
-                isFi
+                isFi,
+                leanImpactDate,
+                isLeanFi
             };
         });
     }
@@ -80,6 +113,17 @@ export class ImpactComponent implements OnInit, OnChanges {
         return calcInput;
     }
 
+    private getModifiedCalculateInputForLeanFi(leanFiSpendingReductionPerMonth: number): CalculateInput {
+        const calcInput = new CalculateInput();
+        calcInput.annualExpenses = this.calculateInput.annualExpenses;
+        calcInput.leanAnnualExpenses = this.calculateInput.leanAnnualExpenses - leanFiSpendingReductionPerMonth * 12;
+        calcInput.annualSafeWithdrawalRate = this.calculateInput.annualSafeWithdrawalRate;
+        calcInput.expectedAnnualGrowthRate = this.calculateInput.expectedAnnualGrowthRate;
+        calcInput.netWorth = this.calculateInput.netWorth;
+        calcInput.monthlyContribution = this.calculateInput.monthlyContribution + leanFiSpendingReductionPerMonth;
+        return calcInput;
+    }
+
     private getFiForecast(forecast: Forecast, fiNumber: number) {
         return forecast.monthlyForecasts.find(f => f.netWorth >= fiNumber);
     }