From 9ff8cd547139e92532fc13d12d2489070f5a669e Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sun, 16 Oct 2022 10:01:31 +0200 Subject: [PATCH] Feature/improve portfolio evolution chart (#1362) * Switch inputs * Update changelog --- CHANGELOG.md | 1 + .../investment-chart.component.ts | 30 +++++++++---------- .../portfolio/analysis/analysis-page.html | 6 ++-- apps/client/src/locales/messages.de.xlf | 8 +++++ apps/client/src/locales/messages.es.xlf | 8 +++++ apps/client/src/locales/messages.it.xlf | 8 +++++ apps/client/src/locales/messages.nl.xlf | 8 +++++ apps/client/src/locales/messages.xlf | 7 +++++ 8 files changed, 58 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 747a7c24..90d9d443 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Persisted the language on url change +- Improved the portfolio evolution chart - Removed the data source type `RAKUTEN` ## 1.204.1 - 15.10.2022 diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts index cebc0f14..032db911 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/apps/client/src/app/components/investment-chart/investment-chart.component.ts @@ -46,11 +46,11 @@ import { addDays, format, isAfter, parseISO, subDays } from 'date-fns'; styleUrls: ['./investment-chart.component.scss'] }) export class InvestmentChartComponent implements OnChanges, OnDestroy { - @Input() benchmarkDataItems: LineChartItem[] = []; + @Input() benchmarkDataItems: InvestmentItem[] = []; @Input() currency: string; @Input() daysInMarket: number; @Input() groupBy: GroupBy; - @Input() investments: InvestmentItem[]; + @Input() historicalDataItems: LineChartItem[] = []; @Input() isInPercent = false; @Input() locale: string; @Input() range: DateRange = 'max'; @@ -81,7 +81,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { } public ngOnChanges() { - if (this.benchmarkDataItems && this.investments) { + if (this.benchmarkDataItems && this.historicalDataItems) { this.initialize(); } } @@ -94,7 +94,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { this.isLoading = true; // Create a clone - this.data = this.investments.map((a) => Object.assign({}, a)); + this.data = this.benchmarkDataItems.map((item) => Object.assign({}, item)); if (!this.groupBy && this.data?.length > 0) { if (this.range === 'max') { @@ -122,14 +122,14 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { } const data = { - labels: this.benchmarkDataItems.map(({ date }) => { + labels: this.historicalDataItems.map(({ date }) => { return parseDate(date); }), datasets: [ { - backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, - borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, - borderWidth: this.groupBy ? 0 : 2, + backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, + borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, + borderWidth: this.groupBy ? 0 : 1, data: this.data.map(({ date, investment }) => { return { x: parseDate(date), @@ -141,16 +141,16 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { borderColor: (context: unknown) => this.isInFuture( context, - `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)` + `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)` ), borderDash: (context: unknown) => this.isInFuture(context, [2, 2]) }, stepped: true }, { - borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, - borderWidth: 1, - data: this.benchmarkDataItems.map(({ date, value }) => { + borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, + borderWidth: 2, + data: this.historicalDataItems.map(({ date, value }) => { return { x: parseDate(date), y: this.isInPercent ? value * 100 : value @@ -192,13 +192,13 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { annotations: { savingsRate: this.savingsRate ? { - borderColor: `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.75)`, + borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`, borderWidth: 1, label: { - backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, + backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderRadius: 2, color: 'white', - content: 'Savings Rate', + content: $localize`Savings Rate`, display: true, font: { size: '10px', weight: 'normal' }, padding: { diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html index f4624414..8161c7a3 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html +++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html @@ -119,10 +119,10 @@
112 + + Savings Rate + Sparrate + + apps/client/src/app/components/investment-chart/investment-chart.component.ts + 201 + + diff --git a/apps/client/src/locales/messages.es.xlf b/apps/client/src/locales/messages.es.xlf index 49363110..709a11a1 100644 --- a/apps/client/src/locales/messages.es.xlf +++ b/apps/client/src/locales/messages.es.xlf @@ -2730,6 +2730,14 @@ 112 + + Savings Rate + Tasa de ahorro + + apps/client/src/app/components/investment-chart/investment-chart.component.ts + 201 + + diff --git a/apps/client/src/locales/messages.it.xlf b/apps/client/src/locales/messages.it.xlf index 3170073a..bb7d895a 100644 --- a/apps/client/src/locales/messages.it.xlf +++ b/apps/client/src/locales/messages.it.xlf @@ -2730,6 +2730,14 @@ 112 + + Savings Rate + Tasso di risparmio + + apps/client/src/app/components/investment-chart/investment-chart.component.ts + 201 + + diff --git a/apps/client/src/locales/messages.nl.xlf b/apps/client/src/locales/messages.nl.xlf index bb45a5fd..55e89278 100644 --- a/apps/client/src/locales/messages.nl.xlf +++ b/apps/client/src/locales/messages.nl.xlf @@ -2729,6 +2729,14 @@ 112 + + Savings Rate + Spaarquote + + apps/client/src/app/components/investment-chart/investment-chart.component.ts + 201 + + diff --git a/apps/client/src/locales/messages.xlf b/apps/client/src/locales/messages.xlf index a9003dc1..2424ad00 100644 --- a/apps/client/src/locales/messages.xlf +++ b/apps/client/src/locales/messages.xlf @@ -2438,6 +2438,13 @@ 112 + + Savings Rate + + apps/client/src/app/components/investment-chart/investment-chart.component.ts + 201 + +