topic Re: Table Data Bar - Customize in Splunk Search

Table Data Bar - Customize

adamsmith47 — Tue, 29 Sep 2020 14:18:34 GMT

I have a question for someone who's much better at JS and CSS than I am.

I'm looking to place a data bar within a table, in a dashboard. There is a handy example in the app Splunk 6.x Dashboard Examples called Table Data Bar, which I have successfully used. I will post the code for the example below. The example does nearly exactly what I need, although my management is asking for the "negative space" of the bar to be filled with a color as well. Here's an example of a bar in a table, using green as the percentage marker, and red in the negative space of the bar:

Any help is greatly appreciated. Thank you!

App: Splunk 6.x Dashboard Examples code:

custom_table_data_bar.xml:

<dashboard script="table_data_bar.js" stylesheet="table_data_bar.css">
    <label>Table Data Bar</label>
    <description>Custom table cell renderer that replaces a field value with a data bar.</description>
    <row>
        <table id="table1">
            <title>Top Sourcetypes (Last 24 hours)</title>
            <search>
                <query>index=_internal | top limit=100 sourcetype source</query>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
            </search>
            <option name="wrap">true</option>
            <option name="rowNumbers">true</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">cell</option>
            <option name="count">10</option>
        </table>
    </row>
</dashboard>

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 === 'percent');
        },
        render: function($td, cell) {
            $td.addClass('data-bar-cell').html(_.template('<div class="data-bar-wrapper"><div class="data-bar" style="width:<%- percent %>%"></div></div>', {
                percent: Math.min(Math.max(parseFloat(cell.value), 0), 100)
            }));
        }
    });
    mvc.Components.get('table1').getVisualization(function(tableView) {
        tableView.addCellRenderer(new DataBarCellRenderer());
    });
});

table_data_bar.css:

td.data-bar-cell {
    padding: 4px 8px;
}
td.data-bar-cell .data-bar-wrapper .data-bar {
    height: 16px;
    min-width: 1px;
    background-color: #5479AF;
}

Any thoughts?

Re: Table Data Bar - Customize

niketn — Fri, 02 Jun 2017 19:48:36 GMT

What is the query for your stats? Or in other what how are you calculating percent? What is it going to represent?

Re: Table Data Bar - Customize

adamsmith47 — Fri, 02 Jun 2017 20:08:03 GMT

Number of "foo"s + number of "bar"s = 100%

When the bar in the table is displayed, I'd like percentage of "foo"s to be represented by a green portion, and percentage of "bar"s to be represented by a red portion, where the green+ red make up the entirety of the bar. (Similar to the pic I posted in the question)

The form of the examples I've posted works, and I'm not looking for assistance with the calculations, just advice for how to add a second colored bar, to fill the remainder of the empty space above the percentage value. E.g., if the value is 0.30, I'd like bar to be 30% green, and 70% red.

Thanks again.

Re: Table Data Bar - Customize

roryab — Tue, 29 Sep 2020 18:55:34 GMT

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;
}

Re: Table Data Bar - Customize

niketn — Tue, 10 Apr 2018 15:19:43 GMT

@roryab [Splunk], I think adding a div will just complicate. All that is required is to add background-color as red for .data-bar-wrapper class and green for .data-bar class. However, I was not sure of the intention of this request.

Following is the only change required for Splunk Dashboard Example App's Table with Data Bars example:

td.data-bar-cell .data-bar-wrapper{
     background-color: red;
}

td.data-bar-cell .data-bar-wrapper .data-bar {
     height: 16px;
     min-width: 1px;
     background-color: green;
}

Re: Table Data Bar - Customize

roryab — Tue, 10 Apr 2018 15:29:02 GMT

I had added rounded corners to the bar to make it look cool, just changing the background would not have sufficed for me but it looks like it would probably fit the OP's request.

Re: Table Data Bar - Customize

niketn — Tue, 06 Nov 2018 21:47:47 GMT

@adamsmith47 @roryab, refer to my answer : https://answers.splunk.com/answers/694309/how-do-you-create-the-below-chart-in-splunk.html#answer-696835 to create multiple sections in table data bar based on percent. The example display the value by default but shows actual percent of each segment as Tooltip text.