topic Re: Is it possible to change color of table cell depending on the dropdown input? in Dashboards & Visualizations

Is it possible to change color of table cell depending on the dropdown input?

ny34940 — Wed, 28 Mar 2018 16:38:01 GMT

In my dashboard, I have to highlight the cells that have a value greater than the value selected by the user. I am not sure how to do it.
I tried doing the code but it is not working. I have attached the js and xml code below

<form script="testexception11.js" stylesheet="ptilecolors.css">
  <label>newtesttable</label>
  <fieldset autoRun="true" submitButton="true">
    <input type="dropdown" token="adjhours" searchWhenChanged="true">
      <label>test</label>
      <choice value="100">100%</choice>
      <choice value="200">200%</choice>
      <choice value="300">300%</choice>
      <choice value="1000">1000%</choice>
      <choice value="10000">10000%</choice>
      <default>10000</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table id="hourtab">
        <search>
          <query>index="_internal"|stats count as TOTAL_COUNT by sourcetype</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>

JavaScript

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

        // Access the "default" token model
        var tokens = mvc.Components.get("default");

        tokens.on("change:adjhours",function(){
                var hoursvalue=Number(tokens.get("adjhours"));
                console.log("xyz",hoursvalue);

            var renderhourtab = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
                return true;
            },
            render: function($td, cell) {
                var cellcontent = Number(cell.value);
                if (cell.field == 'TOTAL_COUNT'){           //check if the field name conatins %Adjusted
                    if (cellcontent > hoursvalue){
                        $td.addClass('Red');
                    } 
                    else {
                        $td.addClass('Purple');
                    }
                }
            // Update the cell content
                $td.text(cell.value)
            }   
        });
                 console.log(1);
                var mytab = mvc.Components.get("hourtab");
                mytab.getVisualization(function(tableView){
                    tableView.table.addCellRenderer(new renderhourtab());
                     tableView.table.render();  
                });
                 console.log(2);
        });
         console.log(3);
 });

Re: Is it possible to change color of table cell depending on the dropdown input?

muralikoppula — Wed, 28 Mar 2018 18:29:33 GMT

Try this one,
https://answers.splunk.com/answers/418487/how-to-set-up-table-cell-highlighting-with-differe.html

Re: Is it possible to change color of table cell depending on the dropdown input?

ny34940 — Thu, 29 Mar 2018 03:26:26 GMT

Thanks for the reply!

I have tried to recreate the code as per my requirement, however there are few problems in it. I have to capture the token change event and render the table every time token value is changed. Can you please help me with this?

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

    // Access the "default" token model
    var tokens = mvc.Components.get("default");
    var hoursvalue = Number(tokens.get("adjhours"));
    var renderhourtab = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return true;
        },
        render: function($td, cell) {
            var cellcontent = Number(cell.value);
            if (cell.field == 'TOTAL_COUNT' ){              
                 if (cellcontent > hoursvalue){
                    $td.addClass('Red');
                 }
                else{
                    $td.addClass('Green');
                    }
            }
        // Update the cell content
             $td.text(cell.value)
        }             
    });
        mvc.Components.get('hourtab').getVisualization(function(tableView) {
        tableView.table.addCellRenderer(new renderhourtab());
        tableView.table.render();
        });
        console.log("xyz",hoursvalue);
});

Re: Is it possible to change color of table cell depending on the dropdown input?

niketn — Thu, 29 Mar 2018 13:57:29 GMT

@ny34940 which version of Splunk are you on?

Re: Is it possible to change color of table cell depending on the dropdown input?

niketn — Thu, 29 Mar 2018 18:11:24 GMT

@ny34940, Please try the following run anywhere example based on Splunk's _internal errors. Please try out and confirm.

It is setting the default Threshold values as 20%, both in Simple XML dropdown and JavaScript token. On change event of the Threshold Dropdown, the token value is capture and compared for each Percent cell value (perc) using CustomRangeRenderer for the table with id="table1". CSS is applied through hidden <html> pane (using depends attribute with a token which is never set) with <style> node within Simple XML.

Following is the SImple XML code:

<form script="table_color_by_dynamic_threshold.js">
  <label>Change Table Cell Colors based on Drop Down</label>
  <fieldset autoRun="true" submitButton="true">
    <input type="time" token="tokTime" searchWhenChanged="false">
      <label>Select Time</label>
      <default>
        <earliest>-30d@d</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="adjhours" searchWhenChanged="false">
      <label>Threshold</label>
      <choice value="20">20%</choice>
      <choice value="40">40%</choice>
      <choice value="60">60%</choice>
      <choice value="80">80%</choice>
      <choice value="90">90%</choice>
      <default>20</default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
        <style>
           /* Tabel Cell Coloring */

           #table1 td.range-low {
               background-color: #65A637 !important;
           }

           #table1 td.range-severe {
               background-color: #D93F3C !important;
           }

           #table1 .table td {
               border-top: 1px solid #fff;
           }
           /* 
           Apply bold font for rows with custom range colors other than Green(default).
           Bold font will ensure that jQuery is working fine to apply appropriate range Class. 
           */
           #table1 td.range-low, td.range-severe{
               font-weight: bold;
           }
        </style>
      </html>
    </panel>
    <panel>
      <title>Splunk Errors % by Sourcetype</title>
      <table id="table1">
        <search>
          <query>| metadata type=sourcetypes where index="_internal"
| fields sourcetype totalCount
| eventstats sum(totalCount) as Total
| eval perc=round((totalCount/Total)*100,1)
| fields sourcetype perc
| sort - perc
| eval dummy="$adjhours$"
| fields - dummy</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>

Following is the JavaScript code for table_color_by_dynamic_threshold.js to be placed under appserver/static folder on your app.

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

     // Access the "submitted" token model
     var submittedTokenModel = mvc.Components.get("submitted");
     //Set the submitted threshold as 20. Should match with default value of Dropdown
     var intAdjHours=20;
     submittedTokenModel.on("change:adjhours", function(newTokenName, adjhours, options) {
         if (adjhours !== "undefined") {
            intAdjHours=parseFloat(adjhours);
         }
     });

    // Row Coloring by threshold percentage
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Enable this custom cell renderer for perc field
             return _(["perc"]).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var value = cell.value;
             value=parseFloat(value);
             // Apply interpretation for perc field
             if (cell.field === "perc") {
                 if (value >= intAdjHours) {
                     $td.addClass("range-cell").addClass("range-severe");
                 }else{
                     $td.addClass("range-cell").addClass("range-low");
                 } 
             }

             // Update the cell content with string perc value
             $td.text(value).addClass("string");
         }
     });

     mvc.Components.get("table1").getVisualization(function(tableView) {
         // Add custom cell renderer, the table will re-render automatically.
         tableView.addCellRenderer(new CustomRangeRenderer());
     });
});

Re: Is it possible to change color of table cell depending on the dropdown input?

ny34940 — Sun, 01 Apr 2018 11:59:34 GMT

Thanks a lot for your help!!