mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-23 08:38:11 +00:00
Implement function of calendar
This commit is contained in:
parent
cee23d886e
commit
1b30b898a3
@ -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,
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user