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