nivo
nivo copied to clipboard
TimeRange Chart firstWeekday is Sunday instead of Monday
Describe/explain the bug
In @nivo/calendar
version 0.83, I'm encountering a problem where the first day of the week doesn't display correctly if set to a day other than Sunday using the firstWeekday
prop. Regardless of what I pass to the firstWeekday
prop, the dates are always starting from Sunday in the UI (refer to the code snippet and screenshots).
<ResponsiveTimeRange
data={data}
to={today}
emptyColor={colors.GRAY_4}
colors={legendColor}
margin={{
top: 18, right: 0, bottom: 0, left: 0,
}}
firstWeekday="monday"
weekdayTicks={[0, 1, 2, 3, 4, 5, 6]}
weekdayLegendOffset={40}
tooltip={(event) => (
<TimeRangeTooltip
event={event}
dailyInteractionCount={dailyInteractions[event.day]}
/>
)}
onClick={({ date }) => onTimeRangeClick(date)}
/>
[
{
"day": "2023-05-21",
"value": 1
},
{
"day": "2023-05-22",
"value": 66
},
{
"day": "2023-05-23",
"value": 102
},
{
"day": "2023-05-24",
"value": 35
},
{
"day": "2023-05-25",
"value": 23
},
{
"day": "2023-05-26",
"value": 5
},
{
"day": "2023-05-27",
"value": 1
},
{
"day": "2023-05-28",
"value": 69
},
{
"day": "2023-05-29",
"value": 44
},
{
"day": "2023-05-30",
"value": 78
},
{
"day": "2023-05-31",
"value": 31
},
{
"day": "2023-06-01",
"value": 147
},
{
"day": "2023-06-02",
"value": 6
},
{
"day": "2023-06-03",
"value": 0
},
{
"day": "2023-06-04",
"value": 76
},
{
"day": "2023-06-05",
"value": 28
},
{
"day": "2023-06-06",
"value": 12
},
{
"day": "2023-06-07",
"value": 43
},
{
"day": "2023-06-08",
"value": 17
},
{
"day": "2023-06-09",
"value": 0
},
{
"day": "2023-06-10",
"value": 0
},
{
"day": "2023-06-11",
"value": 93
},
{
"day": "2023-06-12",
"value": 40
},
{
"day": "2023-06-13",
"value": 64
},
{
"day": "2023-06-14",
"value": 65
},
{
"day": "2023-06-15",
"value": 77
},
{
"day": "2023-06-16",
"value": 6
},
{
"day": "2023-06-17",
"value": 0
},
{
"day": "2023-06-18",
"value": 179
},
{
"day": "2023-06-19",
"value": 73
},
{
"day": "2023-06-20",
"value": 16
},
{
"day": "2023-06-21",
"value": 3
},
{
"day": "2023-06-22",
"value": 18
},
{
"day": "2023-06-23",
"value": 8
},
{
"day": "2023-06-24",
"value": 2
},
{
"day": "2023-06-25",
"value": 29
},
{
"day": "2023-06-26",
"value": 68
},
{
"day": "2023-06-27",
"value": 60
},
{
"day": "2023-06-28",
"value": 106
},
{
"day": "2023-06-29",
"value": 40
},
{
"day": "2023-06-30",
"value": 18
},
{
"day": "2023-07-01",
"value": 1
},
{
"day": "2023-07-02",
"value": 22
},
{
"day": "2023-07-03",
"value": 64
},
{
"day": "2023-07-04",
"value": 146
},
{
"day": "2023-07-05",
"value": 202
},
{
"day": "2023-07-06",
"value": 133
},
{
"day": "2023-07-07",
"value": 54
},
{
"day": "2023-07-08",
"value": 1
},
{
"day": "2023-07-09",
"value": 47
},
{
"day": "2023-07-10",
"value": 151
},
{
"day": "2023-07-11",
"value": 174
},
{
"day": "2023-07-12",
"value": 149
},
{
"day": "2023-07-13",
"value": 28
},
{
"day": "2023-07-14",
"value": 3
},
{
"day": "2023-07-15",
"value": 2
},
{
"day": "2023-07-16",
"value": 11
},
{
"day": "2023-07-17",
"value": 99
},
{
"day": "2023-07-18",
"value": 124
},
{
"day": "2023-07-19",
"value": 93
},
{
"day": "2023-07-20",
"value": 119
},
{
"day": "2023-07-21",
"value": 80
},
{
"day": "2023-07-22",
"value": 4
},
{
"day": "2023-07-23",
"value": 18
},
{
"day": "2023-07-24",
"value": 41
},
{
"day": "2023-07-25",
"value": 42
},
{
"day": "2023-07-26",
"value": 38
},
{
"day": "2023-07-27",
"value": 67
},
{
"day": "2023-07-28",
"value": 107
},
{
"day": "2023-07-29",
"value": 101
},
{
"day": "2023-07-30",
"value": 56
},
{
"day": "2023-07-31",
"value": 223
},
{
"day": "2023-08-01",
"value": 66
},
{
"day": "2023-08-02",
"value": 100
},
{
"day": "2023-08-03",
"value": 234
},
{
"day": "2023-08-04",
"value": 201
},
{
"day": "2023-08-05",
"value": 34
},
{
"day": "2023-08-06",
"value": 56
},
{
"day": "2023-08-07",
"value": 305
},
{
"day": "2023-08-08",
"value": 35
},
{
"day": "2023-08-09",
"value": 12
},
{
"day": "2023-08-10",
"value": 15
},
{
"day": "2023-08-11",
"value": 4
},
{
"day": "2023-08-12",
"value": 0
},
{
"day": "2023-08-13",
"value": 19
},
{
"day": "2023-08-14",
"value": 11
},
{
"day": "2023-08-15",
"value": 15
},
{
"day": "2023-08-16",
"value": 93
},
{
"day": "2023-08-17",
"value": 100
},
{
"day": "2023-08-18",
"value": 60
},
{
"day": "2023-08-19",
"value": 0
},
{
"day": "2023-08-20",
"value": 0
},
{
"day": "2023-08-21",
"value": 0
}
]
Expected behavior The data for the initial date (top tick) should display as Monday, yet it's currently showing as Sunday.
Screenshots
Desktop (please complete the following information):
- OS: macOS Ventura 13.5
- Browser Chrome
- Version 115.0.5790.170 (Official Build) (x86_64)
Potentially related to the bug described in #2419?
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!