Fix 12-hour time format issue in graphs by implementing custom 24-hour formatter

[Copilot]

This PR fixes the confusing time display issue in graphs where minutes were shown in 12-hour format without AM/PM indicators, while hours were correctly displayed in 24-hour format.

Problem

The issue occurred when D3.js default tickFormat() method mixed 12-hour and 24-hour time formats, creating confusing sequences like:

• "8:45", "21", "9:15" (mixing 12-hour minutes with 24-hour hours)
• "08:45", "09 PM", "09:15" (inconsistent format)

Solution

Implemented a custom 24-hour time formatter that replaces D3's default tickFormat() in client/src/charts/zone-chart.ts:

function format24HourDate(date: Date): string {
  if (d3.utcSecond(date) < date) return formatMillisecond(date);
  if (d3.utcMinute(date) < date) return formatSecond(date);
  if (d3.utcHour(date) < date) return formatMinute24(date);  // %H:%M — always 24-hour
  if (d3.utcDay(date) < date) return formatHour24(date);    // %H — always 24-hour
  if (d3.utcMonth(date) < date) return d3.utcWeek(date) < date ? formatDay(date) : formatWeek(date);
  if (d3.utcYear(date) < date) return formatMonth(date);
  return formatYear(date);
}

server-chart.ts already used explicit d3.utcFormat('%H:%M') specifiers via its createDateFormatter function.

Result

Time displays are now consistent with 24-hour format throughout:

• ✅ "08:45", "21", "09:15" (consistent 24-hour format)
• ✅ "20:45", "21", "21:15" (proper progression)

Changes

• Modified: client/src/charts/zone-chart.ts — Added format24HourDate() helper and replaced xScale.tickFormat() call with it

Note: The chart code was migrated from docs/shared/static/js/graphs.server.js and docs/shared/static/js/graphs.zone.js to TypeScript (client/src/charts/) in the main branch. This PR targets the TypeScript implementation accordingly.

Testing

• ✅ TypeScript compiles without errors
• ✅ Tested problematic time sequences that caused the original issue
• ✅ Confirmed fix works for both server and zone graph views
• ✅ Maintains all existing graph functionality

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[Copilot]

Pull Request Overview

This PR implements a custom 24-hour time formatter to resolve inconsistent time displays in the graphs by replacing D3.js’s default formatter in both server and zone visualizations.

• Improved time formatting logic using a custom formatter for consistent 24-hour display
• Updates made separately in graphs.server.js and graphs.zone.js to address the issue

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
docs/shared/static/js/graphs.zone.js	Added custom24HourFormatter and replaced tickFormat() call
docs/shared/static/js/graphs.server.js	Added custom24HourFormatter and replaced tickFormat() call

[Copilot]

The custom24HourFormatter function is duplicated in multiple files. Consider extracting it to a shared utility module to reduce redundancy and simplify future maintenance.

[Copilot]

The custom24HourFormatter function appears to be identically implemented here as in graphs.zone.js. Extracting this common logic to a shared module could improve maintainability and consistency.

[abh]

@copilot please rebase on main branch

[Copilot]

@copilot please rebase on main branch

Done. Merged the main branch into this PR branch (commit dcb9ae2e). The old graphs.server.js and graphs.zone.js files were deleted in main as the chart code was migrated to TypeScript (client/src/charts/). The 24-hour time format fix has been applied to the new client/src/charts/zone-chart.ts file, replacing xScale.tickFormat() with a custom format24HourDate() function that explicitly uses %H:%M UTC format specifiers.