i want to draw a bar percentages calculations for a 3d object with the following condition 1- i have 3 background bar prefect good and bad all have same width 2- percentage from 0 to 60% must have color of green indicate for a good and must end in the prefect bar and from 60% to 85% orange color and end on the second bar and from 85% to 100% red and end on the bad color like in this picture
BarsPrecentageClaculation the problem is how to adjust this thresholds as in this photo whereas the 3 columns have same width for example if the first bar have percentage 55% it will have a prefect indicator whereas it will be in medium column in other word how to make bar from 0-60%->green->end on first column and from 60-85%->orange->end on second column and begin with third column ect..
const percentageCal = (num: number, min: number, max: number): number => {
return Math.round((((num - min) * 100) / (max - min)));
}
const setBarsColor = (percentage: number): string => {
let colorIndication: string;
if(percentage >= 0 && percentage <= 60) {
colorIndication = COLOR_INDICATORS.good;
} else if(percentage > 60 && percentage <= 85) {
colorIndication = COLOR_INDICATORS.medium;
} else if(percentage > 85 && percentage <= 100) {
colorIndication = COLOR_INDICATORS.bad;
}
return colorIndication;
}
i need a way to adjust color according to UX
Aucun commentaire:
Enregistrer un commentaire