jeudi 22 août 2019

relative bar percentage calculation

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