From 43181cced84706642f36204fe9d2a8354613cd0e Mon Sep 17 00:00:00 2001
From: Ville Kaivola <0x564b@protonmail.com>
Date: Tue, 6 Feb 2024 20:04:58 +0200
Subject: [PATCH] custom weekday labels for timerange

---
 packages/calendar/src/TimeRange.tsx             | 4 +++-
 packages/calendar/src/compute/timeRange.ts      | 5 +++--
 packages/calendar/src/props.ts                  | 9 +++++++++
 packages/calendar/src/types.ts                  | 1 +
 website/src/data/components/time-range/props.ts | 9 +++++++++
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/calendar/src/TimeRange.tsx b/packages/calendar/src/TimeRange.tsx
index 467208d117..bff56ba1d3 100644
--- a/packages/calendar/src/TimeRange.tsx
+++ b/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}
diff --git a/packages/calendar/src/compute/timeRange.ts b/packages/calendar/src/compute/timeRange.ts
index 7dfe7a3a1a..687a64e8a4 100644
--- a/packages/calendar/src/compute/timeRange.ts
+++ b/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,
diff --git a/packages/calendar/src/props.ts b/packages/calendar/src/props.ts
index 9c7d634806..58db9458df 100644
--- a/packages/calendar/src/props.ts
+++ b/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
diff --git a/packages/calendar/src/types.ts b/packages/calendar/src/types.ts
index 2843347278..031c72304b 100644
--- a/packages/calendar/src/types.ts
+++ b/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[]
             }
     >
 
diff --git a/website/src/data/components/time-range/props.ts b/website/src/data/components/time-range/props.ts
index 354583e688..34fc6f251d 100644
--- a/website/src/data/components/time-range/props.ts
+++ b/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',