From 0d8362ca8fac53c21f404f3b4c90b8aa8c816862 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 16 Apr 2022 21:01:55 +0200
Subject: [PATCH] Feature/separate deposit and savings in fire calculator
 (#837)

* Separate deposit and savings

* Update changelog
---
 CHANGELOG.md                                  |  4 +++
 .../fire-calculator.component.ts              | 30 ++++++++++++++-----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83b8db7a0..14f863c44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added support to export a single future activity (draft) as an `.ics` file
 - Added the _Boringly Getting Rich_ guide to the resources section
 
+### Changed
+
+- Separated the deposit and savings in the chart of the the _FIRE_ calculator
+
 ## 1.137.0 - 15.04.2022
 
 ### Added
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index b8c2c6141..0c3092a60 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
@@ -11,7 +11,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
-import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
+import { primaryColorRgb } from '@ghostfolio/common/config';
 import { transformTickToAbbreviation } from '@ghostfolio/common/helper';
 import {
   BarController,
@@ -21,6 +21,7 @@ import {
   LinearScale,
   Tooltip
 } from 'chart.js';
+import * as Color from 'color';
 import { isNumber } from 'lodash';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -211,16 +212,30 @@ export class FireCalculatorComponent
       labels.push(year);
     }
 
+    const datasetDeposit = {
+      backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+      data: [],
+      label: 'Deposit'
+    };
+
     const datasetInterest = {
-      backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+      backgroundColor: Color(
+        `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
+      )
+        .lighten(0.5)
+        .hex(),
       data: [],
       label: 'Interest'
     };
 
-    const datasetPrincipal = {
-      backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+    const datasetSavings = {
+      backgroundColor: Color(
+        `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
+      )
+        .lighten(0.25)
+        .hex(),
       data: [],
-      label: 'Principal'
+      label: 'Savings'
     };
 
     for (let period = 1; period <= t; period++) {
@@ -232,8 +247,9 @@ export class FireCalculatorComponent
           r
         });
 
-      datasetPrincipal.data.push(principal.toNumber());
+      datasetDeposit.data.push(this.fireWealth);
       datasetInterest.data.push(interest.toNumber());
+      datasetSavings.data.push(principal.minus(this.fireWealth).toNumber());
 
       if (period === t) {
         this.projectedTotalAmount = totalAmount.toNumber();
@@ -242,7 +258,7 @@ export class FireCalculatorComponent
 
     return {
       labels,
-      datasets: [datasetPrincipal, datasetInterest]
+      datasets: [datasetDeposit, datasetSavings, datasetInterest]
     };
   }
 }