Feature/label the time axis of the home overview chart according to the date range

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -57,6 +57,7 @@ const MINIMUM_CHART_ITEMS = 3;
 export class GfHomeOverviewComponent implements OnInit {
   protected readonly errors = signal<AssetProfileIdentifier[]>([]);
   protected readonly hasImpersonationId = signal(false);
+  protected readonly defaultDateRange = DEFAULT_DATE_RANGE;
   protected readonly historicalDataItems = signal<LineChartItem[] | null>(null);
 
   // A line through only two points (e.g. the close of the previous day and

apps/client/src/app/components/home-overview/home-overview.html

@@ -72,6 +72,7 @@
             unit="%"
             [class.pe-3]="deviceType() === 'mobile'"
             [colorScheme]="user()?.settings?.colorScheme"
+            [dateRange]="user()?.settings?.dateRange ?? defaultDateRange"
             [hidden]="!hasEnoughChartData()"
             [historicalDataItems]="historicalDataItems()"
             [isAnimated]="user()?.settings?.dateRange === '1d' ? false : true"
@@ -79,7 +80,7 @@
             [locale]="locale()"
             [showGradient]="true"
             [showLoader]="false"
-            [showXAxis]="false"
+            [showXAxis]="true"
             [showYAxis]="false"
           />
         </div>

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

@@ -0,0 +1,17 @@
+import { getTimeAxisUnit } from './chart-helper';
+
+describe('getTimeAxisUnit', () => {
+  it.each([
+    ['1d', 'day'],
+    ['wtd', 'day'],
+    ['mtd', 'day'],
+    ['ytd', 'month'],
+    ['1y', 'month'],
+    ['2025', 'month'],
+    ['5y', 'year'],
+    ['max', 'year'],
+    [undefined, 'year']
+  ])('uses the unit of %s', (dateRange, unit) => {
+    expect(getTimeAxisUnit(dateRange)).toBe(unit);
+  });
+});

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

@@ -23,7 +23,7 @@ import {
   getLocale,
   getTextColor
 } from './helper';
-import { ColorScheme, GroupBy } from './types';
+import { ColorScheme, DateRange, GroupBy } from './types';
 
 export function formatGroupedDate({
   date,
@@ -60,16 +60,41 @@ export function getChartElementsOptions(
   };
 }
 
+/**
+ * Returns the unit of the ticks of the time axis, so that the labels fit the
+ * length of the date range: days up to a month, months up to a year and years
+ * above
+ */
+export function getTimeAxisUnit(
+  aDateRange?: DateRange
+): 'day' | 'month' | 'year' {
+  switch (aDateRange) {
+    case '1d':
+    case 'mtd':
+    case 'wtd':
+      return 'day';
+    case '5y':
+    case 'max':
+    case undefined:
+      return 'year';
+    default:
+      // 'ytd', '1y' and single years
+      return 'month';
+  }
+}
+
 export function getTimeAxisOptions({
   borderWidth = 1,
   colorScheme,
   display = true,
-  locale = getLocale()
+  locale = getLocale(),
+  unit = 'year'
 }: {
   borderWidth?: number;
   colorScheme?: ColorScheme;
   display?: boolean;
   locale?: string;
+  unit?: 'day' | 'month' | 'year';
 }): ScaleOptions<'time'> {
   return {
     display,
@@ -80,9 +105,14 @@ export function getTimeAxisOptions({
     grid: {
       display: false
     },
+    ticks: {
+      autoSkip: true,
+      maxRotation: 0,
+      maxTicksLimit: 6
+    },
     time: {
       tooltipFormat: getDateFormatString(locale),
-      unit: 'year'
+      unit
     },
     type: 'time'
   };

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -1,6 +1,7 @@
 import {
   getChartBorderColor,
   getTimeAxisOptions,
+  getTimeAxisUnit,
   getValueAxisOptions,
   getVerticalHoverLinePlugin
 } from '@ghostfolio/common/chart-helper';
@@ -10,7 +11,7 @@ import {
   LineChartItem,
   NullableLineChartItem
 } from '@ghostfolio/common/interfaces';
-import { ColorScheme } from '@ghostfolio/common/types';
+import { ColorScheme, DateRange } from '@ghostfolio/common/types';
 
 import {
   AfterViewInit,
@@ -60,6 +61,7 @@ export class GfLineChartComponent
   @Input() benchmarkLabel = '';
   @Input() colorScheme?: ColorScheme;
   @Input() currency?: string;
+  @Input() dateRange?: DateRange;
   @Input() historicalDataItems: LineChartItem[] | null;
   @Input() isAnimated = false;
   @Input() label: string;
@@ -236,7 +238,8 @@ export class GfLineChartComponent
               x: getTimeAxisOptions({
                 colorScheme: this.colorScheme,
                 display: this.showXAxis,
-                locale: this.locale
+                locale: this.locale,
+                unit: getTimeAxisUnit(this.dateRange)
               }),
               y: {
                 ...getValueAxisOptions({