From b6f573c6b9482a6eaa37be300b61c0ac76626d05 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 13 Nov 2024 11:49:16 +0200
Subject: [PATCH] feat: coloring of health chart (#8731)

1. Now properly color the chart based on 0-25,25-75,75-100 thresholds.
2. Fix spacing
3. Fix wrong svg implementation


![image](https://github.com/user-attachments/assets/1bd2f565-3156-4b09-896c-e126335d182c)
---
 .../project/Project/ProjectStatus/ProjectHealth.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
index 966b240943..c14537f3db 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
@@ -10,7 +10,6 @@ const HealthContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusExtraLarge,
     minWidth: '300px',
-    fontSize: theme.spacing(1.75),
 }));
 
 const ChartRow = styled('div')(({ theme }) => ({
@@ -25,6 +24,7 @@ const StyledSVG = styled('svg')({
 
 const DescriptionText = styled(Typography)(({ theme }) => ({
     color: theme.palette.text.secondary,
+    marginBottom: theme.spacing(2),
 }));
 
 export const ProjectHealth = () => {
@@ -43,10 +43,17 @@ export const ProjectHealth = () => {
     const offset = 0.75 - gapLength / 2;
     const healthLength = (averageHealth / 100) * circumference * 0.7;
 
+    const healthColor =
+        averageHealth >= 0 && averageHealth <= 24
+            ? theme.palette.error.main
+            : averageHealth >= 25 && averageHealth <= 74
+              ? theme.palette.warning.border
+              : theme.palette.success.border;
+
     return (
         <HealthContainer>
             <ChartRow>
-                <StyledSVG viewBox='0 0 100'>
+                <StyledSVG viewBox='0 0 100 100'>
                     <circle
                         cx='50'
                         cy='50'
@@ -62,7 +69,7 @@ export const ProjectHealth = () => {
                         cy='50'
                         r={radius}
                         fill='none'
-                        stroke={theme.palette.warning.border}
+                        stroke={healthColor}
                         strokeWidth={strokeWidth}
                         strokeDasharray={`${healthLength} ${circumference - healthLength}`}
                         strokeDashoffset={offset * circumference}