feat(calendar): expose weekdayTicks prop on TimeRange component (#1634)

plouc · Jun 28, 2021 · efafa01 · efafa01
1 parent f04e9ea
commit efafa01
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git a/packages/calendar/src/TimeRange.tsx b/packages/calendar/src/TimeRange.tsx
@@ -36,6 +36,7 @@ const InnerTimeRange = ({
     monthLegendPosition = timeRangeDefaultProps.monthLegendPosition,
 
     weekdayLegendOffset = timeRangeDefaultProps.weekdayLegendOffset,
+    weekdayTicks,
 
     dayBorderColor = timeRangeDefaultProps.dayBorderColor,
     dayBorderWidth = timeRangeDefaultProps.dayBorderWidth,
@@ -105,6 +106,7 @@ const InnerTimeRange = ({
         cellHeight,
         cellWidth,
         daySpacing,
+        ticks: weekdayTicks,
     })
 
     const monthLegends = useMonthLegends({

diff --git a/packages/calendar/src/types.ts b/packages/calendar/src/types.ts
@@ -209,6 +209,7 @@ export type TimeRangeSvgProps = Dimensions & { data: CalendarDatum[] } & Partial
                 square: boolean
                 role: string
                 weekdayLegendOffset: number
+                weekdayTicks: Array<0 | 1 | 2 | 3 | 4 | 5 | 6>
             }
     >
 

diff --git a/packages/calendar/stories/timeRange.stories.tsx b/packages/calendar/stories/timeRange.stories.tsx
@@ -70,6 +70,7 @@ stories.add('responsive', () => {
                         translateY: -30,
                     },
                 ]}
+                weekdayTicks={[]} // hide weekday tickmarks
                 {...{
                     dayRadius: number('dayRadius', 5),
                     formatValue: value => value,
@@ -96,7 +97,7 @@ stories.add('TimeRange vertical', () => {
             {...{
                 dayRadius: 5,
                 margin: {
-                    top: number('margin-top', 40),
+                    top: number('margin-top', 48),
                     right: number('margin-right', 40),
                     bottom: number('margin-bottom', 40),
                     left: number('margin-left', 40),
@@ -105,6 +106,7 @@ stories.add('TimeRange vertical', () => {
                 daySpacing: number('daySpacing', 10),
             }}
             weekdayLegendOffset={0}
+            weekdayTicks={[0, 2, 4, 6]} // custom weekday tickmarks
             height={number('height', 900)}
             width={number('width', 250)}
             direction="vertical"

diff --git a/website/src/data/components/time-range/props.js b/website/src/data/components/time-range/props.js
@@ -29,20 +29,6 @@ const props = [
         type: 'object[]',
         required: true,
     },
-    {
-        key: 'from',
-        group: 'Base',
-        help: 'start date',
-        type: 'string | Date',
-        required: true,
-    },
-    {
-        key: 'to',
-        group: 'Base',
-        help: 'end date',
-        type: 'string | Date',
-        required: true,
-    },
     {
         key: 'width',
         enableControlForFlavors: ['api'],
@@ -228,6 +214,24 @@ const props = [
             max: 100,
         },
     },
+    {
+        key: 'weekdayTicks',
+        help: 'define weekday tickmarks to show',
+        type: 'Array<0 | 1 | 2 | 3 | 4 | 5 | 6>',
+        required: false,
+        defaultValue: [1, 3, 5],
+        group: 'Weekday',
+        description: `
+            Array of weekday tickmarks to display:\n
+            0 = Sunday\n
+            1 = Monday\n
+            2 = Tuesday\n
+            3 = Wednesday\n
+            4 = Thursday\n
+            5 = Friday\n
+            6 = Saturday\n
+        `,
+    },
     // Days
     {
         key: 'square',