@mschellhouse, I have answered something on similar lines: https://answers.splunk.com/answers/583047/can-i-color-a-cell-based-on-condition.html
In you case you can have a Threshold % value based on which Rows will be colored. Here is the run anywhere example which you can modify as per your needs:
Simple XML Dashboard Code with CSS Style Inline:
<dashboard script="table_row_highlighting_by_threshold.js">
<label>Color based on Increase percent Threshold</label>
<row>
<panel>
<html depends="$alwaysHideCSSHTMLPanel$">
<style>
/* Row Coloring */
#highlight tr td {
background-color: #65A637 !important;
}
#highlight tr.range-green td {
background-color: #65A637 !important;
}
#highlight tr.range-yellow td {
background-color: #F7BC38 !important;
}
#highlight tr.range-red td {
background-color: #D93F3C !important;
}
#highlight tr.range-grey td {
background-color: #f3f3f3 !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
/*
Apply bold font for rows with custom range colors other than Green(default).
Bold font will ensure that jQuery is working fine to apply appropriate range Class.
*/
#highlight td.range-yellow, td.range-red, td.range-grey{
font-weight: bold;
}
</style>
</html>
<table id="highlight">
<search>
<query>| makeresults
| eval Column1="100",Column2="50"
| append
[| makeresults
| eval Column1="100",Column2="120"]
| append
[| makeresults
| eval Column1="100",Column2="130"]
| fields - _time
| eval Threshold%=round(((Column2-Column1)/Column1)*100,1)."%"</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
JavaScript code for table_row_highlighting_by_threshold.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Row Coloring by String Comparision of Numeric Time Value in HH:MM:SS
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for Threshold% field
return _(["Threshold%"]).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value percent valuePerc
var valuePerc = cell.value;
// Remove trailing % sign
var value = valuePerc.substring(0, valuePerc.length - 1);
// Convert to floating number
var value = parseFloat(value);
// Apply interpretation for RAG status field
// Since we have picked only one row for applying range Class, following if is not required.
if (cell.field === "Threshold%") {
//Add range class based on cell values.
if (value <0) {
$td.addClass("range-cell").addClass("range-green");
}
else if (value >=0 && value <25 ) {
$td.addClass("range-cell").addClass("range-yellow");
}
else if (value >=25 ) {
$td.addClass("range-cell").addClass("range-red");
}
else {
$td.addClass("range-cell").addClass("range-grey");
}
}
// Update the cell content with percent valuePerc
$td.text(valuePerc).addClass('string');
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
setTimeout(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).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
Please try out and confirm.
