You have learned most of the advanced visualizations that we can implement on the Splunk dashboard along with examples. Now, in this section of the chapter, we will look at how custom decoration can be done on Splunk single value visualization to make it aesthetically pleasing and more informative in terms of using signs/symbols, and color combinations.
Let's look at a few examples of custom decorations that can be implemented on single value visualization, which you have already learned in the previous chapter.
The preceding image shows the default Splunk icons that can be used in a single value to depict specific information. These icons can be made dynamic, and depending on the specified condition, the relevant icons will be shown. This example shows decorations using tokens from search results, HTML panels, and some custom CSS. The icons are displayed using the Splunk Icon font.
Let me explain how the preceding customized decorations can be useful. If the single value is used to display information such as KPIs (Key Performance Indicators) of a specific field, then depending on the value of the KPI, the respective icon should be displayed.
For example, if the KPI value is between 0-100, that means it is performing well, and the single value should show a green tick. If the value is between 100-200, that means it is performing fine (neither good nor bad). Then, it should show an orange circle with an exclamation mark in the single value visualization. If the range is above 500, then red-cross icons should be visible.
The following image shows the custom decoration along with the single value:
The most important use of this custom decoration is that it is very informative. The user who is looking at the single value visualization need not remember the threshold of good, bad, or worst range of KPI values. The range of threshold is already coded, so depending on the value, the respective decoration is shown along with the single value.
So, just by looking at the icon, informative or corrective actions can be taken instantly. Thus, custom decoration can be very useful to show relevant important information using custom icons.
Now, since we are aware what custom decoration is and how it can be useful along with single value visualization, let's see how we can implement such custom decorations.
Let's first have a look at the CSS (custom_decorations.css) that needs to be used to implement this visualization on the Splunk dashboard. Similar to all the above D3 visualizations, this CSS file is also available in the static folder of the app directory, and it can be used from there.
The following steps need to be taken to implement custom decorations:
- The XML should include the CSS (
custom_decorations.css) by modifying it as follows:<dashboard stylesheet="custom_decorations.css">
- The following code snippet will result in a custom decoration along with a single value:
- In the preceding code snippet, the search query has
rangemapwhosefieldparameter is used to specifyfieldname(value) on whichrangemapis to be checked. The value is500in the example, which belongs to the severe range (500-599). Hence, the output will be a red cross. - In the preceding snippet, the class is
custom-result-value. Hence, the output has both the custom decoration and the value, that is,500, as shown in the preceding screenshot. - The class can be set as follows when only custom decoration is required. The value is not required to be displayed in the visualization:
<div class="custom-result-value icon-only $range1$"> </div>
- On using the preceding class, the output will be as follows:
- The definition of all the value used in
rangemap(none,low,guarded,elevated,high,severe,default) are defined in the CSS file, and it can be customized as per need. The CSS uses the Splunk Icons font family to display custom decorations.
Similarly, by modifying the CSS and the previous code snippet, required custom decorations can be implemented on the Splunk dashboard.