Implement function of calendar

This commit is contained in:
Hristo Nedelkov 2023-09-18 12:28:27 +03:00
parent cee23d886e
commit 1b30b898a3
2 changed files with 3 additions and 5 deletions

View File

@ -6,8 +6,6 @@ import Icon from '../../../components/General/Icon'
const data: DataItem[] = [
{
// @NOTE: if you want to add name in the XAxis. You need to set the names here
// name: 'Jan',
pv: 1,
pa: 1,
},

View File

@ -79,8 +79,8 @@ const DeviceUptime = () => {
const [isCalendarVisible, setIsCalendarVisible] = useState(false)
const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined })
const [startMonth, endMonth] = getMonthIndicesFromRange(dateRange)
const filteredMonths = data.slice(startMonth, endMonth + 1)
console.log(startMonth, endMonth)
const handleRangeSelect = (
range: DateRange | undefined,
// @NOTE: You can take selectedDay: Date,
@ -106,7 +106,7 @@ const DeviceUptime = () => {
<XStack justifyContent={'space-between'}>
<YStack>
<Text size={15} weight={'semibold'}>
Balance
Device Uptime
</Text>
<XStack
style={{ alignItems: 'end' }}
@ -155,7 +155,7 @@ const DeviceUptime = () => {
</XStack>
<XStack height={'50%'} justifyContent="center" alignItems="center">
<Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '504px', height: '100%' }}>
<UptimeChart data={data} />
<UptimeChart data={filteredMonths} />
</Stack>
</XStack>
</YStack>