Dashboards & Visualizations

How to color cell contents with .css and .js?

twjack
Explorer

I have a table with columns (Desc1,Desc2,Desc3...) and helper columns (AA,BB,CC...) with numerical values.

I want to colorize the cells in the Desc columns using the numerical values of the helper columns.

I need your support here.

alt text

0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI @twjack,

I have tried to achieve this using JS and CSS. Can you please try below XML?

<dashboard script="myjs.js" stylesheet="mycss.css">
  <label>Traffic Signal</label>
  <row>
    <panel>
      <table id="my_table">
        <search>
          <query>| makeresults 
| eval Desc1="Test1",AA="5",Desc2="Test2",BB="5", Desc3="Test3",CC="1" | append [| makeresults 
| eval Desc1="Test4",AA="1",Desc2="Test5",BB="1", Desc3="Test6",CC="3"] 
| table Desc1 AA Desc2 BB Desc3 CC
| eval Desc1=Desc1."|".AA,Desc2=Desc2."|".BB,Desc3=Desc3."|".CC</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

myjs.js

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

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

            if(val=="1" || val=="3" || val=="5")
            {
                $td.html("<div class='css_for_"+val+"'>"+label+"</div>")
            }
            else
            {
                $td.html("<div class='align_center'>"+label+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["my_table"];
    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();
            });
        }
    }    
});

mycss.css

.css_for_1 { 
background-color:red;
}
.css_for_3 { 
background-color:orange;
}
.css_for_5 { 
background-color:green;
}

Put js and css file in below folder.

SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/

Note: I have updated Desc* columns with | eval Desc1=Desc1."|".AA,Desc2=Desc2."|".BB,Desc3=Desc3."|".CC .

Thanks
Kamlesh

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI @twjack,

I have tried to achieve this using JS and CSS. Can you please try below XML?

<dashboard script="myjs.js" stylesheet="mycss.css">
  <label>Traffic Signal</label>
  <row>
    <panel>
      <table id="my_table">
        <search>
          <query>| makeresults 
| eval Desc1="Test1",AA="5",Desc2="Test2",BB="5", Desc3="Test3",CC="1" | append [| makeresults 
| eval Desc1="Test4",AA="1",Desc2="Test5",BB="1", Desc3="Test6",CC="3"] 
| table Desc1 AA Desc2 BB Desc3 CC
| eval Desc1=Desc1."|".AA,Desc2=Desc2."|".BB,Desc3=Desc3."|".CC</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

myjs.js

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

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

            if(val=="1" || val=="3" || val=="5")
            {
                $td.html("<div class='css_for_"+val+"'>"+label+"</div>")
            }
            else
            {
                $td.html("<div class='align_center'>"+label+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["my_table"];
    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();
            });
        }
    }    
});

mycss.css

.css_for_1 { 
background-color:red;
}
.css_for_3 { 
background-color:orange;
}
.css_for_5 { 
background-color:green;
}

Put js and css file in below folder.

SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/

Note: I have updated Desc* columns with | eval Desc1=Desc1."|".AA,Desc2=Desc2."|".BB,Desc3=Desc3."|".CC .

Thanks
Kamlesh

twjack
Explorer

This works very well, but it doesn't look really nice in my dashboard. Can you possibly do me another favor and build me the same logic with inline icons (Iconset like custom_decorations Examples) ?

Thank you so much, I appreciate it.

0 Karma

niketn
Legend

@twjack. Here are three options for you:

https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

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

DataOrg
Builder

@kamlesh_vaghela @niketnilay
I have a column presentversion. i tried modifying the js but it doesnt work. can you pls update the js with my column name
i tried updating my column name here return _(['Desc1','Desc2','Desc3']).contains(cell.field);
but doesnt work.

presentversion
7.6.2.3|1
4.1.32|3
3.5.33.2|3
5.6.23|1
3.2.32|5
7.5.33|5

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI @twjack,

Yes, you can use some custom icon by changing in css only. I have used sample icon from w3schools. You have to replace link with your required icon's path. Please try to replace following css and check again.

.css_for_1 { 
height: 50px;
text-align: center;
background-color:red;
background: url('https://www.w3schools.com/images/compatible_chrome.gif');
background-repeat: no-repeat;
background-size: auto;
}
.css_for_3 { 
height: 50px;
text-align: center;
background-color:orange;
background: url('https://www.w3schools.com/images/compatible_firefox.gif');
background-repeat: no-repeat;
background-size: auto;
}
.css_for_5 { 
height: 50px;
text-align: center;
background-color:green;
background: url('https://www.w3schools.com/images/compatible_edge.gif');
background-repeat: no-repeat;
background-size: auto;
}

Thanks

paramagurukarth
Builder
0 Karma

niketn
Legend

@kamlesh_vaghela... awesome approach !!! 🙂

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

kamlesh_vaghela
SplunkTrust
SplunkTrust

Thanks @niketnilay.

🙂

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

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

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...