diff --git a/code/frontend/src/app/shared/utils/chart-window.util.spec.ts b/code/frontend/src/app/shared/utils/chart-window.util.spec.ts index f4c21d08..3a040c53 100644 --- a/code/frontend/src/app/shared/utils/chart-window.util.spec.ts +++ b/code/frontend/src/app/shared/utils/chart-window.util.spec.ts @@ -45,6 +45,17 @@ describe('chart-window.util', () => { }); describe('formatBucketDate', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + const forceTwelveHourLocale = () => { + const original = Date.prototype.toLocaleTimeString; + vi.spyOn(Date.prototype, 'toLocaleTimeString').mockImplementation(function (this: Date, _locale, options) { + return original.call(this, 'en-US', options); + }); + }; + it('keeps the calendar day of the bucket regardless of the local timezone', () => { expect(formatBucketDate('2026-03-15T23:00:00Z', 168)).toContain('15'); }); @@ -61,6 +72,18 @@ describe('chart-window.util', () => { expect(formatted).toMatch(/\d/); expect(formatted).not.toBe(formatBucketDate('2026-03-15T23:00:00Z', 168)); }); + + it('formats 24h windows with a 24-hour clock', () => { + forceTwelveHourLocale(); + + expect(formatBucketDate(new Date(2026, 2, 15, 13, 0).toISOString(), 24)).toBe('13:00'); + }); + + it('formats midnight as 00 rather than 24', () => { + forceTwelveHourLocale(); + + expect(formatBucketDate(new Date(2026, 2, 15, 0, 0).toISOString(), 24)).toBe('00:00'); + }); }); describe('getChartDuration', () => { diff --git a/code/frontend/src/app/shared/utils/chart-window.util.ts b/code/frontend/src/app/shared/utils/chart-window.util.ts index 8037fba4..8cd69e15 100644 --- a/code/frontend/src/app/shared/utils/chart-window.util.ts +++ b/code/frontend/src/app/shared/utils/chart-window.util.ts @@ -28,7 +28,7 @@ export function getChartDuration(): number { export function formatBucketDate(date: string, hours: number): string { if (hours <= 24) { - return new Date(date).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); + return new Date(date).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }); } if (hours >= 8760) { return new Date(`${date.slice(0, 10)}T00:00:00`).toLocaleDateString(undefined, { month: 'short', year: '2-digit' });