All Apps and Add-ons

Table cell Highlighting for several field values

Raghav2384
Motivator

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

0 Karma
1 Solution

martin_mueller
SplunkTrust
SplunkTrust

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.

View solution in original post

Raghav2384
Motivator
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
Communicator

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

0 Karma

otman01
Communicator

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

0 Karma

jbrodsky_splunk
Splunk Employee
Splunk Employee

thanks Raghav!

0 Karma

martin_mueller
SplunkTrust
SplunkTrust

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
Motivator

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
Splunk Employee
Splunk Employee

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

Get Updates on the Splunk Community!

2024 Splunk Career Impact Survey | Earn a $20 gift card for participating!

Hear ye, hear ye! The time has come again for Splunk's annual Career Impact Survey!  We need your help by ...

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...