diff --git a/CHANGELOG.md b/CHANGELOG.md index 077931c1e..f4ca9347e 100644 --- a/CHANGELOG.md +++ b/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 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 0c3092a60..dc194206c 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/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 || '';