From 2beceb36cf710cc24f2a38b36d768eb8bf5c4ea4 Mon Sep 17 00:00:00 2001 From: Martin Vandenbussche <26136934+MaVdbussche@users.noreply.github.com> Date: Mon, 16 Jan 2023 10:46:48 +0100 Subject: [PATCH] Overriding tooltip title for graphs where grouping is defined (#1605) * Overriding tooltip title for graphs where grouping is defined * Update changelog Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com> --- CHANGELOG.md | 7 ++++ .../investment-chart.component.ts | 18 +++++---- libs/common/src/lib/chart-helper.ts | 40 ++++++++++++++++++- libs/common/src/lib/helper.ts | 6 +-- .../fire-calculator.component.ts | 6 ++- 5 files changed, 62 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7363ee80..6686fa7f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,13 @@ 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 + +- Improved the date formatting in the tooltip of the dividend timeline grouped by month / year +- Improved the date formatting in the tooltip of the investment timeline grouped by month / year + ## 1.227.1 - 2023-01-14 ### Changed 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 734fe704f..65ecbabb8 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 @@ -11,7 +11,8 @@ import { import { getTooltipOptions, getTooltipPositionerMapTop, - getVerticalHoverLinePlugin + getVerticalHoverLinePlugin, + transformTickToAbbreviation } from '@ghostfolio/common/chart-helper'; import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config'; import { @@ -19,8 +20,7 @@ import { getBackgroundColor, getDateFormatString, getTextColor, - parseDate, - transformTickToAbbreviation + parseDate } from '@ghostfolio/common/helper'; import { LineChartItem } from '@ghostfolio/common/interfaces'; import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface'; @@ -136,10 +136,13 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { date, investment: last(this.investments).investment }); - this.values.push({ date, value: last(this.values).value }); + this.values.push({ + date, + value: last(this.values).value + }); } - const data = { + const chartData = { labels: this.historicalDataItems.map(({ date }) => { return parseDate(date); }), @@ -191,7 +194,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { if (this.chartCanvas) { if (this.chart) { - this.chart.data = data; + this.chart.data = chartData; this.chart.options.plugins.tooltip = ( this.getTooltipPluginConfiguration() ); @@ -213,7 +216,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { this.chart.update(); } else { this.chart = new Chart(this.chartCanvas.nativeElement, { - data, + data: chartData, options: { animation: false, elements: { @@ -328,6 +331,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { ...getTooltipOptions({ colorScheme: this.colorScheme, currency: this.isInPercent ? undefined : this.currency, + groupBy: this.groupBy, locale: this.isInPercent ? undefined : this.locale, unit: this.isInPercent ? '%' : undefined }), diff --git a/libs/common/src/lib/chart-helper.ts b/libs/common/src/lib/chart-helper.ts index be1fa8d60..1befb1585 100644 --- a/libs/common/src/lib/chart-helper.ts +++ b/libs/common/src/lib/chart-helper.ts @@ -1,16 +1,41 @@ import { Chart, TooltipPosition } from 'chart.js'; +import { format } from 'date-fns'; -import { getBackgroundColor, getTextColor } from './helper'; -import { ColorScheme } from './types'; +import { + DATE_FORMAT, + DATE_FORMAT_MONTHLY, + DATE_FORMAT_YEARLY, + getBackgroundColor, + getTextColor +} from './helper'; +import { ColorScheme, GroupBy } from './types'; + +export function formatGroupedDate({ + date, + groupBy +}: { + date: Date; + groupBy: GroupBy; +}) { + if (groupBy === 'month') { + return format(date, DATE_FORMAT_MONTHLY); + } else if (groupBy === 'year') { + return format(date, DATE_FORMAT_YEARLY); + } + + return format(date, DATE_FORMAT); +} export function getTooltipOptions({ colorScheme, currency = '', + groupBy, locale = '', unit = '' }: { colorScheme?: ColorScheme; currency?: string; + groupBy?: GroupBy; locale?: string; unit?: string; } = {}) { @@ -38,6 +63,13 @@ export function getTooltipOptions({ } } return label; + }, + title: (contexts) => { + if (groupBy) { + return formatGroupedDate({ groupBy, date: contexts[0].parsed.x }); + } + + return contexts[0].label; } }, caretSize: 0, @@ -97,3 +129,7 @@ export function getVerticalHoverLinePlugin( id: 'verticalHoverLine' }; } + +export function transformTickToAbbreviation(value: number) { + return value < 1000000 ? `${value / 1000}K` : `${value / 1000000}M`; +} diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts index 29bb4d121..e538b6dbe 100644 --- a/libs/common/src/lib/helper.ts +++ b/libs/common/src/lib/helper.ts @@ -233,6 +233,8 @@ export function resolveMarketCondition( } export const DATE_FORMAT = 'yyyy-MM-dd'; +export const DATE_FORMAT_MONTHLY = 'MMMM yyyy'; +export const DATE_FORMAT_YEARLY = 'yyyy'; export function parseDate(date: string) { return parse(date, DATE_FORMAT, new Date()); @@ -241,7 +243,3 @@ export function parseDate(date: string) { export function prettifySymbol(aSymbol: string): string { return aSymbol?.replace(ghostfolioScraperApiSymbolPrefix, ''); } - -export function transformTickToAbbreviation(value: number) { - return value < 1000000 ? `${value / 1000}K` : `${value / 1000000}M`; -} 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 ed187672f..e4e77095d 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts @@ -13,9 +13,11 @@ import { ViewChild } from '@angular/core'; import { FormBuilder, FormControl } from '@angular/forms'; -import { getTooltipOptions } from '@ghostfolio/common/chart-helper'; +import { + getTooltipOptions, + transformTickToAbbreviation +} from '@ghostfolio/common/chart-helper'; import { primaryColorRgb } from '@ghostfolio/common/config'; -import { transformTickToAbbreviation } from '@ghostfolio/common/helper'; import { ColorScheme } from '@ghostfolio/common/types'; import { BarController,