Splunk Search

How to change color depending on value using javascript with a twist, table column names are not fixed?

dojiepreji
Path Finder

Hello all,

I have below javascript code that I use to change the color of my table cell:

require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'splunkjs/mvc/simplexml/ready!'
  ], function(_, $, mvc, TableView) {

      var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function(cell) {
              return _(['Performance']).contains(cell.field);
          },
          render: function($td, cell) {
              var label = cell.value.split("|")[0];
              var val = cell.value.split("|")[1];

                if(val=="high")
                {
                  $td.html("<div class='css_for_high'>"+label+"</div>")
                } 
                else if(val=="low") 
                {
                  $td.html("<div class='css_for_low'>"+label+"</div>")
                }
                else if(val=="no")
                {
                  $td.html("<div class='css_for_no'>"+label+"</div>")
                } 
                else 
                {
                  $td.html("<div class='align_right'>"+label+"</div>")
                }

          }
      });

      //List of table IDs to add icon
      var tableIDs = ["customTable"];
      for (i=0;i<tableIDs.length;i++) {
          var sh = mvc.Components.get(tableIDs[i]);
          if(typeof(sh)!="undefined") {
              sh.getVisualization(function(tableView) {
                  // Add custom cell renderer and force re-render
                  tableView.table.addCellRenderer(new CustomRangeRenderer());
                  tableView.table.render();
              });
          }
      }    
  });   

My table has a column "Performance" with samples values like, "99.75|high", "100.00|low", etc.

What the code does is get these values of column "Performance", split it, and then change the color depending on val.

Now, I have a table that looks something like this:
alt text

The number of columns increases or decreases depending on the time picker chosen by the user.
What should I put in line:

return _(['Performance']).contains(cell.field);

to make all the column with date headers be read by the javascript code?

0 Karma
1 Solution

jacobpevans
Motivator

Just guessing, but try changing return _(['Performance']).contains(cell.field); to return true;

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.

View solution in original post

dojiepreji
Path Finder

Answered by @jacobevans, change line return _(['Performance']).contains(cell.field); to return true;.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@dojiepreji You should accept @jacobevans 's answer. I have converted his comment to answer. 🙂

jacobpevans
Motivator

Thanks 🙂 I had no idea if it would work!

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.
0 Karma

jacobpevans
Motivator

Just guessing, but try changing return _(['Performance']).contains(cell.field); to return true;

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...