Table width on sorting / Table cell color highlighting / KPI Value based color highlighting

Hi,

  1. I have a full width table. Clicking on a header will change the width:

Is there a solution to fix the width?


  1. The code for the table cell highlighing (based on values) will not apply if I have more than one page - is there a solution?

  2. Is it possible to highlight the value of a KPI with a color based on the value?

@Georgio

  1. I would suggest unchecking “full width” option. Instead manually adjust the width of the table columns while in dashboard edit mode and click save. That should freeze the column widths.

  2. Will have to look into this. Can you share the code you are using?

  3. KPI visual has color coding option out of the box. You need to enable the “user arrow color for main font color”. And you can set the color using the Color panel setting.

Hi Shaun - thank you. To 3) Can not test it right now, but is it value based? If > 1 Then #abcdef, if < 1 Then #cdefgh?

Best
G

@Georgio it can be, you would need to set the correct value in the “Compare To” shelf:
image

Hi again,

Edit: “I would suggest unchecking “full width” option. Instead manually adjust the width of the table columns while in dashboard edit mode and click save. That should freeze the column widths.”

This is not a good idea if I have user with different screen sizes, right…?

to 2)

return function() {

var f = function() {};

f.version = "1";

f.supported = {
    visualType: [
        "table"
    ]
};

f.settings = function() {
    return [
        {
            id: "COLUMNS_TO_HIGHLIGHT",
            displayName: "Columns to Highlight",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_1_ENABLED",
            displayName: "Test 1 Enabled",
            type: "boolean",
            defaultValue: "false"
        },
        {
            id: "TEST_1_OPERATOR",
            displayName: "Test 1 Operator (<, <=, =, =>, >, between)",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_1_OPERAND_1",
            displayName: "Test 1 Operand 1",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_1_OPERAND_2",
            displayName: "Test 1 Operand 2",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_1_COLOUR",
            displayName: "Test 1 Colour",
            type: "string",
            defaultValue: "#FD7F7C"
        },
        {
            id: "TEST_2_ENABLED",
            displayName: "Test 2 Enabled",
            type: "boolean",
            defaultValue: "false"
        },
        {
            id: "TEST_2_OPERATOR",
            displayName: "Test 2 Operator (<, <=, =, =>, >, between)",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_2_OPERAND_1",
            displayName: "Test 2 Operand 1",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_2_OPERAND_2",
            displayName: "Test 2 Operand 2",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_2_COLOUR",
            displayName: "Test 2 Colour",
            type: "string",
            defaultValue: "#FEE59D"
        },
        {
            id: "TEST_3_ENABLED",
            displayName: "Test 3 Enabled",
            type: "boolean",
            defaultValue: "false"
        },
        {
            id: "TEST_3_OPERATOR",
            displayName: "Test 3 Operator (<, <=, =, =>, >, between)",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_3_OPERAND_1",
            displayName: "Test 3 Operand 1",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_3_OPERAND_2",
            displayName: "Test 3 Operand 2",
            type: "string",
            defaultValue: "<<NOT_SPECIFIED>>"
        },
        {
            id: "TEST_3_COLOUR",
            displayName: "Test 3 Colour",
            type: "string",
            defaultValue: "#C7DFB6"
        }
    ];
};

f.disableDraw = function() {
    return false;
};

f.beforeDraw = function() {
};

f.afterDraw = function() {

    var drew__debugLine = "";

    console.log("");
    console.log("INFO: ===> ---------------------------------------------------");
    console.log("INFO: ===> | Applying Drew's 'RAG Highlighting' custom style |");
    console.log("INFO: ===> ---------------------------------------------------");

    // get a jQuery object representation of the visual DOM object
    var $drew__visual = $('#' + arcapi.chartId());
    console.log("INFO: ===> Visual id : " + arcapi.chartId());

    // get the underlying data object
    var drew__visual_dataResult = arcapi.dataResult();
    // get the rows from the data object and bail out if there are none
    var drew__visual_dataResult_rows = drew__visual_dataResult.rows();
    if (drew__visual_dataResult_rows.length === 0) {
        console.log("WARN: ===> Data contains no rows - terminating");
        return;
    } else {
        console.log("INFO: ===> Data contains " + drew__visual_dataResult_rows.length + " rows");
    }

    // validate custom style settings
    console.log("INFO: ===> Validating custom style settings");

    var drew__setting_COLUMNS_TO_HIGHLIGHT = arcapi.getSetting("COLUMNS_TO_HIGHLIGHT").split(",");
    var drew__setting_COLUMNS_TO_HIGHLIGHT_count = drew__setting_COLUMNS_TO_HIGHLIGHT.length;
    console.log("INFO: ===> Found " + drew__setting_COLUMNS_TO_HIGHLIGHT_count + " columns to highlight specified");
    var drew__setting_COLUMNS_TO_HIGHLIGHT_indexes = [];
    var _index_;
    for (_index_ = 0; _index_ < drew__setting_COLUMNS_TO_HIGHLIGHT_count; _index_++) {
        var drew__visual_dataResult_columnIndex = drew__visual_dataResult.columnNameToIndex(drew__setting_COLUMNS_TO_HIGHLIGHT[_index_]);
        if (drew__visual_dataResult_columnIndex === undefined) {
            console.log("ERROR: ===> Specified column '" + drew__setting_COLUMNS_TO_HIGHLIGHT[_index_] + "' not found - ignoring");
        } else {
            console.log("INFO: ===> Specified column '" + drew__setting_COLUMNS_TO_HIGHLIGHT[_index_] + "' found at index " + drew__visual_dataResult_columnIndex);
            drew__setting_COLUMNS_TO_HIGHLIGHT_indexes.push(drew__visual_dataResult_columnIndex);
        }
    }
    if (drew__setting_COLUMNS_TO_HIGHLIGHT_indexes.length === 0) {
        console.log("ERROR: ===> No columns identified to highlight - terminating");
        return;
    } else {
        console.log("INFO: ===> " + drew__setting_COLUMNS_TO_HIGHLIGHT_indexes.length + " columns found to highlight at indexes " + drew__setting_COLUMNS_TO_HIGHLIGHT_indexes);
    }

    var drew__setting_TEST_1_ENABLED = arcapi.getSetting("TEST_1_ENABLED");
    var drew__setting_TEST_1_OK = true;
    if (drew__setting_TEST_1_ENABLED === "false") {
        console.log("INFO: ===> Test 1 is disabled - skipping");
        drew__setting_TEST_1_OK = true;
    } else {
        var drew__setting_TEST_1_OPERATOR = arcapi.getSetting("TEST_1_OPERATOR");
        var drew__setting_TEST_1_OPERAND_1 = arcapi.getSetting("TEST_1_OPERAND_1");
        var drew__setting_TEST_1_OPERAND_2 = arcapi.getSetting("TEST_1_OPERAND_2");
        switch (drew__setting_TEST_1_OPERATOR) {
            case '<':
            case '<=':
            case '=':
            case '>=':
            case '>':
                if (drew__setting_TEST_1_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_1_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_1_OK = false;
                }
                break;
            case 'between':
                if (drew__setting_TEST_1_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_1_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_1_OK = false;
                }
                if (drew__setting_TEST_1_OPERAND_2 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 2 required for test '" + drew__setting_TEST_1_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_1_OK = false;
                }
                break;
            default:
                console.log("INFO: ===> Unrecognised test operator '" + drew__setting_TEST_1_OPERATOR + "' - terminating");
                drew__setting_TEST_1_OK = false;
                break;
        }
    }
    if (drew__setting_TEST_1_OK === "false") {
        return;
    } else {
        var drew__setting_TEST_1_COLOUR = arcapi.getSetting("TEST_1_COLOUR");
        if (drew__setting_TEST_1_ENABLED === "true") {
            drew__debugLine = "DEBUG: ===> Test 1 is " + drew__setting_TEST_1_OPERATOR + " " + drew__setting_TEST_1_OPERAND_1;
            if (drew__setting_TEST_1_OPERATOR === "between") {
                drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_1_OPERAND_2;
            }
            drew__debugLine = drew__debugLine + " ===> " + drew__setting_TEST_1_COLOUR;
            console.log(drew__debugLine);
        }
    }

    var drew__setting_TEST_2_ENABLED = arcapi.getSetting("TEST_2_ENABLED");
    var drew__setting_TEST_2_OK = true;
    if (drew__setting_TEST_2_ENABLED === "false") {
        console.log("INFO: ===> Test 2 is disabled - skipping");
        drew__setting_TEST_2_OK = true;
    } else {
        var drew__setting_TEST_2_OPERATOR = arcapi.getSetting("TEST_2_OPERATOR");
        var drew__setting_TEST_2_OPERAND_1 = arcapi.getSetting("TEST_2_OPERAND_1");
        var drew__setting_TEST_2_OPERAND_2 = arcapi.getSetting("TEST_2_OPERAND_2");
        switch (drew__setting_TEST_2_OPERATOR) {
            case '<':
            case '<=':
            case '=':
            case '>=':
            case '>':
                if (drew__setting_TEST_2_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_2_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_2_OK = false;
                }
                break;
            case 'between':
                if (drew__setting_TEST_2_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_2_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_2_OK = false;
                }
                if (drew__setting_TEST_2_OPERAND_2 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 2 required for test '" + drew__setting_TEST_2_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_2_OK = false;
                }
                break;
            default:
                console.log("INFO: ===> Unrecognised test operator '" + drew__setting_TEST_2_OPERATOR + "' - terminating");
                drew__setting_TEST_2_OK = false;
                break;
        }
    }
    if (drew__setting_TEST_2_OK === "false") {
        return;
    } else {
        var drew__setting_TEST_2_COLOUR = arcapi.getSetting("TEST_2_COLOUR");
        if (drew__setting_TEST_2_ENABLED === "true") {
            drew__debugLine = "DEBUG: ===> Test 2 is " + drew__setting_TEST_2_OPERATOR + " " + drew__setting_TEST_2_OPERAND_1;
            if (drew__setting_TEST_2_OPERATOR === "between") {
                drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_2_OPERAND_2;
            }
            drew__debugLine = drew__debugLine + " ===> " + drew__setting_TEST_2_COLOUR;
            console.log(drew__debugLine);
        }
    }

    var drew__setting_TEST_3_ENABLED = arcapi.getSetting("TEST_3_ENABLED");
    var drew__setting_TEST_3_OK = true;
    if (drew__setting_TEST_3_ENABLED === "false") {
        console.log("INFO: ===> Test 3 is disabled - skipping");
        drew__setting_TEST_3_OK = true;
    } else {
        var drew__setting_TEST_3_OPERATOR = arcapi.getSetting("TEST_3_OPERATOR");
        var drew__setting_TEST_3_OPERAND_1 = arcapi.getSetting("TEST_3_OPERAND_1");
        var drew__setting_TEST_3_OPERAND_2 = arcapi.getSetting("TEST_3_OPERAND_2");
        switch (drew__setting_TEST_3_OPERATOR) {
            case '<':
            case '<=':
            case '=':
            case '>=':
            case '>':
                if (drew__setting_TEST_3_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_3_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_3_OK = false;
                }
                break;
            case 'between':
                if (drew__setting_TEST_3_OPERAND_1 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 1 required for test '" + drew__setting_TEST_3_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_3_OK = false;
                }
                if (drew__setting_TEST_3_OPERAND_2 === "<<NOT_SPECIFIED>>") {
                    console.log("ERROR: ===> Operand 2 required for test '" + drew__setting_TEST_3_OPERATOR + "' not specified - terminating");
                    drew__setting_TEST_3_OK = false;
                }
                break;
            default:
                console.log("INFO: ===> Unrecognised test operator '" + drew__setting_TEST_3_OPERATOR + "' - terminating");
                drew__setting_TEST_3_OK = false;
                break;
        }
    }
    if (drew__setting_TEST_3_OK === "false") {
        return;
    } else {
        var drew__setting_TEST_3_COLOUR = arcapi.getSetting("TEST_3_COLOUR");
        if (drew__setting_TEST_3_ENABLED === "true") {
            drew__debugLine = "DEBUG: ===> Test 3 is " + drew__setting_TEST_3_OPERATOR + " " + drew__setting_TEST_3_OPERAND_1;
            if (drew__setting_TEST_3_OPERATOR === "between") {
                drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_3_OPERAND_2;
            }
            drew__debugLine = drew__debugLine + " ===> " + drew__setting_TEST_3_COLOUR;
            console.log(drew__debugLine);
        }
    }


    // OK - if we got here without bailing out then we should be able to go ahead and apply the highlighting (if any tests are actually enabled)
    if (drew__setting_TEST_1_ENABLED === "true" || drew__setting_TEST_2_ENABLED === "true" || drew__setting_TEST_3_ENABLED === "true") {

        // for each column we need to apply the highlighting to...
        for (_columnIndexToHighlight_ of drew__setting_COLUMNS_TO_HIGHLIGHT_indexes) {

            console.log("INFO: ===> Applying styling for column " + _columnIndexToHighlight_ + "[" + drew__setting_COLUMNS_TO_HIGHLIGHT_indexes + "]");

            // get the table row td elements
            var drew__visualElements_table_tr = d3.selectAll("#" + arcapi.chartId() + " .dataTables_scrollBody tbody tr :nth-child(" + (_columnIndexToHighlight_ + 1) + ")");

            // apply the highlighting
            drew__visualElements_table_tr.style(
                'background-color',
                function(d, i) {

                    // apply test 1 if enabled
                    if (drew__setting_TEST_1_ENABLED === "true") {
                        var drew__visual_dataResult_columnValue_TEST_1 = drew__visual_dataResult_rows[i][_columnIndexToHighlight_];
                        var drew__setting_TEST_1_RESULT = false;
                        drew__debugLine = "DEBUG: ===> Row " + i + ", Column " + _columnIndexToHighlight_ + " test 1 is [" + drew__visual_dataResult_columnValue_TEST_1 + "] " + drew__setting_TEST_1_OPERATOR + " " + drew__setting_TEST_1_OPERAND_1;
                        switch (drew__setting_TEST_1_OPERATOR) {
                            case '<':
                                if (drew__visual_dataResult_columnValue_TEST_1 < drew__setting_TEST_1_OPERAND_1) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '<=':
                                if (drew__visual_dataResult_columnValue_TEST_1 <= drew__setting_TEST_1_OPERAND_1) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '=':
                                if (drew__visual_dataResult_columnValue_TEST_1 == drew__setting_TEST_1_OPERAND_1) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>=':
                                if (drew__visual_dataResult_columnValue_TEST_1 >= drew__setting_TEST_1_OPERAND_1) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>':
                                if (drew__visual_dataResult_columnValue_TEST_1 > drew__setting_TEST_1_OPERAND_1) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case 'between':
                                if (drew__visual_dataResult_columnValue_TEST_1 >= drew__setting_TEST_1_OPERAND_1 && drew__visual_dataResult_columnValue_TEST_1 <= drew__setting_TEST_1_OPERAND_2) {
                                    drew__setting_TEST_1_RESULT = true;
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_1_OPERAND_2 + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_1_OPERAND_2 + " [false]";
                                }
                                break;
                            default:
                                console.log("ERROR: ===> Unrecognised test operator '" + drew__setting_TEST_1_OPERATOR + "' - this should never happen !!!");
                                drew__setting_TEST_1_OK = false;
                                break;
                        }
                        console.log(drew__debugLine);
                        if (drew__setting_TEST_1_RESULT === true) {
                            return drew__setting_TEST_1_COLOUR;
                        }
                    }

                    // apply test 2 if enabled
                    if (drew__setting_TEST_2_ENABLED === "true") {
                        var drew__visual_dataResult_columnValue_TEST_2 = drew__visual_dataResult_rows[i][_columnIndexToHighlight_];
                        var drew__setting_TEST_2_RESULT = false;
                        drew__debugLine = "DEBUG: ===> Row " + i + ", Column " + _columnIndexToHighlight_ + " test 2 is [" + drew__visual_dataResult_columnValue_TEST_2 + "] " + drew__setting_TEST_2_OPERATOR + " " + drew__setting_TEST_2_OPERAND_1;
                        switch (drew__setting_TEST_2_OPERATOR) {
                            case '<':
                                if (drew__visual_dataResult_columnValue_TEST_2 < drew__setting_TEST_2_OPERAND_1) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '<=':
                                if (drew__visual_dataResult_columnValue_TEST_2 <= drew__setting_TEST_2_OPERAND_1) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '=':
                                if (drew__visual_dataResult_columnValue_TEST_2 == drew__setting_TEST_2_OPERAND_1) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>=':
                                if (drew__visual_dataResult_columnValue_TEST_2 >= drew__setting_TEST_2_OPERAND_1) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>':
                                if (drew__visual_dataResult_columnValue_TEST_2 > drew__setting_TEST_2_OPERAND_1) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case 'between':
                                if (drew__visual_dataResult_columnValue_TEST_2 >= drew__setting_TEST_2_OPERAND_1 && drew__visual_dataResult_columnValue_TEST_2 <= drew__setting_TEST_2_OPERAND_2) {
                                    drew__setting_TEST_2_RESULT = true;
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_2_OPERAND_2 + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_2_OPERAND_2 + " [false]";
                                }
                                break;
                            default:
                                console.log("ERROR: ===> Unrecognised test operator '" + drew__setting_TEST_2_OPERATOR + "' - this should never happen !!!");
                                drew__setting_TEST_2_OK = false;
                                break;
                        }
                        console.log(drew__debugLine);
                        if (drew__setting_TEST_2_RESULT === true) {
                            return drew__setting_TEST_2_COLOUR;
                        }
                    }

                    // apply test 3 if enabled
                    if (drew__setting_TEST_3_ENABLED === "true") {
                        var drew__visual_dataResult_columnValue_TEST_3 = drew__visual_dataResult_rows[i][_columnIndexToHighlight_];
                        var drew__setting_TEST_3_RESULT = false;
                        drew__debugLine = "DEBUG: ===> Row " + i + ", Column " + _columnIndexToHighlight_ + " test 3 is [" + drew__visual_dataResult_columnValue_TEST_3 + "] " + drew__setting_TEST_3_OPERATOR + " " + drew__setting_TEST_3_OPERAND_1;
                        switch (drew__setting_TEST_3_OPERATOR) {
                            case '<':
                                if (drew__visual_dataResult_columnValue_TEST_3 < drew__setting_TEST_3_OPERAND_1) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '<=':
                                if (drew__visual_dataResult_columnValue_TEST_3 <= drew__setting_TEST_3_OPERAND_1) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '=':
                                if (drew__visual_dataResult_columnValue_TEST_3 == drew__setting_TEST_3_OPERAND_1) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>=':
                                if (drew__visual_dataResult_columnValue_TEST_3 >= drew__setting_TEST_3_OPERAND_1) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case '>':
                                if (drew__visual_dataResult_columnValue_TEST_3 > drew__setting_TEST_3_OPERAND_1) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " [false]";
                                }
                                break;
                            case 'between':
                                if (drew__visual_dataResult_columnValue_TEST_3 >= drew__setting_TEST_3_OPERAND_1 && drew__visual_dataResult_columnValue_TEST_3 <= drew__setting_TEST_3_OPERAND_2) {
                                    drew__setting_TEST_3_RESULT = true;
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_3_OPERAND_2 + " [true]";
                                } else {
                                    drew__debugLine = drew__debugLine + " AND " + drew__setting_TEST_3_OPERAND_2 + " [false]";
                                }
                                break;
                            default:
                                console.log("ERROR: ===> Unrecognised test operator '" + drew__setting_TEST_3_OPERATOR + "' - this should never happen !!!");
                                drew__setting_TEST_3_OK = false;
                                break;
                        }
                        console.log(drew__debugLine);
                        if (drew__setting_TEST_3_RESULT === true) {
                            return drew__setting_TEST_3_COLOUR;
                        }
                    }

                }
            );

        }

    } else {
        console.log("WARN: ===> No tests enabled so no styling to apply");
    }

};

return f;

}();

To 3) I dont think thats what I want. The number should be green, if its below “100” and yellow between “100” and “110” and red if > 110. No arrow or anything!

Thank you!

@Georgio

For #3, you have options to change the color scheme as shown in the below screenshots:

If you do not want the arrow to appear, you can hide it with CSS:

span.compare-arrow {
 display: none;
}

image

Hi @shaun. Is there a fix or workaround for the table cell color highlighting?

@Georgio for cell highlighting the JS custom style is the current workaround. In a future release we will have an out of the box feature.