I managed to achieve this by putting a second div in the background of the table cell.
This code updates a column titled: "Progress" in a table with id : "table_instances"
table_data_bar.js:
require([
'jquery',
'underscore',
'splunkjs/mvc',
'views/shared/results_table/renderers/BaseCellRenderer',
'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
var DataBarCellRenderer = BaseCellRenderer.extend({
canRender: function(cell) {
return (cell.field === 'Progress');
},
render: function($td, cell) {
$td.addClass('data-bar-cell').html(_.template('<div class="data-bar-wrapper"><div class="data-bar-back" style="width:100%"><div class="data-bar" style="width:<%- percent %>%"></div></div></div>', {
percent: Math.min(Math.max(parseFloat(cell.value), 0), 100)
}));
}
});
mvc.Components.get('table_instances').getVisualization(function(tableView) {
tableView.addCellRenderer(new DataBarCellRenderer());
});
});
table_data_bar.css:
td.data-bar-cell {
padding: 7px 4px;
}
td.data-bar-cell .data-bar-wrapper .data-bar-back .data-bar {
position: relative;
top: 0;
right: 0;
height: 10px;
min-width: 1px;
background-color: #30b5e2;
border-radius: 5px;
}
td.data-bar-cell .data-bar-wrapper .data-bar-back {
height: 10px;
min-width: 1px;
background-color: #e5e5e5;
border-radius: 5px;
}
... View more
