Add firstWeekday attr to calendar/TimeRange

packages/calendar/src/TimeRange.tsx

@@ -53,6 +53,8 @@ const InnerTimeRange = ({
 
     legends = timeRangeDefaultProps.legends,
     role = timeRangeDefaultProps.role,
+
+    firstWeekday = timeRangeDefaultProps.firstWeekday,
 }: TimeRangeSvgProps) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -98,6 +100,7 @@ const InnerTimeRange = ({
         data,
         direction,
         daySpacing,
+        firstWeekday,
     })
 
     // map the days and reduce the month
@@ -117,6 +120,7 @@ const InnerTimeRange = ({
         cellWidth,
         daySpacing,
         ticks: weekdayTicks,
+        firstWeekday,
     })
 
     const monthLegends = useMonthLegends({

packages/calendar/src/compute/timeRange.ts

@@ -1,6 +1,16 @@
-import { timeWeek, timeDays, timeDay } from 'd3-time'
+import {
+    timeDays,
+    timeDay,
+    timeMonday,
+    timeTuesday,
+    timeWednesday,
+    timeThursday,
+    timeFriday,
+    timeSaturday,
+    timeSunday,
+} from 'd3-time'
 import { timeFormat } from 'd3-time-format'
-import { DateOrString } from '../types'
+import { DateOrString, Weekday } from '../types'
 import { isDate } from 'lodash'
 
 // Interfaces
@@ -38,6 +48,7 @@ interface ComputeCellPositions
     }[]
     colorScale: (value: number) => string
     emptyColor: string
+    firstWeekday: Weekday
 }
 
 interface ComputeWeekdays
@@ -46,6 +57,7 @@ interface ComputeWeekdays
         ComputeBaseDimensionProps {
     ticks?: number[]
     arrayOfWeekdays?: string[]
+    firstWeekday: Weekday
 }
 
 interface Day {
@@ -135,26 +147,74 @@ export const computeCellSize = ({
     }
 }
 
+export const ARRAY_OF_WEEKDAYS = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+]
+
+export function getFirstWeekdayIndex(weekday: Weekday) {
+    return ARRAY_OF_WEEKDAYS.findIndex(item => item.toLowerCase() === weekday)
+}
+
+export const getDayIndex = (date: Date, firstWeekday: Weekday) => {
+    const days = [0, 1, 2, 3, 4, 5, 6]
+    const day = date.getDay()
+    const offsetDay = day - getFirstWeekdayIndex(firstWeekday)
+    const [dayIndex] = days.slice(offsetDay)
+    return dayIndex
+}
+
+const getTimeInterval = (firstWeekday: Weekday) => {
+    return [
+        timeSunday,
+        timeMonday,
+        timeTuesday,
+        timeWednesday,
+        timeThursday,
+        timeFriday,
+        timeSaturday,
+    ][getFirstWeekdayIndex(firstWeekday)]
+}
+
+function shiftArray<T>(arr: T[], x: number): T[] {
+    if (!arr.length || !x) return arr
+
+    for (let i = 0; i < x; i++) {
+        const shifted = arr.shift() as T
+        arr.push(shifted)
+    }
+
+    return arr
+}
+
 function computeGrid({
     startDate,
     date,
     direction,
+    firstWeekday,
 }: {
     startDate: Date
     date: Date
     direction: 'horizontal' | 'vertical'
+    firstWeekday: Weekday
 }) {
-    const firstWeek = timeWeek.count(startDate, date)
+    const timeInterval = getTimeInterval(firstWeekday)
+    const firstWeek = timeInterval.count(startDate, date)
     const month = date.getMonth()
     const year = date.getFullYear()
 
     let currentColumn = 0
     let currentRow = 0
     if (direction === 'horizontal') {
         currentColumn = firstWeek
-        currentRow = date.getDay()
+        currentRow = getDayIndex(date, firstWeekday)
     } else {
-        currentColumn = date.getDay()
+        currentColumn = getDayIndex(date, firstWeekday)
         currentRow = firstWeek
     }
 
@@ -172,6 +232,7 @@ export const computeCellPositions = ({
     cellHeight,
     daySpacing,
     offset,
+    firstWeekday,
 }: ComputeCellPositions) => {
     let x = daySpacing
     let y = daySpacing
@@ -201,6 +262,7 @@ export const computeCellPositions = ({
             startDate,
             date: day.date,
             direction,
+            firstWeekday,
         })
 
         const coordinates = {
@@ -244,15 +306,8 @@ export const computeWeekdays = ({
     direction,
     daySpacing,
     ticks = [1, 3, 5],
-    arrayOfWeekdays = [
-        'Sunday',
-        'Monday',
-        'Tuesday',
-        'Wednesday',
-        'Thursday',
-        'Friday',
-        'Saturday',
-    ],
+    firstWeekday,
+    arrayOfWeekdays = shiftArray(ARRAY_OF_WEEKDAYS, getFirstWeekdayIndex(firstWeekday)),
 }: ComputeWeekdays) => {
     const sizes = {
         width: cellWidth + daySpacing,
@@ -282,7 +337,7 @@ export const computeMonthLegends = ({
     }
 
     return days.reduce((acc, day) => {
-        if (acc.weeks.length === day.firstWeek) {
+        if (acc.weeks.length === day.firstWeek || (!acc.weeks.length && day.firstWeek === 1)) {
             acc.weeks.push(day)
 
             const key = `${day.year}-${day.month}`

packages/calendar/src/props.ts

@@ -52,4 +52,5 @@ export const timeRangeDefaultProps = {
     dayRadius: 0,
     square: true,
     weekdayLegendOffset: 75,
+    firstWeekday: 'sunday',
 } as const

packages/calendar/src/types.ts

@@ -192,6 +192,15 @@ export type TimeRangeTooltipProps = Omit<TimeRangeDayData, 'date' | 'value'> & {
     value: string
 }
 
+export type Weekday =
+    | 'sunday'
+    | 'monday'
+    | 'tuesday'
+    | 'wednesday'
+    | 'thursday'
+    | 'friday'
+    | 'saturday'
+
 export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial<
         Omit<CalendarData, 'data'>
     > &
@@ -212,6 +221,7 @@ export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial
                 role: string
                 weekdayLegendOffset: number
                 weekdayTicks: Array<0 | 1 | 2 | 3 | 4 | 5 | 6>
+                firstWeekday: Weekday
             }
     >
 

website/src/data/components/time-range/props.ts

@@ -215,6 +215,22 @@ const props: ChartProperty[] = [
             6 = Saturday\n
         `,
     },
+    {
+        key: 'firstWeekday',
+        help: `define the first weekday: 'sunday', 'monday', etc.`,
+        flavors: allFlavors,
+        type: 'Weekday',
+        required: false,
+        defaultValue: defaults.firstWeekday,
+        group: 'Weekday',
+        control: {
+            type: 'radio',
+            choices: [
+                { label: `'sunday'`, value: 'sunday' },
+                { label: `'monday'`, value: 'monday' },
+            ],
+        },
+    },
     // Days
     {
         key: 'square',

website/src/pages/time-range/index.js

@@ -36,6 +36,7 @@ const initialProperties = {
     monthLegendOffset: 10,
 
     weekdayLegendOffset: 75,
+    firstWeekday: 'sunday',
 
     square: true,
     dayRadius: 0,