From 3432f0b6136b9591add4bc425928ebbe02d90023 Mon Sep 17 00:00:00 2001 From: Bob Date: Sun, 22 Feb 2026 12:14:39 +0000 Subject: [PATCH 1/2] fix(sunburst-clock): respect startOfDay offset when rendering the clock The sunburst clock was ignoring the user's "Start of day" setting and always using calendar midnight (00:00) as the start of the visualization window. This meant the queried time range (e.g. 04:00-04:00 next day) didn't align with the clock's visual range (00:00-23:59), causing events between midnight and the startOfDay offset to appear missing. Pass the starttime (already offset-aware) from SunburstClock.vue into sunburst-clock.ts so both the data query and the visualization use the same 24h window. Also adjust the clock tick labels to be placed at 6-hour intervals relative to the actual start-of-day hour rather than hard-coded at 0/6/12/18. Fixes ActivityWatch/aw-webui#358 --- src/visualizations/SunburstClock.vue | 2 +- src/visualizations/sunburst-clock.ts | 30 ++++++++++++++++++++-------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/visualizations/SunburstClock.vue b/src/visualizations/SunburstClock.vue index d1271c96..3cb66faa 100644 --- a/src/visualizations/SunburstClock.vue +++ b/src/visualizations/SunburstClock.vue @@ -219,7 +219,7 @@ export default { }; this.centerMsg = 'No data'; } - sunburst.update(this.$el, hierarchy); + sunburst.update(this.$el, hierarchy, this.starttime); }); }); }, diff --git a/src/visualizations/sunburst-clock.ts b/src/visualizations/sunburst-clock.ts index a4501714..ee9bdeda 100644 --- a/src/visualizations/sunburst-clock.ts +++ b/src/visualizations/sunburst-clock.ts @@ -232,7 +232,11 @@ function create(el: HTMLElement) { } // Main function to draw and set up the visualization, once we have the data. -function update(el: HTMLElement, root_event: IEvent & { children: IEvent[] }) { +function update( + el: HTMLElement, + root_event: IEvent & { children: IEvent[] }, + startOfDay?: moment.Moment +) { // Basic setup of page elements. initializeBreadcrumbTrail(); @@ -255,13 +259,23 @@ function update(el: HTMLElement, root_event: IEvent & { children: IEvent[] }) { let root_start = moment(root_event.timestamp); let root_end = root_start.clone().add(root_event.duration, 'seconds'); if (show_whole_day) { - root_start = root_start.startOf('day'); - root_end = root_start.clone().endOf('day'); - - drawClock(0, 0); - drawClock(6, 0); - drawClock(12, 0); - drawClock(18, 0); + // Use the provided start-of-day (which respects the user's startOfDay setting) + // so that events between midnight and the startOfDay offset are shown correctly. + // Fall back to calendar midnight if no startOfDay is provided. + if (startOfDay) { + root_start = startOfDay.clone(); + } else { + root_start = root_start.startOf('day'); + } + root_end = root_start.clone().add(1, 'days'); + + // Draw clock ticks at 6-hour intervals relative to the start-of-day offset + const start_hour = root_start.hours() + root_start.minutes() / 60; + for (let i = 0; i < 4; i++) { + const tick_hours = Math.floor((start_hour + i * 6) % 24); + const tick_minutes = Math.round(((start_hour + i * 6) % 1) * 60); + drawClock(tick_hours, tick_minutes); + } // TODO: Draw only if showing today const now = moment(); From 3f97f874cb6f0601df2206e2fb8271e9a8524e1e Mon Sep 17 00:00:00 2001 From: Bob Date: Sun, 22 Feb 2026 12:36:16 +0000 Subject: [PATCH 2/2] fix(sunburst-clock): use standard clock ticks with special start-of-day marker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Keep 6-hour ticks at standard positions (00:00, 06:00, 12:00, 18:00) for analog-clock familiarity. Add a special ☀ marker for the start-of-day boundary when it differs from midnight (e.g. 04:00 ☀ for the default setting). --- src/visualizations/sunburst-clock.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/visualizations/sunburst-clock.ts b/src/visualizations/sunburst-clock.ts index ee9bdeda..e0502b23 100644 --- a/src/visualizations/sunburst-clock.ts +++ b/src/visualizations/sunburst-clock.ts @@ -269,12 +269,16 @@ function update( } root_end = root_start.clone().add(1, 'days'); - // Draw clock ticks at 6-hour intervals relative to the start-of-day offset - const start_hour = root_start.hours() + root_start.minutes() / 60; - for (let i = 0; i < 4; i++) { - const tick_hours = Math.floor((start_hour + i * 6) % 24); - const tick_minutes = Math.round(((start_hour + i * 6) % 1) * 60); - drawClock(tick_hours, tick_minutes); + // Draw clock ticks at standard 6-hour intervals (00, 06, 12, 18) + for (const h of [0, 6, 12, 18]) { + drawClock(h, 0); + } + + // Draw a special marker for the start-of-day boundary if it's not at midnight + const start_hour = root_start.hours(); + const start_min = root_start.minutes(); + if (start_hour !== 0 || start_min !== 0) { + drawClock(start_hour, start_min, `${root_start.format('HH:mm')} ☀`); } // TODO: Draw only if showing today