Table cell Highlighting for several field values

[Raghav2384]

Hello Experts,

I have used the Table cell highlighting example from 6.x dashboard examples app. I have close to 20 fields in the table with each having several cell values. If i use the example as is, i have to write 20 if loops with range conditions. Has anyone tried looping through using an array with all the field values mentioned only once? I do understand this more a javascript question and not splunk. Any help is appreciated. Here's what i am trying to achieve.

Actual js:

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 _(['active_hist_searches']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            // Apply interpretation for number of historical searches
            if (cell.field === 'active_hist_searches') {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 1) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value > 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
                       // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('highlight').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();
    });
});

I want to achieve something like this

var fields = [f1,f2,f3,f4,f5,f6....f20];
for (i = 0 ; i < fields.length ; i++ ) {

if (cell.field ===  fields[i]) {
                 if (value > 2) {
                     $td.addClass('range-cell').addClass('range-severe');
                 }
                 else if (value > 1) {
                     $td.addClass('range-cell').addClass('range-elevated');
                 }
                 else if (value > 0) {
                     $td.addClass('range-cell').addClass('range-low');
                 }
             }

}

Again, i got it working by adding 20 different if loops one for each field...looking for a non-uglier code. Please pardon if this is not at all in Splunk's scope. Thanks in advance!

Cheers,
Raghav

[Raghav2384]

Reply to @jbrodsky_splunk

I tried to paste it in the comment but char count exceeded. Here's the javascript.

    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 _(['CentralFlorida','Cleveland','GulfCoast','LasVegas','NorthernVirginia','OklahomaCity','Phoenix','SanDiego','SantaBarbara','BatonRouge','Connecticut','HamptonRoads','Macon','NewOrleans','Omaha','OrangeCounty','RhodeIsland','Roanoke','Tulsa','Wichita','all_markets']).contains(cell.field);
            },
            render: function($td, cell) {
                // Add a class to the cell based on the returned value
                //alert(cell);
                var value = parseFloat(cell.value);
                // Apply interpretation for number of historical searches
                //alert(value);
                //CentralFlorida    
                if (cell.field !== ' ') {
                    if (value >= 99) {
                        $td.addClass('range-cell').addClass('green');
                    }
                    else if (value >= 98 && value < 99 ) {
                        $td.addClass('range-cell').addClass('amber');
                    }
                    else if (value < 98 ) {
                        $td.addClass('range-cell').addClass('red');
                    }
                }

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

            }
        });
       mvc.Components.get('bixlaxrates').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();
        });
        mvc.Components.get('bizrates').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();
        });
        mvc.Components.get('techrates').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();
        });

    });

[otman01]

I resolve the problem.
if any one need to make the same exemple, you can find the answer in this page .

http://answers.splunk.com/answers/177749/change-field-value-font-color-in-a-table.html

[otman01]

Hi, every one
can we make this kind of test:
if (field=="OK")
Please if you have some ideas to resolve that, forward the answer
thank you

[jbrodsky_splunk]

thanks Raghav!

[martin_mueller · Accepted solution]

You could do something along these lines:

var fields = {};
fields['A'] = {severe: 2, elevated: 1, low: 0};
fields['B'] = {severe: 5, elevated: 2, low: 0};
...

var field = fields[cell.field];
if(field) {
   if (value > field.severe) {
    $td.addClass('range-cell').addClass('range-severe');
  } else if (value > field.elevated) {
    $td.addClass('range-cell').addClass('range-elevated');
  } else if (value > field.low) {
    $td.addClass('range-cell').addClass('range-low');
  }
}

Basically you separate the data, ie what values lead to what classes, from the logic that assigns the classes to the cells.

[Raghav2384]

Thanks Martin! i just realized that i need all the fields to be colored 😉 so used one if loop like this

if(cell.field !== ' ' ) {
                  if (value > 2) {
                      $td.addClass('range-cell').addClass('range-severe');
                  }
                  else if (value > 1) {
                      $td.addClass('range-cell').addClass('range-elevated');
                  }
                  else if (value > 0) {
                      $td.addClass('range-cell').addClass('range-low');
                  }
              }
 } . Thank you for the light 🙂 Cheers, Raghav

[jbrodsky_splunk]

Raghav, would you mind posting in the entire .js you used?