Dashboards & Visualizations

Is it possible to add icons on the even rows of only one columns based on a condition ?

rijinc
Explorer

This is my table :
Location SchoolName Studentcount
India xxxx1 1
xxxx2 2
India Total 3
US xxxx3 4
xxxx4 2
India Total 6

I want to give rag status in the Studentcount column on the rows which contains total should be ignored and the multivalue cell which is the student count should contain the icons besides the value.

My code is this , however I am not able to remove the icons from the "total" any help on this ?

CODE : (JS code)

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            var columns = ['Studentcount'];
            return columns.indexOf(cell.field) > -1;
        },
        render: function($td, cell) {
            var value = cell.value;
            var columnName = cell.field;
            //var 'Total_Realized_Savings(K$)' = parseFloat(cell.value);
            // Compute the icon base on the field value
            var icon;

            if(value > 0) {
                icon = 'alert-circle';
            } else if(value < 0) {
                icon = 'alert';
            } else {
                icon = 'check';
            }
            // Create the icon element and add it to the table cell
            $td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: value,
            }));
        }
    });
    mvc.Components.get('Subtotal').getVisualization(function(tableView){
        // Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new CustomIconRenderer());
    });
});
0 Karma

niketn
Legend

[Update]

I just re-read the question. I have hidden even rows where the question was to actually show only event row. Minor changes required for the same are to select odd rows in css and apply white color (#fff) instead of grey (#f5f5f5 )

     #table1 tr.odd .icon-inline i[class^="icon"]{
        color: #fff !important;
      }

Please try out and confirm the results.


@rijinc, it is not very clear from your example as to which rows will have icons hidden. However, based on the question if you want to hide icons in even rows, here is a quick dirty hack through CSS.

Splunk uses grey color in every even row in a table and it uses svg to draw icons. Which implies if you color even row icon as grey they will be hidden. Add the following to your table_decorations.css file (may require bump of Splunk and browser cache cleanup)

     #table1 tr.even .icon-inline i[class^="icon"]{
        color: #f5f5f5 !important;
      }

PS: Ideally you should try to do something similar via jQuery in the table_icons_inline.js file.

alt text

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

rijinc
Explorer

Location SchoolName Studentcount
{1st Row} India xxxx1 1
xxxx2 2
{2nd Row}India Total 3
{3rd Row}US xxxx3 4
xxxx4 2
{4th Row}India Total 6

I want to add icons to the column Student count ( ex : 1, 2 etc above ) and should ignore the row which contain total ,that row should be left as it (ex: 2nd row and 4th row is the total fo these the icons should not be added to the value 3 : {2nd Row}India Total 3 )

The above query is adding icons to all the values in the columns "StudentCount"

0 Karma

niketn
Legend

Then one of the CSS Override that I have provided should work for you. However, which row you want to hide icon is still unclear. As per the explanation here, you don't want to add icon to {2nd Row} which is Even row (your question contradicts this as you mentioned that you needed icons in even rows). Anyhow, as stated in my answer add the following to your existing CSS and icons in even row will get hidden.

  #table1 tr.even .icon-inline i[class^="icon"]{
     color: #f5f5f5 !important;
   }

Restart Splunk and Clear Browser history for the changes to apply.

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

gcusello
SplunkTrust
SplunkTrust

Hi rijinc,
I solved a similar problem:
I wanted to show forwarder status, with a green icon for OK and red icon for NOK.
following the Splunk 6.0 Dashboard Examples App "Table Icon Set (Rangemap)" dashboard:

I inserted in the first row of my dashboard

<form script="table_icons_rangemap.js" stylesheet="table_decorations.css">

in the panel I inserted

<table id="table1">

in the panel's search I inserted

| rangemap field=Total severe=0-0 low=1-1000000000 default=severe 

where Total was the result of a stats count.

And then I copied from the examples App (%SPLUNK_HOME/apps/examples/appserver/static) into my App the following files:

  • table_icons_rangemap.js
  • table_decorations.css

Finally I restarted Splunk

In this way, range values are displayed using an icon.

Bye.
Giuseppe

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...