Merge pull request #40 from status-im/hn.NetworkHealth

feat: Network Health card

src/components/DeviceNetworkHealth.tsx

@@ -0,0 +1,79 @@
+import StandartLineChart from './StandardLineChart'
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+
+type DataPoint = {
+  x: number
+  y: number
+}
+
+type ChartData = {
+  id: string
+  color: string
+  data: DataPoint[]
+}
+
+type DeviceNetworkHealthProps = {
+  uploadRate: number[]
+  downloadRate: number[]
+}
+const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthProps) => {
+  const chartData: ChartData[] = [
+    {
+      id: 'uploadRate',
+      color: '#8DC6BC',
+      data: uploadRate.map((yValue, index: number) => ({
+        x: index + 1,
+        y: yValue,
+      })),
+    },
+    {
+      id: 'downloadRate',
+      color: '#D92344',
+      data: downloadRate.map((yValue, index: number) => ({
+        x: index + 1,
+        y: yValue,
+      })),
+    },
+  ]
+  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 boxStyle={{ 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'}>
+              Network
+            </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 DeviceNetworkHealth

src/components/LandingPage.tsx

@@ -1,6 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
+import DeviceNetworkHealth from './DeviceNetworkHealth'
 
 function LandingPage() {
   return (
@@ -95,6 +96,10 @@ function Content() {
           Discover Nodes
         </button>
       </article>
+      <DeviceNetworkHealth
+        uploadRate={[6, 63, 123, 59, 12, 6, 63, 123, 59, 12]}
+        downloadRate={[123, 56, 90, 10, 50, 123, 56, 90, 130, 40]}
+      />
     </div>
   )
 }

src/components/StandardLineChart.tsx

@@ -6,6 +6,7 @@ interface DataPoint {
 
 interface ChartData {
   id: string
+  color: string
   data: DataPoint[]
 }
 
@@ -13,6 +14,8 @@ interface StandartLineChartProps {
   data: ChartData[]
 }
 const StandartLineChart = ({ data }: StandartLineChartProps) => {
+  const colors = data.map(dataset => dataset.color)
+
   return (
     <ResponsiveLine
       data={data}
@@ -22,7 +25,7 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
         type: 'linear',
         min: 'auto',
         max: 'auto',
-        stacked: true,
+        stacked: false,
         reverse: false,
       }}
       axisTop={null}
@@ -32,14 +35,11 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
       enableGridX={false}
       enableGridY={false}
       enablePoints={false}
-      pointSize={1}
-      pointColor={{ theme: 'background' }}
       pointBorderWidth={2}
-      pointBorderColor={{ from: 'serieColor' }}
       pointLabelYOffset={-12}
       useMesh={true}
       legends={[]}
-      colors={['#8DC6BC']}
+      colors={colors}
     />
   )
 }