Refactoring

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';
@@ -328,9 +328,9 @@ 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,
-        groupBy: this.groupBy
+        unit: this.isInPercent ? '%' : undefined
       }),
       mode: 'index',
       position: <unknown>'top',

libs/common/src/lib/chart-helper.ts

@@ -1,20 +1,43 @@
 import { Chart, TooltipPosition } from 'chart.js';
+import { format } from 'date-fns';
 
-import { formatGroupedDate, getBackgroundColor, getTextColor } from './helper';
+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 = '',
-  groupBy
+  unit = ''
 }: {
   colorScheme?: ColorScheme;
   currency?: string;
+  groupBy?: GroupBy;
   locale?: string;
   unit?: string;
-  groupBy?: GroupBy;
 } = {}) {
   return {
     backgroundColor: getBackgroundColor(colorScheme),
@@ -43,8 +66,10 @@ export function getTooltipOptions({
       },
       title: (contexts) => {
         if (groupBy) {
-          return formatGroupedDate(contexts[0].parsed.x, groupBy);
+          return formatGroupedDate({ groupBy, date: contexts[0].parsed.x });
         }
+
+        return contexts[0].label;
       }
     },
     caretSize: 0,
@@ -104,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

@@ -1,11 +1,11 @@
 import * as currencies from '@dinero.js/currencies';
 import { DataSource } from '@prisma/client';
-import { format, getDate, getMonth, getYear, parse, subDays } from 'date-fns';
+import { getDate, getMonth, getYear, parse, subDays } from 'date-fns';
 import { de, es, fr, it, nl, pt } from 'date-fns/locale';
 
 import { ghostfolioScraperApiSymbolPrefix, locale } from './config';
 import { Benchmark } from './interfaces';
-import { ColorScheme, GroupBy } from './types';
+import { ColorScheme } from './types';
 
 const NUMERIC_REGEXP = /[-]{0,1}[\d]*[.,]{0,1}[\d]+/g;
 
@@ -240,18 +240,6 @@ export function parseDate(date: string) {
   return parse(date, DATE_FORMAT, new Date());
 }
 
-export function formatGroupedDate(date: Date, groupBy: GroupBy) {
-  if (groupBy === 'month') {
-    return format(date, DATE_FORMAT_MONTHLY);
-  } else if (groupBy === 'year') {
-    return format(date, DATE_FORMAT_YEARLY);
-  }
-}
-
 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,8 @@ 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,