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

[kabiraj]

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.

[piUek]

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');
        }
    });

[PowerPacked]

Hi

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

[kabiraj]

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