Number Display Viz

[madhav_dholakia]

Hello,

I am creating a panel on dashboard which shows SLA % for different teams and each of these teams have different SLA target. I have got a search ready to get the required data (i.e., Team, Actual SLA, Target SLA). I am using Number Display Viz (Spinner - Big Dash), with Team as Title, Actual SLA as Value and Target SLA as Subtitle.

I can format the threshold coloring from "General" tab based on Value (Actual SLA) but how to format threshold coloring in such a way that if Actual SLA is less than Target SLA, Spinner should be Red and if Actual SLA is greater than Target SLA, Spinner should be Green?

Thank you.

Madhav

[niketn · Accepted solution]

@madhav_dholakia one of the options with existing behavior of the Number Display viz is to move Current SLA as part of Title and calculate Delta of Target SLA and Current SLA as value (which eventually drives the color of spinners) and keep Target SLA as sub title.

If you want it as per your requirement you can request app developer @chrisyounger for enhancement to the visualization or change visualization source code yourself!

Following is the run anywhere simple XML example for the above screenshot which you can try ( I have a dummy query which generate two random numbers as current SLA and target SLA and the query also ensures that target SLA is always higher than current for demo purpose):

<dashboard>
  <label>Number Display Viz</label>
  <row>
    <panel>
      <viz type="number_display_viz.number_display_viz">
        <search>
          <query>| makeresults count=5 
| fields - _time 
| streamstats count as sno 
| eval TeamName="Team".sno, currentSLA=substr(tostring(random()),1,2), targetSLA=substr(tostring(random()),1,2) 
| eval tempSLA=currentSLA, currentSLA=if(targetSLA&gt;currentSLA,currentSLA,targetSLA), targetSLA=if(currentSLA==tempSLA,targetSLA,tempSLA)
| eval delta=targetSLA-currentSLA 
| eval targetSLA="Target: ".targetSLA."%", TeamName=TeamName."( Current:".currentSLA."% )" 
| rename delta as value, TeamName as title, targetSLA as subtitle
| table value title subtitle</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="height">192</option>
        <option name="number_display_viz.number_display_viz.bordercolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.bordersize">2</option>
        <option name="number_display_viz.number_display_viz.colorprimary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorprimarymode">auto</option>
        <option name="number_display_viz.number_display_viz.colorsecondary">#000000</option>
        <option name="number_display_viz.number_display_viz.colorsecondarymode">darker1</option>
        <option name="number_display_viz.number_display_viz.max">100</option>
        <option name="number_display_viz.number_display_viz.min">0</option>
        <option name="number_display_viz.number_display_viz.nodatacolor">#919191</option>
        <option name="number_display_viz.number_display_viz.padding">10</option>
        <option name="number_display_viz.number_display_viz.pulserate">4</option>
        <option name="number_display_viz.number_display_viz.shadowcolor">#F2F4F5</option>
        <option name="number_display_viz.number_display_viz.shapebordercolor">#FFFFFF</option>
        <option name="number_display_viz.number_display_viz.shapebordercolormode">static</option>
        <option name="number_display_viz.number_display_viz.shapebordersize">1</option>
        <option name="number_display_viz.number_display_viz.shapedropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.shapeshadow">yes</option>
        <option name="number_display_viz.number_display_viz.shapetexture">solid</option>
        <option name="number_display_viz.number_display_viz.sparkHeight">30</option>
        <option name="number_display_viz.number_display_viz.sparkWidth">90</option>
        <option name="number_display_viz.number_display_viz.sparkalign">5</option>
        <option name="number_display_viz.number_display_viz.sparkalignv">70</option>
        <option name="number_display_viz.number_display_viz.sparkcolorfill">#009DD9</option>
        <option name="number_display_viz.number_display_viz.sparkcolorline">#0178c7</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodefill">auto</option>
        <option name="number_display_viz.number_display_viz.sparkcolormodeline">auto</option>
        <option name="number_display_viz.number_display_viz.sparkmin">0</option>
        <option name="number_display_viz.number_display_viz.sparknulls">gaps</option>
        <option name="number_display_viz.number_display_viz.sparkorder">bg</option>
        <option name="number_display_viz.number_display_viz.sparkstyle">area</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmax">20</option>
        <option name="number_display_viz.number_display_viz.spinnerspeedmin">1</option>
        <option name="number_display_viz.number_display_viz.style">s1</option>
        <option name="number_display_viz.number_display_viz.subtitlealign">center</option>
        <option name="number_display_viz.number_display_viz.subtitlealignv">70</option>
        <option name="number_display_viz.number_display_viz.subtitlecolor">#5C6773</option>
        <option name="number_display_viz.number_display_viz.subtitlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.subtitledrop">yes</option>
        <option name="number_display_viz.number_display_viz.subtitledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.subtitlesize">40</option>
        <option name="number_display_viz.number_display_viz.textalign">center</option>
        <option name="number_display_viz.number_display_viz.textalignv">50</option>
        <option name="number_display_viz.number_display_viz.textcolor">#000000</option>
        <option name="number_display_viz.number_display_viz.textdrop">yes</option>
        <option name="number_display_viz.number_display_viz.textdropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.textduration">300</option>
        <option name="number_display_viz.number_display_viz.textmode">static</option>
        <option name="number_display_viz.number_display_viz.textprecision">1</option>
        <option name="number_display_viz.number_display_viz.textsize">100</option>
        <option name="number_display_viz.number_display_viz.textunitposition">after</option>
        <option name="number_display_viz.number_display_viz.textunitsize">50</option>
        <option name="number_display_viz.number_display_viz.thickness">50</option>
        <option name="number_display_viz.number_display_viz.thresholdcol1">#1a9035</option>
        <option name="number_display_viz.number_display_viz.thresholdcol2">#b6c75a</option>
        <option name="number_display_viz.number_display_viz.thresholdcol3">#ecbc1b</option>
        <option name="number_display_viz.number_display_viz.thresholdcol4">#ec9960</option>
        <option name="number_display_viz.number_display_viz.thresholdcol5">#b22b32</option>
        <option name="number_display_viz.number_display_viz.thresholdcol6">#ffffff</option>
        <option name="number_display_viz.number_display_viz.thresholdsize">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval2">5</option>
        <option name="number_display_viz.number_display_viz.thresholdval3">10</option>
        <option name="number_display_viz.number_display_viz.thresholdval4">20</option>
        <option name="number_display_viz.number_display_viz.thresholdval5">50</option>
        <option name="number_display_viz.number_display_viz.titlealign">center</option>
        <option name="number_display_viz.number_display_viz.titlealignv">30</option>
        <option name="number_display_viz.number_display_viz.titlecolor">#5C6773</option>
        <option name="number_display_viz.number_display_viz.titlecolormode">static</option>
        <option name="number_display_viz.number_display_viz.titledrop">yes</option>
        <option name="number_display_viz.number_display_viz.titledropcolor">#ffffff</option>
        <option name="number_display_viz.number_display_viz.titlesize">45</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>

[madhav_dholakia]

Hi @niketn , thank you for this work around, will be surely helpful. I have never tried looking/changing the source code - if you can suggest any helpful doc to understand the same for beginner. 

Thank you.

[niketn]

@madhav_dholakia following is the Splunk Documentation for Custom Visualization API: https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomVizApiRef

Let us know if you need further details about Custom Visualization API.

Do upvote the answer/comment if you found these helpful 🙂

[madhav_dholakia]

Thanks @niketn 

[niketn]

@madhav_dholakia for the community to assist you better, can you provide code snippet or anonymized sample code?

[madhav_dholakia]

Hi @niketn - please see below sample search.

index=idx source="idx_src" sourcetype="idx_srctype"
| rename COMMENT as "sorting data in descending order and removing duplicates by keeping the latest record for each incident id" 
| sort -lastUpdate
| dedup ID 
| where Status="Closed"
 | fields TeamName ID InsideSLA
| rename COMMENT as "data feed is having a flag InsideSLA, 1=Incident closed within SLA, 0=Incident closed outside SLA"
 | eval inSLACount=if(InsideSLA="1",1,0)
| rename COMMENT as "Target SLA are different for different teams"
 | eval targetSLA=if((TeamName="Team1" OR TeamName="Team2"),95,90)
 | stats sum(inSLACount) as InsideSLA, count(ID) as totalCount, values(targetSLA) as targetSLA by TeamName 
 | eval currentSLA=round(InsideSLA/(totalCount)*100,2)
 | table TeamName, currentSLA, targetSLA
| rename COMMENT as "renaming columns to the default column names used by this viz"
 | rename TeamName as value, currentSLA as title, targetSLA as subtitle
 | eval subtitle=subtitle."%"
 | table value, title, subtitle
 | sort value

. Thank you.