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[] = [ const data: DataItem[] = [
{ {
// @NOTE: if you want to add name in the XAxis. You need to set the names here
// name: 'Jan',
pv: 1, pv: 1,
pa: 1, pa: 1,
}, },

View File

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