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,60 @@ export const computeCellSize = ({
  }
 }
 
+export const getDayIndex = (date: Date, firstWeekday: Weekday) => {
+ const days = [0, 1, 2, 3, 4, 5, 6]
+ const day = date.getDay()
+ const offsetDay = day - firstWeekday
+ const [dayIndex] = days.slice(offsetDay)
+ return dayIndex
+}
+
+const getTimeInterval = (firstWeekday: Weekday) => {
+ return [
+ timeSunday,
+ timeMonday,
+ timeTuesday,
+ timeWednesday,
+ timeThursday,
+ timeFriday,
+ timeSaturday,
+ ][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 +218,7 @@ export const computeCellPositions = ({
  cellHeight,
  daySpacing,
  offset,
+ firstWeekday,
 }: ComputeCellPositions) => {
  let x = daySpacing
  let y = daySpacing
@@ -201,6 +248,7 @@ export const computeCellPositions = ({
  startDate,
  date: day.date,
  direction,
+ firstWeekday,
  })
 
  const coordinates = {
@@ -244,15 +292,11 @@ export const computeWeekdays = ({
  direction,
  daySpacing,
  ticks = [1, 3, 5],
- arrayOfWeekdays = [
- 'Sunday',
- 'Monday',
- 'Tuesday',
- 'Wednesday',
- 'Thursday',
- 'Friday',
- 'Saturday',
- ],
+ firstWeekday,
+ arrayOfWeekdays = shiftArray(
+ ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+ firstWeekday
+ ),
 }: ComputeWeekdays) => {
  const sizes = {
  width: cellWidth + daySpacing,
@@ -282,7 +326,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

@@ -1,5 +1,5 @@
 import { timeFormat } from 'd3-time-format'
-import { CalendarLegendProps } from './types'
+import { CalendarLegendProps, Weekday } from './types'
 import { CalendarTooltip } from './CalendarTooltip'
 
 const monthLabelFormat = timeFormat('%b')
@@ -52,4 +52,5 @@ export const timeRangeDefaultProps = {
  dayRadius: 0,
  square: true,
  weekdayLegendOffset: 75,
+ firstWeekday: Weekday.Sunday,
 } as const

packages/calendar/src/types.ts

@@ -192,6 +192,16 @@ export type TimeRangeTooltipProps = Omit<TimeRangeDayData, 'date' | 'value'> & {
  value: string
 }
 
+export enum Weekday {
+ Sunday,
+ Monday,
+ Tuesday,
+ Wednesday,
+ Thursday,
+ Friday,
+ Saturday,
+}
+
 export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial<
  Omit<CalendarData, 'data'>
  > &
@@ -212,6 +222,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

@@ -1,4 +1,4 @@
-import { timeRangeDefaultProps as defaults } from '@nivo/calendar'
+import { Weekday, timeRangeDefaultProps as defaults } from '@nivo/calendar'
 import { themeProperty, getLegendsProps, groupProperties } from '../../../lib/componentProperties'
 import { chartDimensions, isInteractive } from '../../../lib/chart-properties'
 import { ChartProperty, Flavor } from '../../../types'
@@ -215,6 +215,22 @@ const props: ChartProperty[] = [
  6 = Saturday\n
  `,
  },
+ {
+ key: 'firstWeekday',
+ help: 'define the first weekday: Weekday.Sunday (default), Weekday.Monday, etc.',
+ flavors: allFlavors,
+ type: 'Weekday',
+ required: false,
+ defaultValue: defaults.firstWeekday,
+ group: 'Weekday',
+ control: {
+ type: 'radio',
+ choices: [
+ { label: 'Sunday', value: String(Weekday.Sunday) },
+ { label: 'Monday', value: String(Weekday.Monday) },
+ ],
+ },
+ },
  // Days
  {
  key: 'square',

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ResponsiveTimeRange, timeRangeDefaultProps } from '@nivo/calendar'
+import { ResponsiveTimeRange, timeRangeDefaultProps, Weekday } from '@nivo/calendar'
 import { generateDayCounts } from '@nivo/generators'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/time-range/meta.yml'
@@ -36,6 +36,8 @@ const initialProperties = {
  monthLegendOffset: 10,
 
  weekdayLegendOffset: 75,
+ // String for radio to display active option.
+ firstWeekday: String(Weekday.Sunday),
 
  square: true,
  dayRadius: 0,