diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index d6589eda5..fe3f2ca6a 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts @@ -191,7 +191,12 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy { type: 'time', time: { tooltipFormat: getDateFormatString(this.locale), - unit: 'year' + unit: 'year', + displayFormats: { + day: 'MMM d', + month: 'MMM yyyy', + year: 'yyyy' + } } }, y: { 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 e948a8ad4..fa1686b2b 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 @@ -40,11 +40,11 @@ import 'chartjs-adapter-date-fns'; import annotationPlugin from 'chartjs-plugin-annotation'; import { isAfter, - subDays, - subYears, startOfMonth, + startOfWeek, startOfYear, - startOfWeek + subDays, + subYears } from 'date-fns'; @Component({ @@ -280,7 +280,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { } private getChartXAxis() { - let min: number; + let min: number | undefined; let unit: 'day' | 'month' | 'week' | 'year' = 'year'; switch (this.dateRange) { @@ -293,7 +293,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { unit = 'day'; break; case 'wtd': - min = startOfWeek(new Date()).getTime(); + min = startOfWeek(new Date(), { weekStartsOn: 1 }).getTime(); unit = 'day'; break; case 'ytd': @@ -308,9 +308,28 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { min = subYears(new Date(), 5).getTime(); unit = 'year'; break; + case 'max': + // For 'max', we don't set a min value to show all available data + // Use 'year' unit for better scale with long-term data + unit = 'year'; + break; + default: + // For any other value (like specific years), use year unit + unit = 'year'; + break; } - return { + const config: any = { + type: 'time', + time: { + unit, + // Add display formats for better readability + displayFormats: { + day: 'MMM d', + month: 'MMM yyyy', + year: 'yyyy' + } + }, border: { color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`, width: this.groupBy ? 0 : 1 @@ -318,13 +337,15 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { display: true, grid: { display: false - }, - min, - type: 'time', - time: { - unit } }; + + // Only add min if it's defined (not for 'max' range) + if (min !== undefined) { + config.min = min; + } + + return config; } private getTooltipPluginConfiguration() { diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts index 9eb2945f5..e5dc187ff 100644 --- a/libs/common/src/lib/helper.ts +++ b/libs/common/src/lib/helper.ts @@ -444,12 +444,3 @@ export function resolveMarketCondition( return { emoji: undefined }; } } - -export function isBenchmark( - aSymbol: string, - aBenchmarks: AssetProfileIdentifier[] -) { - return aBenchmarks.some(({ symbol }) => { - return symbol === aSymbol; - }); -}