Hi Guys.
I want to color the cells of my table based on the values that belong to columns other than the first column. My column names are Dynamic. Below is a Sample of what my table looks like if we select 'Last 3 days' from timepicker:
Channel 23-Jun-15 22-Jun-15 21-Jun-15 20-Jun-15
BBC Sport 6 3 7 9
Discovery 2 6 4 3
Here i want to color all the cells after "Channel" column based on the cell values.
Below is the Script i am using :
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();
});
});
But the table is showing empty i.e. only column names are showing without any values. I think there is some problem with updating cell content in query. Please help.
I would try different approach for getting td position.
Since the table is not rendered yet (we are in the setup stage) I'd rather use cell.index.
So instead of
var tdPosition = $td.parent().children().index($td[0]);
I would use:
var tdPosition = cell.index;
We can even go further and render custom classes only for the columns which are not first.
Then your entire function would be this way:
var CustomCellRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for all fields except first column
return cell.index > 0;
},
render: function($td, cell) {
var value = parseFloat(cell.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');
}
});
Hi
Is it possible to do the same for string values in fields instead of numeric.
Am trying this but not working any help provided is appreciated.
if (cell.field !== "source_subnet") {
if (value !== "100%") {
$td.addClass("range-cell").addClass("range-severe");
}
// Update the cell content
$td.text(value).addClass('string');
}
Please ignore am using "100%" as string.
Thanks
Thank You piUek. Appreciate your answer but i got it long back. Thanks again for replying.