From 5dc76c516f72442138d9e257f14f5d0509fff876 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 14 Mar 2024 01:58:01 +0200
Subject: [PATCH] feat(conected peers): create HalfTopGauge.tsx

---
 src/components/Charts/HalfTopGauge.tsx | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/Charts/HalfTopGauge.tsx

diff --git a/src/components/Charts/HalfTopGauge.tsx b/src/components/Charts/HalfTopGauge.tsx
new file mode 100644
index 00000000..c5d7516d
--- /dev/null
+++ b/src/components/Charts/HalfTopGauge.tsx
@@ -0,0 +1,43 @@
+import { ResponsivePie } from '@nivo/pie'
+import { Stack } from 'tamagui'
+export interface GaugeDataPoint {
+  id: string
+  label: string
+  value: number
+}
+
+interface HalfTopGaugeProps {
+  data: GaugeDataPoint[]
+  isInteractive?: boolean
+}
+
+const HalfTopGauge = ({ data, isInteractive = true }: HalfTopGaugeProps) => {
+  return (
+    <Stack
+      style={{
+        position: 'absolute',
+        right: '1px',
+        width: '100px',
+        height: '100px',
+      }}
+    >
+      <ResponsivePie
+        data={data}
+        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+        innerRadius={0.65}
+        startAngle={-90}
+        endAngle={90}
+        isInteractive={isInteractive}
+        animate={true}
+        motionConfig="gentle"
+        enableArcLinkLabels={false}
+        arcLinkLabelsColor={{ from: 'color' }}
+        enableArcLabels={false}
+        arcLabelsSkipAngle={10}
+        legends={[]}
+      />
+    </Stack>
+  )
+}
+
+export default HalfTopGauge