feat(fire): scale fire chart according to retirement date

- If target net worth is filled in, display retirement date and update the scale of the chart
- If target net worth is not filled in, display total amount and use investment horizon
- Add translations

apps/client/src/locales/messages.de.xlf

@@ -3505,6 +3505,22 @@
           <context context-type="linenumber">199,201</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="46d3a0f17b741c93f9e61aa7157820da41506f53" datatype="html">
+        <source>Target Net Worth</source>
+        <target state="new">Angestrebtes Nettovermögen</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">38</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7383cd391b1967e03f0636c231d20f036d5c37ee" datatype="html">
+        <source>Retirement Date</source>
+        <target state="new">Pensionierungsdatum</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">65</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

apps/client/src/locales/messages.nl.xlf

@@ -3505,6 +3505,22 @@
           <context context-type="linenumber">199,201</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="46d3a0f17b741c93f9e61aa7157820da41506f53" datatype="html">
+        <source>Target Net Worth</source>
+        <target state="new">Beoogd Netto Vermogen</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">38</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7383cd391b1967e03f0636c231d20f036d5c37ee" datatype="html">
+        <source>Retirement Date</source>
+        <target state="new">Pensioen Datum</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">65</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

apps/client/src/locales/messages.xlf

@@ -3146,6 +3146,20 @@
           <context context-type="linenumber">199,201</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="46d3a0f17b741c93f9e61aa7157820da41506f53" datatype="html">
+        <source>Target Net Worth</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">38</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7383cd391b1967e03f0636c231d20f036d5c37ee" datatype="html">
+        <source>Retirement Date</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">libs/ui/src/lib/fire-calculator/fire-calculator.component.html</context>
+          <context context-type="linenumber">65</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -17,12 +17,6 @@
           <span class="ml-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
-        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Investment Horizon</mat-label>
-          <input formControlName="time" matInput type="number" />
-          <span class="ml-2" i18n matTextSuffix>years</span>
-        </mat-form-field>
-
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Annual Interest Rate</mat-label>
           <input
@@ -33,6 +27,13 @@
           />
           <div class="ml-2" matTextSuffix>%</div>
         </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Investment Horizon</mat-label>
+          <input formControlName="time" matInput type="number" />
+          <span class="ml-2" i18n matTextSuffix>years</span>
+        </mat-form-field>
+
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Target Net Worth</mat-label>
           <input
@@ -45,6 +46,7 @@
         </mat-form-field>
 
         <gf-value
+          *ngIf="!targetNetWorth"
           i18n
           size="large"
           [currency]="currency"

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -285,6 +285,7 @@ export class FireCalculatorComponent
   private getChartData() {
     const currentYear = new Date().getFullYear();
     const labels = [];
+    let t: number;
 
     // Principal investment amount
     const P: number =
@@ -296,11 +297,29 @@ export class FireCalculatorComponent
     // Annual interest rate
     const r: number = this.calculatorForm.get('annualInterestRate').value / 100;
 
-    // Time
-    const t = this.calculatorForm.get('time').value;
-
+    // Target net worth
     const targetNetWorth = this.calculatorForm.get('retirementNetWorth').value;
 
+    // Calculate retirement date
+    const periodsToRetire = this.fireCalculatorService.calculatePeriodsToRetire(
+      {
+        P,
+        totalAmount: targetNetWorth,
+        PMT,
+        r
+      }
+    );
+    const yearsToRetire = Math.floor(periodsToRetire / 12);
+    const monthsToRetire = periodsToRetire % 12;
+
+    // Time
+    if (targetNetWorth) {
+      // +1 to take into account the current year
+      t = yearsToRetire + 1;
+    } else {
+      t = this.calculatorForm.get('time').value;
+    }
+
     for (let year = currentYear; year < currentYear + t; year++) {
       labels.push(year);
     }
@@ -353,22 +372,9 @@ export class FireCalculatorComponent
       }
     }
 
-    // Calculate retirement date
-    const periodsToRetire = this.fireCalculatorService.calculatePeriodsToRetire(
-      {
-        P,
-        totalAmount: targetNetWorth,
-        PMT,
-        r
-      }
-    );
-
-    const years = Math.floor(periodsToRetire / 12);
-    const months = periodsToRetire % 12;
-
     const retirementDate = add(new Date(), {
-      years,
-      months
+      years: yearsToRetire,
+      months: monthsToRetire
     });
     this.retirementDate = format(retirementDate, 'MMMM yyyy');