diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue index cb3308ca7..ea83d8469 100644 --- a/app/components/Package/TrendsChart.vue +++ b/app/components/Package/TrendsChart.vue @@ -1100,6 +1100,17 @@ const datetimeFormatterOptions = computed(() => { }[selectedGranularity.value] }) +// Cached date formatter for tooltip +const tooltipDateFormatter = computed(() => { + const granularity = displayedGranularity.value + return new Intl.DateTimeFormat(locale.value, { + year: 'numeric', + month: granularity === 'yearly' ? undefined : 'short', + day: granularity === 'daily' || granularity === 'weekly' ? 'numeric' : undefined, + timeZone: 'UTC', + }) +}) + const sanitise = (value: string) => value .replace(/^@/, '') @@ -1598,11 +1609,23 @@ const chartConfig = computed(() => { borderColor: 'transparent', backdropFilter: false, backgroundColor: 'transparent', - customFormat: ({ datapoint: items }) => { + customFormat: ({ datapoint: items, absoluteIndex }) => { if (!items || pending.value) return '' const hasMultipleItems = items.length > 1 + // Format date for multiple series datasets + let formattedDate = '' + if (hasMultipleItems && absoluteIndex !== undefined) { + const index = Number(absoluteIndex) + if (Number.isInteger(index) && index >= 0 && index < chartData.value.dates.length) { + const timestamp = chartData.value.dates[index] + if (typeof timestamp === 'number') { + formattedDate = tooltipDateFormatter.value.format(new Date(timestamp)) + } + } + } + const rows = items .map((d: Record) => { const label = String(d?.name ?? '').trim() @@ -1635,6 +1658,7 @@ const chartConfig = computed(() => { .join('') return `
+ ${formattedDate ? `
${formattedDate}
` : ''}
${rows}