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

@@ -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

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 = <unknown>(
           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
       }),

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`;
+}

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`;
-}

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,