Below table we have in a dashboard, the cells are highlighted by color using the Javascript. For each cell we wrote the separate javascript file like.,
<dashboard script="Running.js,Ready.js,Stop.js,Pause.js,Emergency.js,CF.js" stylesheet="New.css">
what we expect is the color of each cell should be same when the Match field value is "Good", if the Match field value is "Bad", Need to Highlight the whole Row.
//Sample Javascript Code:
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 the confirm field
return _(['CF']).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
if (cell.field === 'CF') {
if (value > 0) {
$td.addClass('range-cell').addClass('range-CF');
}
else {
$td.addClass('range-cell').addClass('range-White');
}
}
// Update the cell content
$td.text(value.toFixed()).addClass('numeric');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
//Sample .CSS Code
/* Cell Highlighting */
/*
#highlight td {
background-color: #c1ffc3 !important;
}
*/
#highlight td.range-stop {
background-color: #FF1B09 !important;
}
#highlight td.range-Emergency {
background-color: #CB1708 !important;
}
#highlight td.range-Pause {
background-color: #f7bc38 !important;
}
#highlight td.range-Run {
background-color: #65a637 !important;
}
#highlight td.range-Ready {
background-color: #A2CC3E !important;
}
#highlight td.range-CF {
background-color: #6DB7C6 !important;
}
#highlight td.range-MS {
background-color: #000000 !important;
}
#highlight td.range-White {
background-color: #ffffff !important;
}
#highlight td.range-severe {
background-color: #3358FF !important;
font-weight: bold;
}
How can we do that, can you please help us?
