From 44bf127d030e13a373ce79f053804620f26d84f8 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 20 Mar 2024 14:31:18 +0200
Subject: [PATCH] fix(halfDoughnutChart): fix color ration and clear code

---
 .../Charts/HalfDoughnutWithGradient.tsx          | 16 ++++++++--------
 .../Dashboard/ConnectedPeers/ConnectedPeers.tsx  | 15 +--------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/components/Charts/HalfDoughnutWithGradient.tsx b/src/components/Charts/HalfDoughnutWithGradient.tsx
index 0516b3db..4d3ecca7 100644
--- a/src/components/Charts/HalfDoughnutWithGradient.tsx
+++ b/src/components/Charts/HalfDoughnutWithGradient.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Doughnut } from 'react-chartjs-2'
 import {
   Chart as ChartJS,
@@ -20,7 +19,7 @@ const options: ChartOptions<'doughnut'> = {
       display: false,
     },
     tooltip: {
-      enabled: true,
+      enabled: false,
     },
   },
 }
@@ -29,27 +28,28 @@ const DoughnutChartHalf = () => {
   const data = {
     datasets: [
       {
-        data: [90, 10],
+        data: [85, 15],
         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.0124, '#FF7D46')
           gradient.addColorStop(0.6216, '#FFA800')
-          gradient.addColorStop(0.9406, '#1992D7')
+          gradient.addColorStop(0.9006, '#1992D7')
+          if (context.index === 0) {
+            return gradient
+          }
 
-          return [gradient, '#F5F6F8']
+          return '#F5F6F8'
         },
       },
     ],
diff --git a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
index d861b16a..059ae53d 100644
--- a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
+++ b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
@@ -1,23 +1,10 @@
 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 = [
-    {
-      id: 'storage-used',
-      label: 'Used',
-      value: 10,
-    },
-    {
-      id: 'storage-free',
-      label: 'Free',
-      value: 3,
-    },
-  ]
   return (
     <DashboardCardWrapper padding="0" height="156ppx" minWidth="200px">
       <YStack height={'100%'}>