This commit is contained in:
Hristo Nedelkov 2023-10-17 14:47:19 +03:00
parent 7f4aaed759
commit aeca7ecfec
9 changed files with 65 additions and 69 deletions

View File

@ -95,9 +95,7 @@ const BalanceChartCard = () => {
</XStack> </XStack>
</XStack> </XStack>
<LineChart years={filteredYears} userGains={filteredUserGains} /> <LineChart years={filteredYears} userGains={filteredUserGains} />
</YStack> </YStack>
</DashboardCardWrapper> </DashboardCardWrapper>
) )

View File

@ -32,17 +32,15 @@ const LineChart = ({ years, userGains }: LineChartProps) => {
], ],
} }
const options = { const options = {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
} }
return ( return (
<Stack > <Stack>
<Line data={data} options={options} /> <Line data={data} options={options} />
</Stack> </Stack>
) )
} }
export default LineChart export default LineChart

View File

@ -14,7 +14,7 @@ const ConsensusUptimeCard = () => {
width: '48%', width: '48%',
}} }}
> >
<YStack space={'$3'} minHeight={'156px'} padding={'$3'}> <YStack space={'$3'} minHeight={'156px'} padding={'$3'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
Consensus Uptime Consensus Uptime

View File

@ -10,6 +10,6 @@ const Dashboard = () => (
<DashboardContent /> <DashboardContent />
<RightSidebar /> <RightSidebar />
</XStack> </XStack>
); )
export default Dashboard export default Dashboard

View File

@ -35,4 +35,4 @@ const DashboardCardWrapper = ({
</Shadow> </Shadow>
) )
} }
export default DashboardCardWrapper export default DashboardCardWrapper

View File

@ -1,63 +1,63 @@
import { XStack, YStack } from 'tamagui'; import { XStack, YStack } from 'tamagui'
import BasicInfoCards from './BasicInfoCards/BasicInfoCards'; import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'; import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
import BalanceChartCard from './BalanceChartCard/BalanceChartCard'; import BalanceChartCard from './BalanceChartCard/BalanceChartCard'
import CPUCard from './CPULoad/CPUCard'; import CPUCard from './CPULoad/CPUCard'
import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard'; import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard'
import ExecutionUptime from './ExecutionUptime/ExecutionUptime'; import ExecutionUptime from './ExecutionUptime/ExecutionUptime'
import DeviceUptime from './DeviceUptime/DeviceUptime'; import DeviceUptime from './DeviceUptime/DeviceUptime'
import TitleLogo from './TitleLogo'; import TitleLogo from './TitleLogo'
import StorageCard from './StorageCard/StorageCard'; import StorageCard from './StorageCard/StorageCard'
import NetworkCard from './NetworkCard/NetworkCard'; import NetworkCard from './NetworkCard/NetworkCard'
import SyncStatusCard from './SyncStatusCards/SyncStatusCards'; import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
import MemoryCard from './MemoryCard/MemoryCard'; import MemoryCard from './MemoryCard/MemoryCard'
const DashboardContent = () => ( const DashboardContent = () => (
<YStack <YStack
space="$4" space="$4"
alignItems="start" alignItems="start"
px="24px" px="24px"
style={{ style={{
flexGrow: '1', flexGrow: '1',
marginTop: '16px', marginTop: '16px',
width: '50%', width: '50%',
overflowY: 'auto', overflowY: 'auto',
maxHeight: '100vh' maxHeight: '100vh',
}} }}
minWidth="500px" minWidth="500px"
> >
<TitleLogo /> <TitleLogo />
<XStack space="$4" flexWrap="wrap"> <XStack space="$4" flexWrap="wrap">
<XStack space="$4" flexWrap="wrap"> <XStack space="$4" flexWrap="wrap">
<SyncStatusCard /> <SyncStatusCard />
<AddCardsContainer /> <AddCardsContainer />
</XStack> </XStack>
<BalanceChartCard /> <BalanceChartCard />
</XStack>
<BasicInfoCards />
<XStack space="$3" flexWrap="wrap">
<YStack space={'$4'} flexWrap="wrap">
<XStack justifyContent="space-between" flexWrap="wrap">
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack> </XStack>
<BasicInfoCards /> <DeviceUptime />
<XStack space="$3" flexWrap="wrap" > </YStack>
<YStack space={'$4'} flexWrap="wrap"> <YStack space={'$4'} flexWrap="wrap">
<XStack justifyContent="space-between" flexWrap="wrap"> <XStack space="$4">
<ConsensusUptimeCard /> <StorageCard maxStorage={100} storage={82} />
<ExecutionUptime /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$4'} flexWrap="wrap">
<XStack space="$4">
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<XStack space="$4" >
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</XStack>
</YStack>
</XStack> </XStack>
</YStack> <XStack space="$4">
); <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
export default DashboardContent <NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</XStack>
</YStack>
</XStack>
</YStack>
)
export default DashboardContent

View File

@ -15,7 +15,7 @@ const ExecutionUptime = () => {
}} }}
> >
<YStack space={'$3'} width={'100%'} minHeight={'156px'} padding={'$3'}> <YStack space={'$3'} width={'100%'} minHeight={'156px'} padding={'$3'}>
<YStack > <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
Execution Uptime Execution Uptime
</Text> </Text>

View File

@ -19,7 +19,7 @@ const RightSidebar = () => {
padding: '8px', padding: '8px',
border: '1px solid #F0F2F5', border: '1px solid #F0F2F5',
height: '100vh', height: '100vh',
overflowY: 'auto' overflowY: 'auto',
}} }}
> >
<XStack alignItems="center"> <XStack alignItems="center">

View File

@ -7,7 +7,7 @@ import ConsensusCard from './ConsensusClientCard'
const SyncStatusCard = () => { const SyncStatusCard = () => {
return ( return (
<DashboardCardWrapper padding="0" > <DashboardCardWrapper padding="0">
<YStack space={'$2'}> <YStack space={'$2'}>
<Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}> <Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>