Dashboards & Visualizations

dynamic change of bg color based on single value

asimagu
Builder

hi guys

I was wondering if anyone has tried to change the background color of the panel where a single value is displayed, based on that single value.

It would be sort of what we can see in the Splunk Dashboards Samples app, with highlighting rows in a table. In this case I want to highlight the panel of just a single value, not a table.

thanks

0 Karma

stephanefotso
Motivator

Hello! this is the assignement i will accomplish for you:

  1. My dashboard will have one panel and a dropdown selection.
  2. You select the index and time:
  3. The panel show the count of event:
  4. The background is green if count >100, yellow: 70-100, red<70

I will use three files: bg_color_single.xml, bg_color_single.js and bg_color_single.css.
Copy and paste js and css files in $SPLUNK_HOME$/etc/apps/your_app_name/appserver/static.
Don't forget to restart splunk.
If you have any question, you can ask.

Are you ready? lets go:

bg_color_single.xml

<form script="bg_color_single.js" stylesheet="bg_color_single.css">
  <label>Single Value Customization: Panel Color</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" token="time" searchWhenChanged="true">
      <label/>
      <default>
        <earliestTime>0</earliestTime>
        <latestTime>now</latestTime>
      </default>
    </input>
    <input type="dropdown" token="index" searchWhenChanged="true">
      <label>Choose one index</label>
      <choice value="*">All</choice>
      <populatingSearch fieldForLabel="index" fieldForValue="index">| eventcount summarize=false index=* OR index=_*</populatingSearch>
      <default>*</default>
    </input>
  </fieldset>
  <row>
    <single id="id1">

      <searchString>index=$index$ OR index=_$index$|stats count</searchString>
      <earliestTime>$time.earliest$</earliestTime>
      <latestTime>$time.latest$</latestTime>
      <option name="field">count</option>
      <option name="beforeLabel">There is</option>
      <option name="afterLabel">Total Events</option>
      <option name="underLabel">All events</option>
    </single>

  </row>
</form>

bg_color_single.js

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplesplunkview',
    'splunkjs/mvc/simplexml/element/single',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, SimpleSplunkView, SingleElement) {


    // Custom view to annotate a single value element with a trend indicator
    var SingleValueTrendIndicator = SimpleSplunkView.extend({
        // Override fetch settings
        outputMode: 'json',
        returnCount: 1,
        // Default options
        options: {
            changeFieldType: 'text'
        },


        displayMessage: function() {
            // Don't display messages
        },
        createView: function() {
            return true;
        },
        /**
         * Automatically extract the numerical value of the first  result row and
         * create the trend value according to their value
         *
         * @param data the search results
         * @returns {*} the model object to for the template
         */
        autoExtractTrend: function(data) {
            var field = this.settings.get('field');
            // Only show the change if we get 2 results from the search
            if (data.length < 0) {
                return null;
            }
            var cur = parseFloat(data[0][field]);

             if (cur <70.00) {
                   $('#id1').removeClass('pan_yellow');

                    $('#id1').removeClass('pan_green');

                   $('#id1').addClass('pan_red');



                }
                else if ((cur>=70.00)&&(cur<=100.00)) {
                    $('#id1').removeClass('pan_red');

                    $('#id1').removeClass('pan_green');

                    $('#id1').addClass('pan_yellow');

                }
                else  {
                    $('#id1').removeClass('pan_red');

                    $('#id1').removeClass('pan_yellow');

                    $('#id1').addClass('pan_green');

                }

                 return {
                cur: data[0][field]
            };
        },
        updateView: function(viz, data) {
            this.$el.empty();
            var model = null;

                model = this.autoExtractTrend(data);

            if (!model) {
                return;
            }
            // Render the HTML
            this.$el(this.template(model));


        }

    });
    // Find all single value elements created on the dashboard
    _(mvc.Components.toJSON()).chain().filter(function(el) {
        return el instanceof SingleElement;
    }).each(function(singleElement) {
                singleElement.getVisualization(function(single) {
                    // Inject a new element after the single value visualization
                     var $el = $('<div></div>').insertAfter(single.$el);
                    // Create a new change view to attach to the single value visualization
                    new SingleValueTrendIndicator(_.extend(single.settings.toJSON(), {
                        el: $el,
                        id: _.uniqueId('single')
                    }));

                    // Force the single element to re-render
                    single.render();
                });
            });
});

bg_color_single.css

.pan_green{ 
    background-color: green !important; 
}


.pan_red{ 
    background-color: red !important; 
}

.pan_yellow{ 
    background-color: yellow !important; 
}
SGF

lavanyaanne
Path Finder

It Is working perfectly with single value. If i want to apply the same thing to other value in the same dashboard.
suppose if i added below code to the .XML file

how to change the background of this value based on resulting value .

   <searchString>index=$index$ OR index=_$index$|stats count</searchString>
   <earliestTime>$time.earliest$</earliestTime>
   <latestTime>$time.latest$</latestTime>
   <option name="field">count</option>
   <option name="beforeLabel">There is</option>
   <option name="afterLabel">Total Events</option>
   <option name="underLabel">All events</option>
 </single>

please let me know how i have to do? Thx in Advance.

0 Karma

royimad
Builder

Can this be generated for several single Element ? Display dynamic list of single Element ?

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...