From 7d7db6d42cb93a0bc66a7f40df6aca12ad21f529 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 19 Mar 2024 19:43:56 +0200
Subject: [PATCH] feat(half pie chart): create new pie chart

---
 .../Charts/HalfDoughnutWithGradient.tsx       | 66 +++++++++++++++++++
 .../ConnectedPeers/ConnectedPeers.tsx         |  4 +-
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Charts/HalfDoughnutWithGradient.tsx

diff --git a/src/components/Charts/HalfDoughnutWithGradient.tsx b/src/components/Charts/HalfDoughnutWithGradient.tsx
new file mode 100644
index 00000000..0516b3db
--- /dev/null
+++ b/src/components/Charts/HalfDoughnutWithGradient.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { Doughnut } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  ChartOptions,
+} from 'chart.js'
+import 'chartjs-plugin-gradient'
+import { Stack } from 'tamagui'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const options: ChartOptions<'doughnut'> = {
+  rotation: -90,
+  circumference: 180,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: true,
+    },
+  },
+}
+
+const DoughnutChartHalf = () => {
+  const data = {
+    datasets: [
+      {
+        data: [90, 10],
+        backgroundColor: function (context: any) {
+          const chart = context.chart
+          const { ctx, chartArea } = chart
+
+          if (!chartArea) {
+            // This case happens on initial chart load
+            return null
+          }
+          // Create the gradient for the first dataset (90%)
+          const gradient = ctx.createLinearGradient(
+            chartArea.left,
+            0,
+            chartArea.right,
+            0,
+          )
+          gradient.addColorStop(0.0024, '#FF7D46')
+          gradient.addColorStop(0.6216, '#FFA800')
+          gradient.addColorStop(0.9406, '#1992D7')
+
+          return [gradient, '#F5F6F8']
+        },
+      },
+    ],
+    labels: ['Gradient', 'Solid'],
+  }
+
+  return (
+    <Stack width={'100px'} height={'100px'} padding={0} margin={0}>
+      <Doughnut data={data} options={options} />
+    </Stack>
+  )
+}
+
+export default DoughnutChartHalf
diff --git a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
index 479dc4c9..d861b16a 100644
--- a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
+++ b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
@@ -2,6 +2,8 @@ import { Separator, Stack, XStack, YStack } from 'tamagui'
 import DashboardCardWrapper from '../DashboardCardWrapper'
 import { Text } from '@status-im/components'
 import HalfTopGauge from '../../../components/Charts/HalfTopGauge'
+import HalfDoughnutWithGradient from '../../../components/Charts/HalfDoughnutWithGradient'
+import DoughnutChartHalf from '../../../components/Charts/HalfDoughnutWithGradient'
 
 const ConnectedPeers = () => {
   const data = [
@@ -33,7 +35,7 @@ const ConnectedPeers = () => {
               16
             </Text>
 
-            <HalfTopGauge data={data} />
+            <DoughnutChartHalf></DoughnutChartHalf>
           </XStack>
         </Stack>
         <Separator borderColor={'#e3e3e3'} />