Bugfix/fix issue in fire calculator after changing investment horizon (#839)

* Properly update chart datasets and improve tooltip

* Update changelog

CHANGELOG.md

@@ -5,6 +5,16 @@ 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
+
+### Added
+
+- Added the total amount to the tooltip in the chart of the _FIRE_ calculator
+
+### Fixed
+
+- Fixed an issue with changing the investment horizon in the chart of the _FIRE_ calculator
+
 ## 1.138.0 - 16.04.2022
 
 ### Added
@@ -14,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Separated the deposit and savings in the chart of the the _FIRE_ calculator
+- Separated the deposit and savings in the chart of the _FIRE_ calculator
 
 ## 1.137.0 - 15.04.2022
 

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

@@ -128,8 +128,10 @@ export class FireCalculatorComponent
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data.labels = chartData.labels;
-        this.chart.data.datasets[0].data = chartData.datasets[0].data;
-        this.chart.data.datasets[1].data = chartData.datasets[1].data;
+
+        for (let index = 0; index < this.chart.data.datasets.length; index++) {
+          this.chart.data.datasets[index].data = chartData.datasets[index].data;
+        }
 
         this.chart.update();
       } else {
@@ -138,7 +140,24 @@ export class FireCalculatorComponent
           options: {
             plugins: {
               tooltip: {
+                itemSort: (a, b) => {
+                  // Reverse order
+                  return b.datasetIndex - a.datasetIndex;
+                },
+                mode: 'index',
                 callbacks: {
+                  footer: (items) => {
+                    const totalAmount = items.reduce(
+                      (a, b) => a + b.parsed.y,
+                      0
+                    );
+
+                    return `Total Amount: ${new Intl.NumberFormat(this.locale, {
+                      currency: this.currency,
+                      currencyDisplay: 'code',
+                      style: 'currency'
+                    }).format(totalAmount)}`;
+                  },
                   label: (context) => {
                     let label = context.dataset.label || '';