Dashboards & Visualizations

Format row colour in multiple tables on a dashboard based on column value

ALXWBR
Path Finder

I have a dashboard that I'm working on that requires me to conditionally format table rows based on a field. The dashboard currently has 6 identical tables (in terms of the column names) and I need to be able to apply the JavaScript to each of them. I am aware that I can just state each table in the JavaScript, however, ideally I'd like to not have to do that, as I'm going to be adding additional tables to the dashboard over time. As this will live on cloud, I don't want to have to keep uploading the app every time I make a change.
 

Is there a way to replace 'the get('highlight01')' with something more generic or even loop that aspect of the code for all tables on the dashboard?

 

 

requirejs([
    // It's important that these don't end in ".js" per RJS convention
    '../app/TA-lgw_images_and-_files/libs/jquery-3.6.0-umd-min',
    '../app/TA-lgw_images_and-_files/libs/underscore-1.6.0-umd-min',
    '../app/TA-lgw_images_and-_files/theme_utils',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, themeUtils, mvc, TableView) {
    // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer
            return _(['target_met']).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 historical searches
            if (cell.field === 'target_met') {
                if (value > 0) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    mvc.Components.get('highlight01').getVisualization(function(tableView) {
        tableView.on('rendered', 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);
            });

        });
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
	

});

 

Example dashboard XML you can use

<dashboard version="1.1" script="dpi_ops_evaluation.js" stylesheet="dpi_ops_evaluation.css">
  <label>DPI TEST</label>
  <row>
    <panel>
      <table id="highlight01">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight02">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight03">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight04">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight05">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="highlight06">
        <search>
          <query>| makeresults count=6
| streamstats count as Ref
| eval target_met = random() % 2,
measure= "Measure ".Ref
| fields - _time</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>
Labels (3)
0 Karma
Get Updates on the Splunk Community!

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Stronger Security with Federated Search for S3, GCP SQL & Australian Threat ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Accelerating Observability as Code with the Splunk AI Assistant

We’ve seen in previous posts what Observability as Code (OaC) is and how it’s now essential for managing ...