feat: UTC support for current time

Author: Xeyos88

docs/.vitepress/theme/components/AdvancedGanttDemo.vue

@@ -27,6 +27,8 @@ const enableMinutes = ref(false)
 const currentTime = ref(true)
 const currentTimeLabel = ref('Now')
 const locale = ref('en')
+const utc = ref(false)
+
 
 // Display Configuration
 const hideTimeaxis = ref(false)
@@ -442,6 +444,12 @@ const formattedEventLog = computed(() => {
                 >
               </label>
             </div>
+            <div class="setting-item">
+              <label>
+                UTC Current time:
+                <input type="checkbox" v-model="utc">
+              </label>
+            </div>
           </div>
         </div>
 
@@ -744,6 +752,7 @@ const formattedEventLog = computed(() => {
         :milestones="milestones"
         :enableConnectionCreation="enableConnectionCreation"
         :enableConnectionDeletion="enableConnectionDeletion"
+        :utc="utc"
         @click-bar="handleEvent($event, 'Bar Click')"
         @drag-bar="handleEvent($event, 'Bar Drag')"
         @sort="handleEvent($event, 'Sort Change')"

docs/.vitepress/theme/index.ts

@@ -8,6 +8,7 @@ import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
 import isBetween from "dayjs/plugin/isBetween.js"
 import weekOfYear from "dayjs/plugin/weekOfYear"
 import dayOfYear from "dayjs/plugin/dayOfYear.js"
+import utc from "dayjs/plugin/utc"
 
 
 export function extendDayjs() {
@@ -17,6 +18,7 @@ export function extendDayjs() {
   dayjs.extend(weekOfYear)
   dayjs.extend(isoWeek)
   dayjs.extend(dayOfYear)
+  dayjs.extend(utc)
 }
 
 const GanttDemo = defineClientComponent(() => {

docs/components/g-gantt-chart.md

@@ -76,6 +76,7 @@ Here's a minimal example of using the GGanttChart component:
 | defaultProgressResizable | `boolean` | `true` | Enable progress adjustment through dragging |
 | enableConnectionCreation | `boolean` | `false` | Enable the possibility to draw connections |
 | enableConnectionDelete | `boolean` | `false` | Enable the possibility to delete connections |
+| utc | `boolean` | `false` | Set the current time position based on UTC |
 
 
 ### Events
@@ -105,6 +106,7 @@ Here's a minimal example of using the GGanttChart component:
 | connection-delete | `{ sourceBar: GanttBarObject, targetBar: GanttBarObject, e: MouseEvent }` | Delete a connection |
 
 
+
 ### Slots
 
 | Slot Name | Props | Description |

src/components/GGanttChart.vue

@@ -124,7 +124,8 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   showProgress: true,
   defaultProgressResizable: true,
   enableConnectionCreation: false,
-  enableConnectionDeletion: false
+  enableConnectionDeletion: false,
+  utc: false
 })
 
 // Events

src/components/GGanttCurrentTime.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import useTimePositionMapping from "../composables/useTimePositionMapping"
 import dayjs from "dayjs"
 import provideConfig from "../provider/provideConfig"
@@ -8,15 +8,23 @@ import { useIntervalFn } from "@vueuse/core"
 
 const { mapTimeToPosition } = useTimePositionMapping()
 const currentMoment = ref(dayjs())
-const { colors, dateFormat, currentTimeLabel } = provideConfig()
+const { colors, dateFormat, currentTimeLabel, utc } = provideConfig()
 const xDist = ref()
 
 const loopTime = () => {
-  currentMoment.value = dayjs()
+  const now = utc.value ? dayjs().utc() : dayjs()
+  currentMoment.value = now
   const format = dateFormat.value || "YYYY-MM-DD HH:mm:ss"
   xDist.value = mapTimeToPosition(dayjs(currentMoment.value, format).format(format))
 }
 useIntervalFn(loopTime, 1000)
+
+const currentTimeDisplay = computed(() => {
+  if (utc.value) {
+    return `${currentTimeLabel.value} (UTC)`
+  }
+  return currentTimeLabel.value
+})
 </script>
 
 <template>
@@ -34,7 +42,7 @@ useIntervalFn(loopTime, 1000)
     />
     <span class="g-grid-current-time-text" :style="{ color: colors.markerCurrentTime }">
       <slot name="current-time-label">
-        {{ currentTimeLabel }}
+        {{ currentTimeDisplay }}
       </slot>
     </span>
   </div>

src/hy-vue-gantt.ts

@@ -9,6 +9,7 @@ import advancedFormat from "dayjs/plugin/advancedFormat"
 import customParseFormat from "dayjs/plugin/customParseFormat.js"
 import dayOfYear from "dayjs/plugin/dayOfYear.js"
 import localizedFormat from "dayjs/plugin/localizedFormat"
+import utc from "dayjs/plugin/utc"
 
 import GGanttChart from "./components/GGanttChart.vue"
 import GGanttRow from "./components/GGanttRow.vue"
@@ -103,6 +104,7 @@ export function extendDayjs() {
   dayjs.extend(advancedFormat)
   dayjs.extend(dayOfYear)
   dayjs.extend(localizedFormat)
+  dayjs.extend(utc)
 }
 
 export type {

src/types/config.ts

@@ -65,6 +65,7 @@ export interface GGanttChartProps {
   showLabel?: boolean
   showProgress?: boolean
   defaultProgressResizable?: boolean
+  utc?: boolean
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {

tests/components/GGanttCurrentTime.test.ts

@@ -9,6 +9,26 @@ vi.mock("../composables/useTimePositionMapping", () => ({
   })
 }))
 
+vi.mock("dayjs", () => {
+  const mockDayjs = vi.fn((input) => ({
+    format: vi.fn().mockReturnValue(input || "2024-01-01"),
+    diff: vi.fn().mockReturnValue(60),
+    add: vi.fn().mockImplementation((value, unit) => mockDayjs("2024-01-02")),
+    subtract: vi.fn().mockImplementation((value, unit) => mockDayjs("2023-12-31")),
+    locale: vi.fn().mockReturnValue(mockDayjs),
+    utc: vi.fn()
+  }))
+
+  // Add static methods and properties that dayjs uses
+  mockDayjs.extend = vi.fn()
+  mockDayjs.locale = vi.fn()
+
+  return {
+    default: mockDayjs,
+    __esModule: true
+  }
+})
+
 describe("GGanttCurrentTime", () => {
   beforeEach(() => {
     mockMapTimeToPosition.mockClear()

tests/vitestSetup.ts

@@ -90,7 +90,8 @@ beforeAll(() => {
       locale: ref("en"),
       sortable: ref(true),
       enableRowDragAndDrop: ref(true),
-      showLabel: ref(true)
+      showLabel: ref(true),
+      utc: ref(false)
     },
     [EMIT_BAR_EVENT_KEY]: () => {},
     [BAR_CONTAINER_KEY]: ref(barContainerElement),