I am having issues getting this to work. I have copied my .js and .css files below. I triple checked them but may be I missed something.
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
var allowedCells = ["Application_Availability","Application_Response"] return (allowedCells.indexOf(cell.field)) > -1;
},
render: function($td, cell) {
var count = cell.value;
// Compute the icon base on the field value
var icon;
if(count <= 50) {
icon = 'severe';
} else if(count > 50 && count < 100) {
icon = 'elevated';
} else if(count == 100) {
icon = 'low';
} else {
icon='none';
}
// 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: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomIconRenderer());
// Force the table to re-render
tableView.table.render();
});
});
.css=====================================================
/* Custom Icons */
td.icon {
text-align: center;
}
td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
td.icon .severe {
color: red;
}
td.icon .elevated {
color: yellow;
}
td.icon .low {
color: #006400;
}
/* Row Coloring */
#highlight tr td {
background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
background-color: #d59392 !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-severe {
color: #ef392c;
}
.icon-inline i.icon-elevated {
color: #ff9c1a;
}
.icon-inline i.icon-low {
color: #5fff5e;
}
... View more