From 376ce884929d1a218045159f8a878af3c0b50d88 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Thu, 8 Sep 2022 21:05:19 +0200 Subject: [PATCH] Bugfix/fix benchmark chart (#1236) * Fix benchmark chart * Distinguish between currency and unit in tooltip * Update changelog --- CHANGELOG.md | 10 ++++++++++ .../benchmark-comparator.component.ts | 16 +++++++--------- .../components/home-overview/home-overview.html | 3 ++- .../investment-chart.component.ts | 7 +++++-- .../position-detail-dialog.html | 2 +- libs/common/src/lib/chart-helper.ts | 8 ++++++-- .../src/lib/line-chart/line-chart.component.ts | 7 ++++++- .../portfolio-proportion-chart.component.ts | 5 ++++- 8 files changed, 41 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f39667d6..6edd85132 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 + +### Changed + +- Distinguished between currency and unit in the chart tooltip + +### Fixed + +- Fixed the benchmark chart in the benchmark comparator (experimental) + ## 1.188.0 - 06.09.2022 ### Added diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index aca6229fc..14bbf30dc 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts @@ -19,7 +19,8 @@ import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config'; import { getBackgroundColor, getDateFormatString, - getTextColor + getTextColor, + parseDate } from '@ghostfolio/common/helper'; import { LineChartItem, @@ -56,7 +57,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { @ViewChild('chartCanvas') chartCanvas; public benchmark: UniqueAsset; - public chart: Chart; + public chart: Chart; public isLoading = true; public constructor() { @@ -92,16 +93,13 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { this.isLoading = true; const data = { - labels: this.performanceDataItems.map(({ date }) => { - return date; - }), datasets: [ { backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderWidth: 2, - data: this.performanceDataItems.map(({ value }) => { - return value; + data: this.performanceDataItems.map(({ date, value }) => { + return { x: parseDate(date), y: value }; }), label: $localize`Portfolio` }, @@ -109,8 +107,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, borderWidth: 2, - data: this.benchmarkDataItems.map(({ value }) => { - return value; + data: this.benchmarkDataItems.map(({ date, value }) => { + return { x: parseDate(date), y: value }; }), label: $localize`Benchmark` } diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html index 9071fdc22..a032dedf9 100644 --- a/apps/client/src/app/components/home-overview/home-overview.html +++ b/apps/client/src/app/components/home-overview/home-overview.html @@ -15,6 +15,7 @@ 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 5a7e90fc1..2c2b25172 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 @@ -125,7 +125,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderWidth: this.groupBy ? 0 : 2, data: this.data.map((position) => { - return position.investment; + return this.isInPercent + ? position.investment * 100 + : position.investment; }), label: $localize`Deposit`, segment: { @@ -255,8 +257,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { private getTooltipPluginConfiguration() { return { ...getTooltipOptions({ + currency: this.isInPercent ? undefined : this.currency, locale: this.isInPercent ? undefined : this.locale, - unit: this.isInPercent ? undefined : this.currency + unit: this.isInPercent ? '%' : undefined }), mode: 'index', position: 'top', diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html index 22dbf5ad0..c910587ae 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html +++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html @@ -23,13 +23,13 @@ class="mb-4" benchmarkLabel="Average Unit Price" [benchmarkDataItems]="benchmarkDataItems" + [currency]="SymbolProfile?.currency" [historicalDataItems]="historicalDataItems" [locale]="data.locale" [showGradient]="true" [showXAxis]="true" [showYAxis]="true" [symbol]="data.symbol" - [unit]="SymbolProfile?.currency" >
diff --git a/libs/common/src/lib/chart-helper.ts b/libs/common/src/lib/chart-helper.ts index dad86ed1f..b933b94ea 100644 --- a/libs/common/src/lib/chart-helper.ts +++ b/libs/common/src/lib/chart-helper.ts @@ -3,9 +3,11 @@ import { Chart, TooltipPosition } from 'chart.js'; import { getBackgroundColor, getTextColor } from './helper'; export function getTooltipOptions({ + currency = '', locale = '', unit = '' }: { + currency?: string; locale?: string; unit?: string; } = {}) { @@ -21,11 +23,13 @@ export function getTooltipOptions({ label += ': '; } if (context.parsed.y !== null) { - if (unit) { + if (currency) { label += `${context.parsed.y.toLocaleString(locale, { maximumFractionDigits: 2, minimumFractionDigits: 2 - })} ${unit}`; + })} ${currency}`; + } else if (unit) { + label += `${context.parsed.y.toFixed(2)} ${unit}`; } else { label += context.parsed.y.toFixed(2); } diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index 5c5ac346c..4f5d0571b 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/libs/ui/src/lib/line-chart/line-chart.component.ts @@ -46,6 +46,7 @@ import { export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() benchmarkDataItems: LineChartItem[] = []; @Input() benchmarkLabel = ''; + @Input() currency: string; @Input() historicalDataItems: LineChartItem[]; @Input() locale: string; @Input() showGradient = false; @@ -258,7 +259,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy { private getTooltipPluginConfiguration() { return { - ...getTooltipOptions({ locale: this.locale, unit: this.unit }), + ...getTooltipOptions({ + currency: this.currency, + locale: this.locale, + unit: this.unit + }), mode: 'index', position: 'top', xAlign: 'center', diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index 40397f402..faa83ab00 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts @@ -349,7 +349,10 @@ export class PortfolioProportionChartComponent private getTooltipPluginConfiguration(data: ChartConfiguration['data']) { return { - ...getTooltipOptions({ locale: this.locale, unit: this.baseCurrency }), + ...getTooltipOptions({ + currency: this.baseCurrency, + locale: this.locale + }), callbacks: { label: (context) => { const labelIndex =