Merge pull request #38 from status-im/hn.device-memory-health

feat: Memory Health Card

src/components/DeviceMemoryHealth.tsx

@@ -0,0 +1,74 @@
+import StandartLineChart from './StandardLineChart'
+
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox } from '@status-im/components'
+
+type DataPoint = {
+  x: number
+  y: number
+}
+
+type ChartData = {
+  id: string
+  color: string
+  data: DataPoint[]
+  maxValue?: number
+}
+
+type DeviceMemoryProps = {
+  currentMemory: number[]
+  maxMemory?: number
+}
+const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
+  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 < 80 ? 'Good' : 'Poor'
+
+  return (
+    <ShadowBox style={{ width: '284px', height: '136px' }}>
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative', // Make XStack a positioning context
+          }}
+        >
+          <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' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+            {message}
+          </IconText>
+          {/* <Text color={'#E95460'}>This is additional text</Text>  */}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  )
+}
+
+export default DeviceMemory

src/components/DeviceNetworkHealth.tsx

@@ -1,7 +1,8 @@
 import StandartLineChart from './StandardLineChart'
-import ShadowBox from './ShadowBox'
+
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -43,7 +44,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <ShadowBox style={{ width: '284px', height: '136px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"

src/components/LandingPage.tsx

@@ -1,6 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
+import DeviceMemory from './DeviceMemoryHealth'
 import DeviceNetworkHealth from './DeviceNetworkHealth'
 
 function LandingPage() {
@@ -15,6 +16,7 @@ function LandingPage() {
 function Content() {
   return (
     <div className="container-inner landing-page">
+      <DeviceMemory currentMemory={[12, 24, 14, 12, 4, 60]} maxMemory={65} />
       <header>
         <div>
           <div>

src/components/StandardLineChart.tsx

@@ -8,12 +8,14 @@ interface ChartData {
   id: string
   color: string
   data: DataPoint[]
+  maxValue?: number
 }
 
 interface StandartLineChartProps {
   data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
+  const maxMemory = data[0].maxValue || 'auto'
   const colors = data.map(dataset => dataset.color)
 
   return (
@@ -23,9 +25,9 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
       xScale={{ type: 'linear', min: 0, max: data[0].data.length }}
       yScale={{
         type: 'linear',
-        min: 'auto',
-        max: 'auto',
-        stacked: false,
+        min: 0,
+        max: maxMemory,
+        stacked: true,
         reverse: false,
       }}
       axisTop={null}