Dashboards & Visualizations

Use rangemap to change color of whole panel

markthompson
Builder

Hello,
We currently have a dashboard with a traffic light system running on the rangemap single icons. We want to change this to make it more easily visible by changing the color of the whole panel, not just the icon.

How would we do this?

Tags (3)
0 Karma

stephanefotso
Motivator

Hello! Here is what i will accomplish for you.
alt text

Assignements:

My dashboard will has 2 panels and a dropdown selection.
You select the index and time:
The first panel show the count of events:
The background is green if count >100, yellow: 70-100, red<70
I will use four files: bgcolor_single.xml, bgcolor_single.js , bgcolor_single.css and single_decorations.css.
Copy and paste js and css files in $SPLUNK_HOME$/etc/apps/your_app_name/appserver/static.
Don't forget to restart splunk.
The second ..........

Are you ready? lets go:

bgcolor_single.xml

<form script="bgcolor_single.js" stylesheet="bgcolor_single.css, single_decorations.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">
      <title>Count of all events in index=$index$</title>
      <searchString>index=$index$ OR index=_$index$|stats count | eval count = 550 | rangemap field=count none=0-99 low=100-199 guarded=200-299 elevated=300-399 high=400-499 severe=500-599 default=none</searchString>
      <earliestTime>$time.earliest$</earliestTime>
      <latestTime>$time.latest$</latestTime>
      <option name="classField">range</option>
      <option name="field">count</option>

    </single>
    <single id="id2">
      <title>Count of all events in index=$index$</title>
      <searchString>index=$index$ OR index=_$index$|stats count as value| eval value = 450 | rangemap field=value none=0-99 low=100-199 guarded=200-299 elevated=300-399 high=400-499 severe=500-599 default=none</searchString>
      <earliestTime>$time.earliest$</earliestTime>
      <latestTime>$time.latest$</latestTime>
      <option name="classField">range</option>
      <option name="field">value</option>

    </single>
  </row>
</form>

bgcolor_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');
                    $('#id2').removeClass('pan_yellow');
                    $('#id1').removeClass('pan_green');
                    $('#id2').removeClass('pan_red');
                   $('#id1').addClass('pan_red');
                    $('#id2').addClass('pan_green');


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

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

bgcolor_single.css

.single-trend {
    position: relative;
    top: -15px;
    text-align: center;
    font-size: 18px;
    color: #888;
}


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


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

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

single_decorations.css

  .single-value:before {
        font-family: "Splunk Icons";
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        font-size: 48px;
    }
    .severe.single-value:before {
        content: "\2297";
        color: #ff1f24;
    }
    .high.single-value:before {
        content: "\ECD4";
        color: #ff7e00;
    }
    .elevated.single-value:before {
        content: "\26A0";
        color: #ffb800;
    }
    .low.single-value:before {
        content: "\ECD3";
        color: #00b932;
    }
    .guarded.single-value:before {
        content: "\0049";
        color: #4da6df;
    }
    .icon-only.single-value:before {
        font-size: 65px;
    }
    .icon-only .single-result {
        display: none;
    }
0 Karma

stephanefotso
Motivator

Let me know if your satisfy!!!

0 Karma

rajnish1202
Explorer

HI Stephan,
I am trying to use your solution for a requirement and I am not able to get any value(shows undefined value) in field "cur" you have used in below line.

var cur = parseFloat(data[0][field]);

You mentioned that "data" is the search results. but I am not sure how I can get the value of a particular field in the search result.

Can you please help me with this?

Many thanks in advance.

Regards,
Rajnish Kumar

0 Karma

Tune In & Win!

Don't miss out on your
chance to take home free
prizes by helping our players
save the Splunk Cloudom!

Dungeons & Data
Monsters: Splunk O11y
Day Editions Games
stream live:
5/4 at 6:30pm PST
5/5 at 7:00pm PST
on