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!

Observability | Use Synthetic Monitoring for Website Metadata Verification

If you are on Splunk Observability Cloud, you may already have Synthetic Monitoringin your observability ...

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...