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

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();