I've got a number located in result.score. Essentially, if the following calculation {Math.round((result.score / 89).toFixed(2) * 100)} is 0 -> 24 I would like to make the pathColor: in CircularProgressbar red, if 25 -> 50 I would like to make it yellow and if it's 51 -> 100 I would like to make it green. What is the easiest way to do this?
const Graph = () => (
<div class="score">
{results.length > 0 && (
<div>
{results.map((result) => (
<CircularProgressbar
value={result.score}
text={`${Math.round((result.score / 89).toFixed(2) * 100)}%`}
styles={buildStyles({
pathColor: "#2bad60",
textColor: "#2bad60",
trailColor: "#0b0c18",
backgroundColor: "#3e98c7",
})}
/>
))}
</div>
)}
</div>
);
Thank you.
You can declare this calculation in a new constant and then use the following:
const scoreVar = Math.round((result.score / 89).toFixed(2) * 100)
pathColor: scoreVar <= 24 ? "orange" : (scoreVar <= 50 ? "yellow" : "green"),
You can make some class "red", "yellow", "green" and add one of them to your progress bar depending on the value.