Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e6ed4c
Initial plan for issue
Copilot Jun 4, 2025
ededda3
Fix 12-hour time format issue in graphs by implementing custom 24-hou…
Copilot Jun 4, 2025
3da5c13
Update time formatter to ES5-compatible syntax for older browser support
Copilot Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion docs/shared/static/js/graphs.server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,34 @@ function server_chart(div, data, options) {
.attr("y1", 0)
.attr("y2", h);

// Custom 24-hour time formatter to avoid 12-hour format in minute displays
Copy link

Copilot AI Jun 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
function custom24HourFormatter() {
var formatMillisecond = d3.utcFormat(".%L"),
formatSecond = d3.utcFormat(":%S"),
formatMinute = d3.utcFormat("%H:%M"), // Always use 24-hour format
formatHour = d3.utcFormat("%H"), // Always use 24-hour format
formatDay = d3.utcFormat("%a %d"),
formatWeek = d3.utcFormat("%b %d"),
formatMonth = d3.utcFormat("%B"),
formatYear = d3.utcFormat("%Y");

return function(date) {
return (d3.utcSecond(date) < date ? formatMillisecond
: d3.utcMinute(date) < date ? formatSecond
: d3.utcHour(date) < date ? formatMinute
: d3.utcDay(date) < date ? formatHour
: d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek)
: d3.utcYear(date) < date ? formatMonth
: formatYear)(date);
};
}

xrule.append("text")
.attr("x", x)
.attr("y", h + 3)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(x.tickFormat(xticks));
.text(custom24HourFormatter());

/* offset y lines */
var yrule = svg.selectAll("g.y")
Expand Down
24 changes: 23 additions & 1 deletion docs/shared/static/js/graphs.zone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,34 @@ function zone_chart(div, data, options) {
.attr("y1", 0)
.attr("y2", h);

// Custom 24-hour time formatter to avoid 12-hour format in minute displays
Copy link

Copilot AI Jun 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copilot uses AI. Check for mistakes.
function custom24HourFormatter() {
var formatMillisecond = d3.utcFormat(".%L"),
formatSecond = d3.utcFormat(":%S"),
formatMinute = d3.utcFormat("%H:%M"), // Always use 24-hour format
formatHour = d3.utcFormat("%H"), // Always use 24-hour format
formatDay = d3.utcFormat("%a %d"),
formatWeek = d3.utcFormat("%b %d"),
formatMonth = d3.utcFormat("%B"),
formatYear = d3.utcFormat("%Y");

return function(date) {
return (d3.utcSecond(date) < date ? formatMillisecond
: d3.utcMinute(date) < date ? formatSecond
: d3.utcHour(date) < date ? formatMinute
: d3.utcDay(date) < date ? formatHour
: d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek)
: d3.utcYear(date) < date ? formatMonth
: formatYear)(date);
};
}

xrule.append("text")
.attr("x", x)
.attr("y", h + 3)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(x.tickFormat(10));
.text(custom24HourFormatter());

/* offset y lines */
var y_ticks = y_max > 8 ? 8 : y_max;
Expand Down