From b7011e1d1e53615c2cdb64964bf9f06037eaab40 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 12:39:24 +0300
Subject: [PATCH 1/6] Implement card with gauge

---
 src/components/DeviceStorageHealth.tsx        | 59 +++++++++++++++++++
 .../LayoutComponent/LandingPage.tsx           |  2 +
 2 files changed, 61 insertions(+)
 create mode 100644 src/components/DeviceStorageHealth.tsx

diff --git a/src/components/DeviceStorageHealth.tsx b/src/components/DeviceStorageHealth.tsx
new file mode 100644
index 00000000..eaf2e62c
--- /dev/null
+++ b/src/components/DeviceStorageHealth.tsx
@@ -0,0 +1,59 @@
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import StandardGauge from './StandardGauge'
+
+const DeviceStorageHealth = () => {
+  const currentLoad = 60
+  const message = currentLoad < 80 ? 'Good' : 'Poor'
+  const data = [
+    {
+      id: 'storage',
+      label: 'Storage',
+      value: 450,
+      color: '#E95460',
+    },
+    {
+      id: 'storage',
+      label: 'Storage',
+      value: 45,
+      color: '#E95460',
+    },
+  ]
+  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, width: '100px', height: '100px' }}
+          >
+            <StandardGauge data={data} />
+          </div>
+          <YStack space={'$3'}>
+            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+              Storage
+            </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 DeviceStorageHealth
diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx
index 5a770a92..c0c97935 100644
--- a/src/components/LayoutComponent/LandingPage.tsx
+++ b/src/components/LayoutComponent/LandingPage.tsx
@@ -3,6 +3,7 @@ import './LandingPage.css'
 import QuickStartBar from '../QuickStartBar/QuickStartBar'
 import DeviceCPULoad from '../DeviceCPULoad'
 import NodesLogo from '../NodesLogo'
+import DeviceStorageHealth from '../DeviceStorageHealth'
 
 function LandingPage() {
   return (
@@ -90,6 +91,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
+      <DeviceStorageHealth></DeviceStorageHealth>
       <DeviceCPULoad load={[13,32,24,1,49,90,13,32,24,1,49,90]}/>
     </div>
   )

From 0162a10800ae547d97b0e99f3735a657eef9674a Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 14:23:57 +0300
Subject: [PATCH 2/6] Style gauge in box

---
 src/components/DeviceStorageHealth.tsx | 13 +++++++++----
 src/components/StandardGauge.tsx       | 26 ++++++++++++++------------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/DeviceStorageHealth.tsx b/src/components/DeviceStorageHealth.tsx
index eaf2e62c..b8ace279 100644
--- a/src/components/DeviceStorageHealth.tsx
+++ b/src/components/DeviceStorageHealth.tsx
@@ -10,14 +10,14 @@ const DeviceStorageHealth = () => {
     {
       id: 'storage',
       label: 'Storage',
-      value: 450,
+      value: 55,
       color: '#E95460',
     },
     {
       id: 'storage',
       label: 'Storage',
       value: 45,
-      color: '#E95460',
+      color: '#E7EAEE',
     },
   ]
   return (
@@ -27,11 +27,16 @@ const DeviceStorageHealth = () => {
           justifyContent="space-between"
           style={{
             padding: '8px 16px',
-            position: 'relative', // Make XStack a positioning context
+            position: 'relative',
           }}
         >
           <div
-            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100px', height: '100px' }}
+            style={{
+              position: 'absolute',
+              right: '44px',
+              width: '75px',
+              height: '75px',
+            }}
           >
             <StandardGauge data={data} />
           </div>
diff --git a/src/components/StandardGauge.tsx b/src/components/StandardGauge.tsx
index 6db42bb7..28b7c8bd 100644
--- a/src/components/StandardGauge.tsx
+++ b/src/components/StandardGauge.tsx
@@ -11,18 +11,20 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
-  <ResponsivePie
-    data={data}
-    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
-    innerRadius={0.65}
-    colors={datum => datum.data.color}
-    fit={false}
-    activeOuterRadiusOffset={8}
-    enableArcLinkLabels={false}
-    arcLinkLabelsColor={{ from: 'color' }}
-    enableArcLabels={false}
-    legends={[]}
-  />
+  // <div style={{ width: '75px', height: '75px' }}>
+    <ResponsivePie
+      data={data}
+      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+      innerRadius={0.65}
+      colors={datum => datum.data.color}
+      fit={false}
+      activeOuterRadiusOffset={8}
+      enableArcLinkLabels={false}
+      arcLinkLabelsColor={{ from: 'color' }}
+      enableArcLabels={false}
+      legends={[]}
+    />
+  // </div>
 )
 
 export default StandardGauge

From 428cc4847f02d97fb6e0d26d5387eadfcb7a37c5 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 15:10:30 +0300
Subject: [PATCH 3/6] tweaks

---
 src/components/LandingPage.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index b27f7185..00563d14 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,10 +1,9 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
-import QuickStartBar from '../QuickStartBar/QuickStartBar'
-import DeviceCPULoad from '../DeviceCPULoad'
-import NodesLogo from '../NodesLogo'
-import DeviceStorageHealth from '../DeviceStorageHealth'
-
+import QuickStartBar from './QuickStartBar'
+import DeviceStorageHealth from './DeviceStorageHealth'
+import DeviceCPULoad from './DeviceCPULoad'
+ 
 function LandingPage() {
   return (
     <>
@@ -98,8 +97,8 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceStorageHealth></DeviceStorageHealth>
-      <DeviceCPULoad load={[13,32,24,1,49,90,13,32,24,1,49,90]}/>
+      <DeviceStorageHealth />
+      <DeviceCPULoad load={[13, 32, 24, 1, 49, 90, 13, 32, 24, 1, 49, 90]} />
     </div>
   )
 }

From c89e6e1c47c92186e68525c72efe257bcf8fe0f6 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 10 Aug 2023 15:28:38 +0300
Subject: [PATCH 4/6] dynamically set left storage

---
 src/components/DeviceStorageHealth.tsx | 45 +++++++++++++++-----------
 src/components/LandingPage.tsx         |  4 +--
 src/components/StandardGauge.tsx       | 26 +++++++--------
 3 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/components/DeviceStorageHealth.tsx b/src/components/DeviceStorageHealth.tsx
index b8ace279..e65c28d0 100644
--- a/src/components/DeviceStorageHealth.tsx
+++ b/src/components/DeviceStorageHealth.tsx
@@ -2,24 +2,31 @@ import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
+interface DeviceStorageHealthProps {
+  storage: number
+  maxStorage: number
+}
+const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxStorage }) => {
+  const message = storage < maxStorage ? 'Good' : 'Poor'
+  const data = (storage: number, maxStorage: number) => {
+    const used = storage
+    const free = maxStorage - storage
 
-const DeviceStorageHealth = () => {
-  const currentLoad = 60
-  const message = currentLoad < 80 ? 'Good' : 'Poor'
-  const data = [
-    {
-      id: 'storage',
-      label: 'Storage',
-      value: 55,
-      color: '#E95460',
-    },
-    {
-      id: 'storage',
-      label: 'Storage',
-      value: 45,
-      color: '#E7EAEE',
-    },
-  ]
+    return [
+      {
+        id: 'storage',
+        label: 'Used',
+        value: used,
+        color: '#E95460',
+      },
+      {
+        id: 'storage',
+        label: 'Free',
+        value: free,
+        color: '#E7EAEE',
+      },
+    ]
+  }
   return (
     <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
       <YStack>
@@ -38,14 +45,14 @@ const DeviceStorageHealth = () => {
               height: '75px',
             }}
           >
-            <StandardGauge data={data} />
+            <StandardGauge data={data(storage, maxStorage)} />
           </div>
           <YStack space={'$3'}>
             <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
               Storage
             </Paragraph>
             <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
-              {currentLoad} GB
+              {storage} GB
             </Paragraph>
           </YStack>
         </XStack>
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 00563d14..426af7cd 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -3,7 +3,7 @@ import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
 import DeviceStorageHealth from './DeviceStorageHealth'
 import DeviceCPULoad from './DeviceCPULoad'
- 
+
 function LandingPage() {
   return (
     <>
@@ -97,7 +97,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceStorageHealth />
+      <DeviceStorageHealth storage={60} maxStorage={100} />
       <DeviceCPULoad load={[13, 32, 24, 1, 49, 90, 13, 32, 24, 1, 49, 90]} />
     </div>
   )
diff --git a/src/components/StandardGauge.tsx b/src/components/StandardGauge.tsx
index 28b7c8bd..813122fb 100644
--- a/src/components/StandardGauge.tsx
+++ b/src/components/StandardGauge.tsx
@@ -11,20 +11,18 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
-  // <div style={{ width: '75px', height: '75px' }}>
-    <ResponsivePie
-      data={data}
-      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-      innerRadius={0.65}
-      colors={datum => datum.data.color}
-      fit={false}
-      activeOuterRadiusOffset={8}
-      enableArcLinkLabels={false}
-      arcLinkLabelsColor={{ from: 'color' }}
-      enableArcLabels={false}
-      legends={[]}
-    />
-  // </div>
+  <ResponsivePie
+    data={data}
+    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+    innerRadius={0.65}
+    colors={datum => datum.data.color}
+    fit={false}
+    activeOuterRadiusOffset={8}
+    enableArcLinkLabels={false}
+    arcLinkLabelsColor={{ from: 'color' }}
+    enableArcLabels={false}
+    legends={[]}
+  />
 )
 
 export default StandardGauge

From 1c8a5f2cadd7305f7da68192acf08f752e842215 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 09:52:23 +0300
Subject: [PATCH 5/6] Remove animation

---
 src/components/LandingPage.tsx   | 2 --
 src/components/StandardGauge.tsx | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 426af7cd..c7183dc4 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -97,8 +97,6 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceStorageHealth storage={60} maxStorage={100} />
-      <DeviceCPULoad load={[13, 32, 24, 1, 49, 90, 13, 32, 24, 1, 49, 90]} />
     </div>
   )
 }
diff --git a/src/components/StandardGauge.tsx b/src/components/StandardGauge.tsx
index 813122fb..ccaaae6c 100644
--- a/src/components/StandardGauge.tsx
+++ b/src/components/StandardGauge.tsx
@@ -22,6 +22,8 @@ const StandardGauge = ({ data }: StandardGaugeProps) => (
     arcLinkLabelsColor={{ from: 'color' }}
     enableArcLabels={false}
     legends={[]}
+    motionConfig="gentle"  // Define transition style
+    animate={false}         // Enable animation
   />
 )
 

From f204cb0acefd16181a1c50712ef598dc4cb57208 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 11 Aug 2023 09:55:02 +0300
Subject: [PATCH 6/6] Update LandingPage.tsx

---
 src/components/LandingPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index c7183dc4..d6bc3dc6 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -1,8 +1,6 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
-import DeviceStorageHealth from './DeviceStorageHealth'
-import DeviceCPULoad from './DeviceCPULoad'
 
 function LandingPage() {
   return (