fix(sunburst-clock): respect startOfDay offset when rendering the clock (#766)

* 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 #358

* fix(sunburst-clock): use standard clock ticks with special start-of-day marker

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).

Author: TimeToBuildBob

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);
         });
       });
     },

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,27 @@ 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 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
       const now = moment();