respect start of week setting for charts

resources/js/utils/time.ts

@@ -5,7 +5,9 @@ import isToday from 'dayjs/plugin/isToday';
 import isYesterday from 'dayjs/plugin/isYesterday';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
-import { getUserTimezone } from '@/utils/useUser';
+import { getUserTimezone, getWeekStart } from '@/utils/useUser';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import { computed } from 'vue';
 
 dayjs.extend(relativeTime);
 dayjs.extend(isToday);
@@ -13,11 +15,28 @@ dayjs.extend(isYesterday);
 dayjs.extend(duration);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(updateLocale);
 
 export function getDayJsInstance() {
+    dayjs.updateLocale('en', {
+        weekStart: firstDayIndex.value,
+    });
     return dayjs;
 }
 
+export const firstDayIndex = computed(() => {
+    const apiDayOrder = [
+        'sunday',
+        'monday',
+        'tuesday',
+        'wednesday',
+        'thursday',
+        'friday',
+        'saturday',
+    ];
+    return apiDayOrder.indexOf(getWeekStart());
+});
+
 export function formatHumanReadableDuration(duration: number): string {
     const dayJsDuration = dayjs.duration(duration, 's');
     const hours = dayJsDuration.hours() + dayJsDuration.days() * 24;

resources/js/utils/useUser.ts

@@ -10,6 +10,10 @@ function getCurrentUserId() {
     return page.props.auth.user.id;
 }
 
+function getWeekStart() {
+    return page.props.auth.user.week_start;
+}
+
 function getCurrentOrganizationId() {
     return page.props.auth.user.current_team_id;
 }
@@ -18,4 +22,9 @@ function getUserTimezone() {
     return page.props.auth.user.timezone;
 }
 
-export { getCurrentOrganizationId, getCurrentUserId, getUserTimezone };
+export {
+    getCurrentOrganizationId,
+    getCurrentUserId,
+    getUserTimezone,
+    getWeekStart,
+};