diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index f4fbda4f..c37864a2 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -41,7 +41,7 @@ const Dashboard = () => {
-
+
@@ -49,7 +49,7 @@ const Dashboard = () => {
downloadRate={[12, 31, 2, 12, 3, 23]}
uploadRate={[31, 12, 3, 13, 3]}
/>
-
+
diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index 424c2061..705f078c 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@@ -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({ 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({ 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 (
-
+
+
+
+
+ Device Uptime
+
+ setIsCalendarVisible(true)}
+ >
+
+ 24,273
+
+
+ 1.56%
+
+
+
+ setIsCalendarVisible(prev => !prev)}
style={{
- borderRadius: '16px',
+ border: '2px solid #09101C14',
+ height: 'fit-content',
+ padding: '3px',
+ borderRadius: '10px',
}}
- >
-
-
-
-
- Device Uptime
-
- setIsCalendarVisible(true)}
- >
-
- 24,273
-
-
- 1.56%
-
-
-
- setIsCalendarVisible(prev => !prev)}
- style={{
- border: '2px solid #09101C14',
- height: 'fit-content',
- padding: '3px',
- borderRadius: '10px',
- }}
- >
-
- {dateRange?.from ? dateRange.from.toLocaleDateString() + ' ->' : 'Start Date -> '}{' '}
-
-
- {dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}
-
-
-
- {isCalendarVisible && (
-
- )}
-
-
-
-
-
-
-
-
-
- );
+ >
+
+ {dateRange?.from ? dateRange.from.toLocaleDateString() + ' ->' : 'Start Date -> '}{' '}
+
+
+ {dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}
+
+
+
+ {isCalendarVisible && (
+
+ )}
+
+
+
+
+
+
+
+
+ )
}
-export default DeviceUptime;
\ No newline at end of file
+
+export default DeviceUptime
diff --git a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
index bf157c61..e6b9d206 100644
--- a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
+++ b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
@@ -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 (
-
+
+
-
-
-
-
-
-
-
- Memory
-
-
- {currentLoad} GB
-
-
-
-
-
- : }
- >
- {message}
-
- {message === 'Poor' && (
-
- {((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
-
- )}
-
-
-
- )
+
+
+
+
+
+ Memory
+
+
+ {currentLoad} GB
+
+
+
+
+
+ : }
+ >
+ {message}
+
+ {message === 'Poor' && (
+
+ {((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
+
+ )}
+
+
+
+ )
}
export default MemoryCard
diff --git a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
index 60cd0834..eae40b6f 100644
--- a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
+++ b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
@@ -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',
}}
>
-
+
{
-
+
-
Network
- Uptime
- 23:20:02
+
+ Uptime
+
+
+ 23:20:02
+
@@ -97,8 +102,8 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
)}
-
-
+
+
)
}