Merge pull request #17 from status-im/hn.standard-gauge-component

feat: add standard gauge component

package.json

@@ -17,6 +17,7 @@
     "react-dom": "18"
   },
   "dependencies": {
+    "@nivo/pie": "^0.83.0",
     "@status-im/components": "^0.2.6",
     "@tamagui/config": "1.36.4",
     "@tamagui/react-17-patch": "1.36.4",
@@ -52,7 +53,7 @@
     "prettier": "^3.0.1",
     "storybook": "^7.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.9"
   },
   "packageManager": "yarn@3.6.1"
 }

src/App.tsx

@@ -1,36 +1,33 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import { Button, TamaguiProvider } from 'tamagui'
 import './App.css'
-import { Button as StatusButton, Provider as StatusProvider } from '@status-im/components'
-
+import { TamaguiProvider } from 'tamagui'
+import { Provider as StatusProvider } from '@status-im/components'
+import StandardGauge from './components/StandardGauge'
+ 
 import config from '../tamagui.config'
 
+
 function App() {
-  const [count, setCount] = useState(0)
+  const data = [
+    {
+      id: 'php',
+      label: 'Free Space',
+      value: 40,
+      color: '#ea5e78',
+    },
+    {
+      id: 'javascript',
+      label: 'Memmory',
+      value: 60,
+      color: '#ecedf0',
+    },
+  ]
 
   return (
     <TamaguiProvider config={config}>
       <StatusProvider>
-        <Button size="$6">Tamagui LEL</Button>
-        <StatusButton>Status LEL</StatusButton>
-        <div>
-          <a href="https://vitejs.dev" target="_blank">
-            <img src={viteLogo} className="logo" alt="Vite logo" />
-          </a>
-          <a href="https://react.dev" target="_blank">
-            <img src={reactLogo} className="logo react" alt="React logo" />
-          </a>
+        <div style={{ height: '500px', width: '300px' }}>
+          <StandardGauge data={data} />
         </div>
-        <h1>Vite + React</h1>
-        <div className="card">
-          <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test HMR
-          </p>
-        </div>
-        <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
       </StatusProvider>
     </TamaguiProvider>
   )

src/components/StandardGauge.tsx

@@ -0,0 +1,28 @@
+import { ResponsivePie } from '@nivo/pie'
+
+interface Data {
+  id: string
+  label: string
+  value: number
+  color: string
+}
+interface StandardGaugeProps {
+  data: Data[]
+}
+
+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={[]}
+  />
+)
+
+export default StandardGauge