mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-13 03:46:39 +00:00
fix: format dashboard code
This commit is contained in:
RadoslavDimchev
parent
d174ec9256
commit
caa4fb813b
@ -41,7 +41,7 @@ const Dashboard = () => {
|
||||
</YStack>
|
||||
<YStack space={'$4'}>
|
||||
<XStack justifyContent="space-between">
|
||||
<StorageCard maxStorage={100} storage={82}></StorageCard>
|
||||
<StorageCard maxStorage={100} storage={82} />
|
||||
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
|
||||
</XStack>
|
||||
<XStack justifyContent="space-between">
|
||||
@ -49,7 +49,7 @@ const Dashboard = () => {
|
||||
downloadRate={[12, 31, 2, 12, 3, 23]}
|
||||
uploadRate={[31, 12, 3, 13, 3]}
|
||||
/>
|
||||
<MemoryCard currentMemory={[21,33,3,42,]} maxMemory={50} />
|
||||
<MemoryCard currentMemory={[21, 33, 3, 42]} maxMemory={50} />
|
||||
</XStack>
|
||||
</YStack>
|
||||
</XStack>
|
||||
|
||||
@ -1,166 +1,175 @@
|
||||
import { Calendar, Shadow, Text } from '@status-im/components';
|
||||
import { Stack, XStack, YStack } from 'tamagui';
|
||||
import UptimeChart from '../UptimeChart/UptimeChart';
|
||||
import Icon from '../../../components/General/Icon';
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Shadow, Text } from '@status-im/components'
|
||||
import { Stack, XStack, YStack } from 'tamagui'
|
||||
import { DateRange } from 'react-day-picker'
|
||||
import { getMonthIndicesFromRange } from '../../../utilities';
|
||||
import { useState } from 'react'
|
||||
|
||||
import UptimeChart from '../UptimeChart/UptimeChart'
|
||||
import Icon from '../../../components/General/Icon'
|
||||
import { getMonthIndicesFromRange } from '../../../utilities'
|
||||
|
||||
const data: DataItem[] = [
|
||||
{
|
||||
name: 'Jan',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Feb',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Mar',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Apr',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'May',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Jun',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Jul',
|
||||
pv: 1,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Sep',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Oct',
|
||||
pv: 0,
|
||||
pa: 0,
|
||||
},
|
||||
{
|
||||
name: 'Nov',
|
||||
pv: 1,
|
||||
pa: 1,
|
||||
},
|
||||
{
|
||||
name: 'Dec',
|
||||
pv: 1,
|
||||
pa: 1,
|
||||
},
|
||||
]
|
||||
|
||||
{
|
||||
name: 'Jan',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Feb',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Mar',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Apr',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'May',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Jun',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Jul',
|
||||
pv: 1,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Sep',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Oct',
|
||||
pv: 0,
|
||||
pa: 0
|
||||
},
|
||||
{
|
||||
name: 'Nov',
|
||||
pv: 1,
|
||||
pa: 1
|
||||
},
|
||||
{
|
||||
name: 'Dec',
|
||||
pv: 1,
|
||||
pa: 1
|
||||
},
|
||||
];
|
||||
interface DataItem {
|
||||
name?: string;
|
||||
pa: number;
|
||||
pv: number;
|
||||
type DataItem {
|
||||
name?: string
|
||||
pa: number
|
||||
pv: number
|
||||
}
|
||||
|
||||
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)
|
||||
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)
|
||||
|
||||
const handleRangeSelect = (
|
||||
range: DateRange | undefined,
|
||||
// @NOTE: You can take selectedDay: Date,
|
||||
) => {
|
||||
if (!range) {
|
||||
setDateRange({ from: undefined, to: undefined })
|
||||
return
|
||||
}
|
||||
setDateRange(range)
|
||||
if (range.from && range.to) {
|
||||
setIsCalendarVisible(false)
|
||||
}
|
||||
const handleRangeSelect = (
|
||||
range: DateRange | undefined,
|
||||
// @NOTE: You can take selectedDay: Date,
|
||||
) => {
|
||||
if (!range) {
|
||||
setDateRange({ from: undefined, to: undefined })
|
||||
return
|
||||
}
|
||||
setDateRange(range)
|
||||
if (range.from && range.to) {
|
||||
setIsCalendarVisible(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Shadow
|
||||
variant="$2"
|
||||
return (
|
||||
<Shadow
|
||||
variant="$2"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
}}
|
||||
>
|
||||
<YStack space={'$3'} width={'560px'} height={'156px'} padding={'$3'}>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack>
|
||||
<Text size={15} weight={'semibold'}>
|
||||
Device Uptime
|
||||
</Text>
|
||||
<XStack
|
||||
style={{ alignItems: 'end' }}
|
||||
space={'$1'}
|
||||
onClick={() => setIsCalendarVisible(true)}
|
||||
>
|
||||
<Text size={27} weight={'semibold'}>
|
||||
24,273
|
||||
</Text>
|
||||
<Text size={11} color="#23ADA0">
|
||||
1.56%
|
||||
</Text>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<XStack
|
||||
onClick={() => setIsCalendarVisible(prev => !prev)}
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
border: '2px solid #09101C14',
|
||||
height: 'fit-content',
|
||||
padding: '3px',
|
||||
borderRadius: '10px',
|
||||
}}
|
||||
>
|
||||
<YStack space={'$3'} width={'560px'} height={'156px'} padding={'$3'}>
|
||||
<XStack justifyContent={'space-between'}>
|
||||
<YStack>
|
||||
<Text size={15} weight={'semibold'}>
|
||||
Device Uptime
|
||||
</Text>
|
||||
<XStack
|
||||
style={{ alignItems: 'end' }}
|
||||
space={'$1'}
|
||||
onClick={() => setIsCalendarVisible(true)}
|
||||
>
|
||||
<Text size={27} weight={'semibold'}>
|
||||
24,273
|
||||
</Text>
|
||||
<Text size={11} color="#23ADA0">
|
||||
1.56%
|
||||
</Text>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<XStack
|
||||
onClick={() => setIsCalendarVisible(prev => !prev)}
|
||||
style={{
|
||||
border: '2px solid #09101C14',
|
||||
height: 'fit-content',
|
||||
padding: '3px',
|
||||
borderRadius: '10px',
|
||||
}}
|
||||
>
|
||||
<Text size={13} weight={'semibold'}>
|
||||
{dateRange?.from ? dateRange.from.toLocaleDateString() + ' ->' : 'Start Date -> '}{' '}
|
||||
</Text>
|
||||
<Text size={13} weight={'semibold'}>
|
||||
{dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}
|
||||
</Text>
|
||||
<Icon src="/icons/edit.svg" />
|
||||
</XStack>
|
||||
{isCalendarVisible && (
|
||||
<Calendar
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
top: '100%',
|
||||
right: '0',
|
||||
}}
|
||||
mode="range"
|
||||
selected={dateRange}
|
||||
onSelect={handleRangeSelect}
|
||||
/>
|
||||
)}
|
||||
</XStack>
|
||||
<XStack height={'50%'} justifyContent="center" alignItems="center">
|
||||
<Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '504px', height: '100%' }}>
|
||||
<UptimeChart data={filteredMonths} />
|
||||
</Stack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
|
||||
</Shadow >
|
||||
);
|
||||
>
|
||||
<Text size={13} weight={'semibold'}>
|
||||
{dateRange?.from ? dateRange.from.toLocaleDateString() + ' ->' : 'Start Date -> '}{' '}
|
||||
</Text>
|
||||
<Text size={13} weight={'semibold'}>
|
||||
{dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}
|
||||
</Text>
|
||||
<Icon src="/icons/edit.svg" />
|
||||
</XStack>
|
||||
{isCalendarVisible && (
|
||||
<Calendar
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
top: '100%',
|
||||
right: '0',
|
||||
}}
|
||||
mode="range"
|
||||
selected={dateRange}
|
||||
onSelect={handleRangeSelect}
|
||||
/>
|
||||
)}
|
||||
</XStack>
|
||||
<XStack height={'50%'} justifyContent="center" alignItems="center">
|
||||
<Stack
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '504px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<UptimeChart data={filteredMonths} />
|
||||
</Stack>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</Shadow>
|
||||
)
|
||||
}
|
||||
export default DeviceUptime;
|
||||
|
||||
export default DeviceUptime
|
||||
|
||||
@ -1,89 +1,91 @@
|
||||
import StandartLineChart from '../../../components/Charts/StandardLineChart'
|
||||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import { Shadow as ShadowBox, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
|
||||
import StandartLineChart from '../../../components/Charts/StandardLineChart'
|
||||
import IconText from '../../../components/General/IconText'
|
||||
|
||||
type DataPoint = {
|
||||
x: number
|
||||
y: number
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
type ChartData = {
|
||||
id: string
|
||||
color: string
|
||||
data: DataPoint[]
|
||||
maxValue?: number
|
||||
id: string
|
||||
color: string
|
||||
data: DataPoint[]
|
||||
maxValue?: number
|
||||
}
|
||||
|
||||
type MemoryCardProps = {
|
||||
currentMemory: number[]
|
||||
maxMemory: number
|
||||
currentMemory: number[]
|
||||
maxMemory: number
|
||||
}
|
||||
|
||||
const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
|
||||
const chartData: ChartData[] = [
|
||||
{
|
||||
id: 'cpu',
|
||||
color: '#8DC6BC',
|
||||
data: currentMemory.map((yValue, index: number) => ({
|
||||
x: index + 1,
|
||||
y: yValue,
|
||||
})),
|
||||
maxValue: maxMemory,
|
||||
},
|
||||
]
|
||||
const currentLoad =
|
||||
chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
|
||||
const chartData: ChartData[] = [
|
||||
{
|
||||
id: 'cpu',
|
||||
color: '#8DC6BC',
|
||||
data: currentMemory.map((yValue, index: number) => ({
|
||||
x: index + 1,
|
||||
y: yValue,
|
||||
})),
|
||||
maxValue: maxMemory,
|
||||
},
|
||||
]
|
||||
const currentLoad =
|
||||
chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
|
||||
|
||||
const message = currentLoad < maxMemory ? 'Good' : 'Poor'
|
||||
const message = currentLoad < maxMemory ? 'Good' : 'Poor'
|
||||
|
||||
return (
|
||||
<ShadowBox
|
||||
variant="$2"
|
||||
style={{
|
||||
width: '284px',
|
||||
height: '136px',
|
||||
borderRadius: '16px',
|
||||
border: message === 'Poor' ? '1px solid #D92344' : 'none',
|
||||
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
|
||||
}}
|
||||
return (
|
||||
<ShadowBox
|
||||
variant="$2"
|
||||
style={{
|
||||
width: '284px',
|
||||
height: '136px',
|
||||
borderRadius: '16px',
|
||||
border: message === 'Poor' ? '1px solid #D92344' : 'none',
|
||||
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
|
||||
}}
|
||||
>
|
||||
<YStack>
|
||||
<XStack
|
||||
justifyContent="space-between"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<YStack>
|
||||
<XStack
|
||||
justifyContent="space-between"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
|
||||
<StandartLineChart data={chartData} />
|
||||
</div>
|
||||
<YStack space={'$3'}>
|
||||
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
|
||||
Memory
|
||||
</Paragraph>
|
||||
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
|
||||
{currentLoad} GB
|
||||
</Paragraph>
|
||||
</YStack>
|
||||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
>
|
||||
{message}
|
||||
</IconText>
|
||||
{message === 'Poor' && (
|
||||
<Text size={13} color="#E95460">
|
||||
{((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
|
||||
</Text>
|
||||
)}
|
||||
</XStack>
|
||||
</YStack>
|
||||
</ShadowBox>
|
||||
)
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
|
||||
<StandartLineChart data={chartData} />
|
||||
</div>
|
||||
<YStack space={'$3'}>
|
||||
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
|
||||
Memory
|
||||
</Paragraph>
|
||||
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
|
||||
{currentLoad} GB
|
||||
</Paragraph>
|
||||
</YStack>
|
||||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
>
|
||||
{message}
|
||||
</IconText>
|
||||
{message === 'Poor' && (
|
||||
<Text size={13} color="#E95460">
|
||||
{((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
|
||||
</Text>
|
||||
)}
|
||||
</XStack>
|
||||
</YStack>
|
||||
</ShadowBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default MemoryCard
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
|
||||
import { Shadow as ShadowBox, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
|
||||
import StandartLineChart from '../../../components/Charts/StandardLineChart'
|
||||
import IconText from '../../../components/General/IconText'
|
||||
|
||||
@ -20,6 +20,7 @@ type NetworkCardProps = {
|
||||
uploadRate: number[]
|
||||
downloadRate: number[]
|
||||
}
|
||||
|
||||
const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
|
||||
const chartData: ChartData[] = [
|
||||
{
|
||||
@ -39,6 +40,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
const currentLoad =
|
||||
chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
|
||||
|
||||
@ -55,7 +57,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
|
||||
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
|
||||
}}
|
||||
>
|
||||
<YStack >
|
||||
<YStack>
|
||||
<XStack
|
||||
justifyContent="space-between"
|
||||
style={{
|
||||
@ -67,16 +69,19 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
|
||||
<StandartLineChart data={chartData} />
|
||||
</div>
|
||||
<YStack space={'$3'} width={'100%'}>
|
||||
<XStack justifyContent='space-between' width={'100%'}>
|
||||
<XStack justifyContent="space-between" width={'100%'}>
|
||||
<Stack>
|
||||
|
||||
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
|
||||
Network
|
||||
</Paragraph>
|
||||
</Stack>
|
||||
<YStack>
|
||||
<Text size={11} weight={'semibold'}>Uptime</Text>
|
||||
<Text size={11} weight={'medium'}>23:20:02</Text>
|
||||
<Text size={11} weight={'semibold'}>
|
||||
Uptime
|
||||
</Text>
|
||||
<Text size={11} weight={'medium'}>
|
||||
23:20:02
|
||||
</Text>
|
||||
</YStack>
|
||||
</XStack>
|
||||
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
|
||||
@ -97,8 +102,8 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
|
||||
</Text>
|
||||
)}
|
||||
</XStack>
|
||||
</YStack >
|
||||
</ShadowBox >
|
||||
</YStack>
|
||||
</ShadowBox>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user