Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

feat: coloring of health chart (#8731)

Browse Source 
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)
This commit is contained in:
Jaanus Sellin 2024-11-13 11:49:16 +02:00 committed by GitHub
parent b87c47d7c4
commit b6f573c6b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
View File

@ -10,7 +10,6 @@ const HealthContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(3), padding: theme.spacing(3),
borderRadius: theme.shape.borderRadiusExtraLarge, borderRadius: theme.shape.borderRadiusExtraLarge,
minWidth: '300px', minWidth: '300px',
fontSize: theme.spacing(1.75),
})); }));
const ChartRow = styled('div')(({ theme }) => ({ const ChartRow = styled('div')(({ theme }) => ({
@ -25,6 +24,7 @@ const StyledSVG = styled('svg')({
const DescriptionText = styled(Typography)(({ theme }) => ({ const DescriptionText = styled(Typography)(({ theme }) => ({
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
marginBottom: theme.spacing(2),
})); }));
export const ProjectHealth = () => { export const ProjectHealth = () => {
@ -43,10 +43,17 @@ export const ProjectHealth = () => {
const offset = 0.75 - gapLength / 2; const offset = 0.75 - gapLength / 2;
const healthLength = (averageHealth / 100) * circumference * 0.7; 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 ( return (
<HealthContainer> <HealthContainer>
<ChartRow> <ChartRow>
<StyledSVG viewBox='0 0 100'> <StyledSVG viewBox='0 0 100 100'>
<circle <circle
cx='50' cx='50'
cy='50' cy='50'
@ -62,7 +69,7 @@ export const ProjectHealth = () => {
cy='50' cy='50'
r={radius} r={radius}
fill='none' fill='none'
stroke={theme.palette.warning.border} stroke={healthColor}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
strokeDasharray={`${healthLength} ${circumference - healthLength}`} strokeDasharray={`${healthLength} ${circumference - healthLength}`}
strokeDashoffset={offset * circumference} strokeDashoffset={offset * circumference}