All Apps and Add-ons

Splunk 6.x Dashboard Examples: How to group multiple rangemap icons in the same row of panels and align them horizontally?

Communicator

I want to group multiple rangemap icons in the same row panel, but I want them to align horizontally (versus vertically). Below is the code I used that automatically aligns the icons vertically. Is there a way to tell to align horizontally?

I'm basing this on the 6.x Dashboard Examples (Custom Visualizations + Row Grouping with Single Values). I noticed that a single value element (Row Grouping with Single Values example) with auto align horizontally, but a chart element (Row Grouping with Charts example) or html element will auto align vertically.

Here's the code:

  <panel>

     <search>
        <query>| stats count as value | eval value = 550 | rangemap field=value none=0-99 low=100-199 guarded=200-299 elevated=300-399 high=400-499 severe=500-599 default=none</query>
        <preview>
           <set token="value1">$result.value$</set>
           <set token="range1">$result.range$</set>
        </preview>
     </search>
     <html>
        <div class="custom-result-value icon-only $range1$" />
     </html>

     <search>
        <query>| stats count as value | eval value = 350 | rangemap field=value none=0-99 low=100-199 guarded=200-299 elevated=300-399 high=400-499 severe=500-599 default=none</query>
        <preview>
           <set token="value2">$result.value$</set>
           <set token="range2">$result.range$</set>
        </preview>
     </search>
     <html>
        <div class="custom-result-value icon-only $range2$" />
     </html>

  </panel>

Thanks

0 Karma
1 Solution

Communicator

I ended up using a single element so that it put the icons horizontally, but had to use a different approach to get the icons to show. Here's is the XML:

<panel>
  <title>Test Display</title>
  <single>
    <search>
      <query>| stats count as value  | eval value = 23 | rangemap field=value none=0-1 low=2-40 guarded=41-99 elevated=100-399 high=400-499 severe=500-599 default=none</query>
    </search>
    <option name="classField">range</option>
    <option name="additionalClass">icon-only</option>
    <option name="underLabel">Value1</option>
    <option name="drilldown">none</option>
    <option name="refresh.time.visible">false</option>
  </single>
  <single>
    <search>
      <query>| stats count as value | eval value = 150 | rangemap field=value none=0-1 low=2-40 guarded=41-99 elevated=100-399 high=400-499 severe=500-599 default=none</query>
    </search>
    <option name="classField">range</option>
    <option name="additionalClass">icon-only</option>
    <option name="underLabel">Value2</option>
    <option name="drilldown">none</option>
    <option name="refresh.time.visible">false</option>
  </single>
</panel>

And here's the little snippet of the CSS to get it aligned properly in the box:

.icon-only.single-value:before {
    font-size: 60px;
    font-weight: bold;
    height: 100px;
    line-height: 100px; 
    vertical-align: middle;
}

View solution in original post

0 Karma

Communicator

I ended up using a single element so that it put the icons horizontally, but had to use a different approach to get the icons to show. Here's is the XML:

<panel>
  <title>Test Display</title>
  <single>
    <search>
      <query>| stats count as value  | eval value = 23 | rangemap field=value none=0-1 low=2-40 guarded=41-99 elevated=100-399 high=400-499 severe=500-599 default=none</query>
    </search>
    <option name="classField">range</option>
    <option name="additionalClass">icon-only</option>
    <option name="underLabel">Value1</option>
    <option name="drilldown">none</option>
    <option name="refresh.time.visible">false</option>
  </single>
  <single>
    <search>
      <query>| stats count as value | eval value = 150 | rangemap field=value none=0-1 low=2-40 guarded=41-99 elevated=100-399 high=400-499 severe=500-599 default=none</query>
    </search>
    <option name="classField">range</option>
    <option name="additionalClass">icon-only</option>
    <option name="underLabel">Value2</option>
    <option name="drilldown">none</option>
    <option name="refresh.time.visible">false</option>
  </single>
</panel>

And here's the little snippet of the CSS to get it aligned properly in the box:

.icon-only.single-value:before {
    font-size: 60px;
    font-weight: bold;
    height: 100px;
    line-height: 100px; 
    vertical-align: middle;
}

View solution in original post

0 Karma