Solved: Re: Is it possible to change color of table cell d...

ny34940 · ‎03-28-2018

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

niketn · ‎03-29-2018

@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());
     });
});

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn · ‎03-29-2018

@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());
     });
});

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

ny34940 · ‎04-01-2018

Thanks a lot for your help!!

niketn · ‎03-29-2018

@ny34940 which version of Splunk are you on?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

muralikoppula · ‎03-28-2018

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

ny34940 · ‎03-28-2018

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

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

Automatic Discovery Part 1: What is Automatic Discovery in Splunk Observability Cloud ...

Real-Time Fraud Detection: How Splunk Dashboards Protect Financial Institutions

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...

Are you a member of the Splunk Community?

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

Automatic Discovery Part 1: What is Automatic Discovery in Splunk Observability Cloud ...

Real-Time Fraud Detection: How Splunk Dashboards Protect Financial Institutions

Splunk + ThousandEyes: Correlate frontend, app, and network data to troubleshoot ...