topic Re: While trying to color table cells based on values under dynamic columns with JavaScript, why is content no longer showing in the table? in Splunk Search

While trying to color table cells based on values under dynamic columns with JavaScript, why is content no longer showing in the table?

kabiraj — Tue, 23 Jun 2015 11:15:18 GMT

Hi Guys.

I want to color the cells of my table based on the values that belong to columns other than the first column. My column names are Dynamic. Below is a Sample of what my table looks like if we select 'Last 3 days' from timepicker:

Channel 23-Jun-15 22-Jun-15 21-Jun-15 20-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

Here i want to color all the cells after "Channel" column based on the cell values.
Below is the Script i am using :

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            return true;
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            // Apply interpretation for number of historical searches
                var tdPosition = $td.parent().children().index($td[0]);
                var value = cell.value;
            if (tdPosition > 0) {
                    var value = parseFloat(value);
                if ((value > 0) && (value <= 50)) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if ((value > 50) && (value <= 100)) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if ((value > 100) && (value <= 150)) {
                    $td.addClass('range-cell').addClass('range-low');
                }
                    else {
                        $td.addClass('range-cell').addClass('range-empty');
                    }

            }
            // Update the cell content
                $td.text(value).addClass('numeric');
        }
    });
    mvc.Components.get('rettable').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
           // tableView.$el.find('td.range-cell').each(function() {
           //     $(this).addClass(this.className);
           // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});

But the table is showing empty i.e. only column names are showing without any values. I think there is some problem with updating cell content in query. Please help.

Re: While trying to color table cells based on values under dynamic columns with JavaScript, why is content no longer showing in the table?

piUek — Thu, 01 Oct 2015 09:42:51 GMT

I would try different approach for getting td position.
Since the table is not rendered yet (we are in the setup stage) I'd rather use cell.index.

So instead of

var tdPosition = $td.parent().children().index($td[0]);

I would use:

var tdPosition = cell.index;

We can even go further and render custom classes only for the columns which are not first.
Then your entire function would be this way:

var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for all fields except first column
            return cell.index > 0;
        },
        render: function($td, cell) {
            var value = parseFloat(cell.value);
            if ((value > 0) && (value <= 50)) {
                $td.addClass('range-cell').addClass('range-severe');
            } else if ((value > 50) && (value <= 100)) {
                $td.addClass('range-cell').addClass('range-elevated');
            } else if ((value > 100) && (value <= 150)) {
                $td.addClass('range-cell').addClass('range-low');
            } else {
                $td.addClass('range-cell').addClass('range-empty');
            }

            // Update the cell content
            $td.text(value).addClass('numeric');
        }
    });

Re: While trying to color table cells based on values under dynamic columns with JavaScript, why is content no longer showing in the table?

kabiraj — Mon, 05 Oct 2015 06:05:49 GMT

Thank You piUek. Appreciate your answer but i got it long back. Thanks again for replying.

Re: While trying to color table cells based on values under dynamic columns with JavaScript, why is content no longer showing in the table?

PowerPacked — Mon, 27 Apr 2020 06:20:21 GMT

Is it possible to do the same for string values in fields instead of numeric.

Am trying this but not working any help provided is appreciated.

if (cell.field !== "source_subnet") {
                 if (value !== "100%") {
                     $td.addClass("range-cell").addClass("range-severe");
                 }
                 // Update the cell content
                 $td.text(value).addClass('string');
             }

Please ignore am using "100%" as string.

Thanks