How to color a table cell whose column name is dynamic

[kabiraj]

I want to color cells of a column name which is in dynamic _time format. Below is my format if we select last 3 days from timepicker.

Channel 22-Jun-15 21-Jun-15 20-Jun-15 19-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

I want to color all the dynamic _time column cells based on the numbers that cell contains. In Splunk Dashboard Examples 6.x, the method is mentioned only for a static column name.

Can it be done if the column name is dynamic. Please help.

[paramagurukarth]

You can do it using splunk/etc/apps/MyApplication/appserver/static/application.js...

if(Splunk.util.getCurrentView() == "yourViewName" && Splunk.Module.SimpleResultsTable){
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function() {
            var container = this.container;
            .
            .
            . **Select and color your element using jQuery**
            .
            .
            .
        }
    });
}

Above example is to customize SimpleResultsTable....
*container is the parent div element of your table view

[kabiraj]

Hi paramagurukarthikeyan. Appreciate you answer but couldn't understand the entire part. It would be great if you could explain me a bit more and tell me what exactly will be my return field.

ex -

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
return _(['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
// Apply interpretation for number of historical searches
if (cell.field === 'active_hist_searches') {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'active_realtime_searches') {
if (value > 1) {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
// Add custom cell renderer
tableView.table.addCellRenderer(new CustomRangeRenderer());
// tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
// tableView.$el.find('td.range-cell').each(function() {
// $(this).addClass(this.className);
// });
//});
// Force the table to re-render
tableView.table.render();
});
});

In the above example, the return fields are 'active_hist_searches' & 'active_realtime_searches'. Smilarly for my case as its a dynamic _time field, what should i write inside return[]?

[paramagurukarth]

I guess you will the same column number even if you have different field name..
If that is right...... Then you can get the column position and decide your color...

$td.parent().children().index($td[0]) == coloumnPos

1. Get the parent Element (i.e )
2. get the list of childrens (i.e. ss)
3. find the position of the current td and compare it with your column position and do the rest with coloring....

Note : coloumn count starts from Zero ...i.e zero for 1st column

[kabiraj]

Below is my query :

sourcetype=shmapplogs "getMS3SAS ended for - deviceId" | bucket span=1d _time | stats count by _time channelId | sort count desc | lookup youview_channels.csv service_id_truncated AS channelId OUTPUT channel_name_letter | streamstats count AS position by _time | fields channel_name_letter position _time | convert timeformat="%d-%b-%Y" ctime(_time) As Time | chart max(position) over channel_name_letter by Time

I want to color the cells belong to 'Time' field.

[paramagurukarth]

Instead, can you Please show me your results screen shot.....

[paramagurukarth]

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(, $, mvc, TableView) {
    // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            return (['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            // Apply interpretation for number of historical searches
            var tdPosition = $td.parent().children().index($td[0]);
            //To customize First Column based on its value
            if (tdPosition == 0) {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('range-severe');
                } else if (value > 1) {
                    $td.addClass('range-cell').addClass('range-elevated');
                } else if (value > 0) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
            // Apply interpretation for number of realtime searches
            //To customize Second Column based on its value
            if (tdPosition == 1) {
                if (value > 1) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
            }
            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('highlight').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.on('rendered', function() {
        // Apply class of the cells to the parent row in order to color the whole row
        // tableView.$el.find('td.range-cell').each(function() {
        // $(this).addClass(this.className);
        // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});

[kabiraj]

can i use below to give same condition for all the columns after 1st column.

if (tdPosition > 0) {
if (value > 2) {
$td.addClass('range-cell').addClass('range-severe');
} else if (value > 1) {
$td.addClass('range-cell').addClass('range-elevated');
} else if (value > 0) {
$td.addClass('range-cell').addClass('range-low');
}
}

Also do i need return field if i use tdposition?

[paramagurukarth]

yes you can... to confirm that just put a console.log(tdposition + value) before that condition

[kabiraj]

okay.. Thank you.. one more question..

return (['active_hist_searches', 'active_realtime_searches']).contains(cell.field);
},

The names mentioned in return[] contains the field names whose cells i want to color. what should i mention in return field for my case as the column names are dynamic?

my first field name is "Channel" and it's static. After that only dynamic _time column names will come.

[paramagurukarth]

send me what you are getting a a value for cell
Or
Before sending that just try return true;

[kabiraj]

In the below link i have specified everything very clearly. Please have a look.

http://answers.splunk.com/answers/249570/content-not-showing-in-the-table.html

[kabiraj]

Hi paramagurukarthikeyan.
Below is the script i am using right now. The bolded parts (i.e parts with **) has some problems. The table is showing empty i.e. only the column names are showing without any values. I think there is some problem with updating the cell content. Can you please help?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
     // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
            **return true;**
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            // Apply interpretation for number of historical searches
                var tdPosition = $td.parent().children().index($td[0]);
                **var value = cell.value;**
            if (tdPosition > 0) {
                    **var value = parseFloat(value);**
                if ((value > 0) && (value <= 50)) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if ((value > 50) && (value <= 100)) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if ((value > 100) && (value <= 150)) {
                    $td.addClass('range-cell').addClass('range-low');
                }
                    else {
                        $td.addClass('range-cell').addClass('range-empty');
                    }

            }
            // Update the cell content
                **$td.text(value).addClass('numeric');**
        }
    });
    mvc.Components.get('rettable').getVisualization(function(tableView) {
        // Add custom cell renderer
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
           // tableView.$el.find('td.range-cell').each(function() {
           //     $(this).addClass(this.className);
           // });
        //});
        // Force the table to re-render
        tableView.table.render();
    });
});

[kabiraj]

Below will be sample of my results if i chose 3 days from timepicker

Channel 22-Jun-15 21-Jun-15 20-Jun-15 19-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3

My query:
sourcetype=shmapplogs "getMS3SAS ended for - deviceId" | bucket span=1d _time | stats count by _time channelId | sort count desc | lookup youview_channels.csv service_id_truncated AS channelId OUTPUT channel_name_letter | streamstats count AS position by _time | fields channel_name_letter position _time | convert timeformat="%d-%b-%Y" ctime(_time) As Time | chart max(position) over channel_name_letter by Time

i want to color all '_time' columns from the above format based on the numbers each column contains.

Channel will be the static column and rest all will be dynamic. I want coloring only for dynamic columns.

so what should i write for return[()].contains(cell.field)?

[paramagurukarth]

Inside C:\Program Files\Splunk\share\splunk\search_mrsparkle\exposed\js\build\splunkjs\mvc\tableview.js, the render method will be called only if canRender method returns true for that cell...

if (cellRenderer instanceof BaseCellRenderer) {
if (cellRenderer.canRender(cellData)) {
cellRenderer.setup($td, cellData);
cellRenderer.render($td, cellData);
renderedCell.cellData = cellData;
renderedCell.cellRenderer = cellRenderer;
break;
}

So you have to identify the required cell in candRender too...

But before investing time in that just return true from candRender method and see whether it work or not...

[paramagurukarth]

If you see the tableview.js inside C:\Program Files\Splunk\share\splunk\search_mrsparkle\exposed\js\build\splunkjs\mvc
it will cal render only if the canRender returns true

if (cellRenderer instanceof BaseCellRenderer) {
                        if (**cellRenderer.canRender(cellData)**) {
                            cellRenderer.setup($td, cellData);
                            **cellRenderer.render($td, cellData);**
                            renderedCell.cellData = cellData;
                            renderedCell.cellRenderer = cellRenderer;
                            break;
                        }

You must identify you column number in canRender too or just return true; from canRender... and check what is happening..........

[kabiraj]

i cannot post screenshots here. But in my question itself i have specified the format of my results. Please have a look.

[kabiraj]

Hi paramagurukarthikeyan. If you could just give one example to demonstrate the solution you suggested, it would be great.