status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-15 04:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: format dashboard code

Browse Source
This commit is contained in:
RadoslavDimchev 2023-09-18 19:43:10 +03:00
parent d174ec9256
commit caa4fb813b
4 changed files with 248 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Dashboard/Dashboard.tsx
View File

@ -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>

67
src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
View File

@ -1,78 +1,79 @@
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
pa: 0,
},
{
name: 'Feb',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Mar',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Apr',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'May',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Aug',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Jun',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Jul',
pv: 1,
pa: 0
pa: 0,
},
{
name: 'Sep',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Oct',
pv: 0,
pa: 0
pa: 0,
},
{
name: 'Nov',
pv: 1,
pa: 1
pa: 1,
},
{
name: 'Dec',
pv: 1,
pa: 1
pa: 1,
},
];
interface DataItem {
name?: string;
pa: number;
pv: number;
]
type DataItem {
name?: string
pa: number
pv: number
}
const DeviceUptime = () => {
@ -154,13 +155,21 @@ const DeviceUptime = () => {
)}
</XStack>
<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={filteredMonths} />
</Stack>
</XStack>
</YStack>
</Shadow >
);
</Shadow>
)
}
export default DeviceUptime;
export default DeviceUptime

4
src/pages/Dashboard/MemoryCard/MemoryCard.tsx
View File

@ -1,7 +1,8 @@
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 = {
@ -20,6 +21,7 @@ type MemoryCardProps = {
currentMemory: number[]
maxMemory: number
}
const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
const chartData: ChartData[] = [
{

21
src/pages/Dashboard/NetworkCard/NetworkCard.tsx
View File

@ -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>
)
}