How to apply linear gradient scheme on ag-grid cells angular?

Question

I have this color scheme to apply on the ag-grid cell based on their values and the values will range from -50 to 50

I have tried this to calculate the weight and provided rgb gradient on the cells under the cellStyle but I am getting only blue and white:

 let red = weight * 165 + (50 - weight) * 14;
let green = weight * 42 + (50 - weight) * 109;
let blue = weight * 8 + (50 - weight) * 60;
return {backgroundColor: 'rgb($(red),$(green),$(blue))'};

Can someone please help me where I am going wrong here?

Answer 1

I just ran into this too and hope this will be of help for you and anyone searching for this in the future.

I followed the guide rateLess posted here including reading the code in their Plunker and it worked like a charm. Took some tweaking because their code is different than their explanation. But piecing it together worked. We just need to tweak your math a little bit.

Your weight should be calculated with:

let weight = (params.value - min)/(max - min);

Where params.value is your cell value and your min and mix in this case would be -50 and 50, respectively. Thus:

let min = -50;
let max = 50;
let weight = (params.value - min)/(max - min);

You then want to capture your min value's RGB and your max value's RGB:

let lowestScoreRed = 255;
let lowestScoreGreen = 0;
let lowestScoreBlue  = 0;

let highestScoreRed = 2;
let highestScoreGreen = 176;
let highestScoreBlue = 0;

Then your weighted RGB values become:

let red = weight * highestScoreRed + (1 - weight) * lowestScoreRed;
let green = weight * highestScoreGreen + (1 - weight) * lowestScoreGreen;
let blue = weight * highestScoreBlue + (1 - weight) * lowestScoreBlue;

And then you return:

return { backgroundColor: `rgb(${red}, ${green}, ${blue})` };