HSL to RGB Auto-Color with AngularJS

Question

I have a few different working pieces here, but I'm struggling with how to to bring them all together. I currently have a list of elements sorted by their health status (value given between 0 and 100).

For each element, I would like to color the background based on its health status. So, status = 0 would mean I have a fill color of red; status=50 yellow; status=100 green.

In something like d3, I would accomplish that with the following code (which, is a great trick, by the way):

    /*normalize input between 0 and 100 to hsl color scale -- so 0=0 and 100 = 120, where  hue=0 is red and hue=120 is green */    

var hueScale = d3.scale.linear().domain([0,100]).range([0,120]); 

    .style("fill", function(d){
        var hslColor = 'hsl(' + hueScale(d.status)) + ', ' + (100) + '%, ' + (50) + '%, ' + (1) + ')'; 
        return d3.rgb(hslColor).toString().toUpperCase(); })

but here, I'm dealing with a normal list, not a d3 graphic.

I've also made use of ng-class in the past to specify a dynamic color:

$scope.getClass = function(status) {
    if (status == (100)) {
        return "good-feed"; 
    } else {
        return "bad-feed";
    }
    };

and

   ng-class="[getClass(item.status)]" 

I need to combine both of these techniques. I think using ng-class in a similar way to what I have is what I need to do, but I'm not sure how to get the color change function to work without being needlessly complicated.

Any thoughts?

EDIT Both my current code snippets above work, but the issue is I want to be able to iterate through all status values between 0 and 100, not just handle an either-or situation.

For example:

• Item 1 with status of 23 (approx. color: orange)
• Item 2 with status of 45 (approx. color: yellow-orange)
• Item 3 with status of 67 (approx. color: yellow-green)
• Item 4 with status of 99 (approx. color: green)

And so on. Now, I COULD write my color function for ng-class to look something like this (update: this doesn't work) :

$scope.getClass = function(status) {
    if (status <= (10)) {
        return "dark-red"; 
    } else if (10 < status <= 20){
        return "red-orange"; 
// continue pattern for all intervals until 100 is reached
    } else {
        return "undefined-grey";
    }
};

But manually going through like that for each value seems clunky. Is there any way to make this smoother (akin to the d3 solution)?

Answer 1

Alright, so this answer is the best I've got for now. It still requires some work to get this to do exactly what I would like, but it's on the right track:

I ended up usuing jquery to break apart colors based on value (like I was attempting to do with my ng-class function)

See my JSFiddle for details.

$(document).ready(function () {

var cell = $('ul.list-view li');

cell.each(function() {
var cell_value = parseFloat($(this).html().slice(0, -1));

// Positief

if ((cell_value >= 0) && (cell_value <= 0.3)) {
    $(this).css({'background-color' : '#7FFF95'});   
} 
else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
    $(this).css({'background-color' : '#66FF7C'});
} 
else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
    $(this).css({'background-color' : '#4DFF63'});
} 
else if ((cell_value >= 0.71) && (cell_value <= 1)) {
    $(this).css({'background-color' : '#33F749'});
}
else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
    $(this).css({'background-color' : '#1ADE30'});
}
else if (cell_value >= 1.5) {
    $(this).css({'background-color' : '#00CC66'});
}

// Negatief

else if ((cell_value >= -0.01) && (cell_value <= -0.2)) {
    $(this).css({'background-color' : '#F6ADAC'});
}
else if ((cell_value >= -0.31) && (cell_value <= -0.5)) {
    $(this).css({'background-color' : '#F18483'});
}
else if ((cell_value >= 0.51) && (cell_value <= -0.7)) {
    $(this).css({'background-color' : '#EF706E'});
}
else if ((cell_value >= -0.71) && (cell_value <= -1)) {
    $(this).css({'background-color' : '#ED5B5A'});
}
else if ((cell_value >= -1.01) && (cell_value <= -1.5)) {
    $(this).css({'background-color' : '#EB4745'});
}
else if (cell_value >= -1.5) {
$(this).css({'background-color' : '#E93331'});
}

});