dynamic change of bg color based on single value

[asimagu]

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

[stephanefotso]

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

[lavanyaanne]

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.

[royimad]

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