AgGrid heatmap cell renderer

Dash Python
,
2

Hello @mathman79,

Welcome to the community!

All you are doing is styling in the component, is that correct?

Have you looked into conditionally styling the cells?

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};

dagfuncs.heatMap = function (props) {
    const min = props.colDef.cellRendererParams.min;
    const max = props.colDef.cellRendererParams.max;
    const val = props.value;

    if(min > 0) {
        g = 255;
        r = b = Math.round(255 * (1 - val / max));
    }
    else {
        if(val > 0) {
            g = 255;
            r = b = Math.round(255 * (1 - val / max));
        }
        else {
            r = 255;
            g = b = Math.round(255 * (1 - val / min));
        }
    };

return {
                backgroundColor: rgbToHex(r, g, b),
                color: 'black',
            }
}

Then in the columnDef:

"cellStyle": {"function": "heatMap(params)"},
"cellRendererParams": {"min": data[col_name].min(), "max": data[col_name].max()},