diff --git a/CHANGELOG.md b/CHANGELOG.md index b53af4152..fc3e2fdfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Extended the hints in user settings +### 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 +- Reduced the execution interval of the data gathering to every 4 hours + ## 1.227.1 - 2023-01-14 ### Changed diff --git a/apps/api/src/services/cron.service.ts b/apps/api/src/services/cron.service.ts index e3141ebe7..8b036c35e 100644 --- a/apps/api/src/services/cron.service.ts +++ b/apps/api/src/services/cron.service.ts @@ -19,8 +19,8 @@ export class CronService { private readonly twitterBotService: TwitterBotService ) {} - @Cron(CronExpression.EVERY_HOUR) - public async runEveryHour() { + @Cron(CronExpression.EVERY_4_HOURS) + public async runEveryFourHours() { await this.dataGatheringService.gather7Days(); } 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,