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

@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

@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 on Splunk Lantern in August

This month’s Splunk Lantern update gives you the low-down on all of the articles we’ve published over the past ...

Welcome to the Future of Data Search & Exploration

You have more data coming at you than ever before. Over the next five years, the total amount of digital data ...

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

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