Overriding title for graphs where a groupement is defined

Signed-off-by: Martin Vandenbussche <vandenbusschemartin@gmail.com>

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -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()
         );
@@ -210,7 +213,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: {
@@ -326,7 +329,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         colorScheme: this.colorScheme,
         currency: this.isInPercent ? undefined : this.currency,
         locale: this.isInPercent ? undefined : this.locale,
-        unit: this.isInPercent ? '%' : undefined
+        unit: this.isInPercent ? '%' : undefined,
+        groupBy: this.groupBy
       }),
       mode: 'index',
       position: <unknown>'top',

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

@@ -1,18 +1,20 @@
 import { Chart, TooltipPosition } from 'chart.js';
 
-import { getBackgroundColor, getTextColor } from './helper';
+import { formatGroupedDate, getBackgroundColor, getTextColor } from './helper';
-import { ColorScheme } from './types';
+import { ColorScheme, GroupBy } from './types';
 
 export function getTooltipOptions({
   colorScheme,
   currency = '',
   locale = '',
-  unit = ''
+  unit = '',
+  groupBy
 }: {
   colorScheme?: ColorScheme;
   currency?: string;
   locale?: string;
   unit?: string;
+  groupBy?: GroupBy;
 } = {}) {
   return {
     backgroundColor: getBackgroundColor(colorScheme),
@@ -38,6 +40,11 @@ export function getTooltipOptions({
           }
         }
         return label;
+      },
+      title: (contexts) => {
+        if (groupBy) {
+          return formatGroupedDate(contexts[0].parsed.x, groupBy);
+        }
       }
     },
     caretSize: 0,

libs/common/src/lib/helper.ts

@@ -1,11 +1,11 @@
 import * as currencies from '@dinero.js/currencies';
 import { DataSource } from '@prisma/client';
-import { getDate, getMonth, getYear, parse, subDays } from 'date-fns';
+import { format, 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 } from './types';
+import { ColorScheme, GroupBy } from './types';
 
 const NUMERIC_REGEXP = /[-]{0,1}[\d]*[.,]{0,1}[\d]+/g;
 
@@ -233,11 +233,21 @@ 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());
 }
 
+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, '');
 }