feat(timerange): custom weekday labels for TimeRange

packages/calendar/src/TimeRange.tsx

@@ -38,6 +38,7 @@ const InnerTimeRange = ({
 
     weekdayLegendOffset = timeRangeDefaultProps.weekdayLegendOffset,
     weekdayTicks,
+    weekdays = timeRangeDefaultProps.weekdays,
 
     dayBorderColor = timeRangeDefaultProps.dayBorderColor,
     dayBorderWidth = timeRangeDefaultProps.dayBorderWidth,
@@ -121,6 +122,7 @@ const InnerTimeRange = ({
         daySpacing,
         ticks: weekdayTicks,
         firstWeekday,
+        arrayOfWeekdays: weekdays,
     })
 
     const monthLegends = useMonthLegends({
@@ -137,7 +139,7 @@ const InnerTimeRange = ({
         <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} role={role}>
             {weekdayLegends.map(legend => (
                 <text
-                    key={legend.value}
+                    key={`${legend.value}-${legend.x}-${legend.y}`}
                     transform={`translate(${legend.x},${legend.y}) rotate(${legend.rotation})`}
                     textAnchor="left"
                     style={theme.labels.text}

packages/calendar/src/compute/timeRange.ts

@@ -303,14 +303,15 @@ export const computeWeekdays = ({
     daySpacing,
     ticks = [1, 3, 5],
     firstWeekday,
-    arrayOfWeekdays = shiftArray(ARRAY_OF_WEEKDAYS, getFirstWeekdayIndex(firstWeekday)),
+    arrayOfWeekdays = ARRAY_OF_WEEKDAYS,
 }: ComputeWeekdays) => {
     const sizes = {
         width: cellWidth + daySpacing,
         height: cellHeight + daySpacing,
     }
+    const shiftedWeekdays = shiftArray(arrayOfWeekdays, getFirstWeekdayIndex(firstWeekday))
     return ticks.map(day => ({
-        value: arrayOfWeekdays[day],
+        value: shiftedWeekdays[day],
         rotation: direction === 'horizontal' ? 0 : -90,
         y: direction === 'horizontal' ? sizes.height * (day + 1) - sizes.height / 3 : 0,
         x: direction === 'horizontal' ? 0 : sizes.width * (day + 1) - sizes.width / 3,

packages/calendar/src/props.ts

@@ -53,4 +53,13 @@ export const timeRangeDefaultProps = {
     square: true,
     weekdayLegendOffset: 75,
     firstWeekday: 'sunday',
+    weekdays: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+    ] as string[],
 } as const

packages/calendar/src/types.ts

@@ -222,6 +222,7 @@ export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial
                 weekdayLegendOffset: number
                 weekdayTicks: Array<0 | 1 | 2 | 3 | 4 | 5 | 6>
                 firstWeekday: Weekday
+                weekdays: string[]
             }
     >
 

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

@@ -196,6 +196,15 @@ const props: ChartProperty[] = [
             max: 100,
         },
     },
+    {
+        key: 'weekdays',
+        help: 'define labels for weekdays',
+        flavors: allFlavors,
+        type: 'Array<string>',
+        required: false,
+        defaultValue: defaults.weekdays,
+        group: 'Weekday',
+    },
     {
         key: 'weekdayTicks',
         help: 'define weekday tickmarks to show',