Dashboards & Visualizations

Is there a way to create line break in Status Indicator visualization?

pvarelab
Path Finder

Is there a way to create a line break in the label for the Status Indicator visualization.

 

I have the following dashboard:

<dashboard version="1.1">
<label>Test dashboard</label>
<row>
<panel>
<viz type="status_indicator_app.status_indicator">
<search>
<query>| makeresults
| eval partialA=15, totalA=57, partialB=132, totalB=543
| strcat partialA "/" totalA "V in " partialB "/" totalB "H" label
| eval icon=if(totalA=0,"check","warning")
| eval color=if(totalA=0,"green",if(partialA=0,"orange","red"))
| fields label icon color</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="status_indicator_app.status_indicator.colorBy">field_value</option>
<option name="status_indicator_app.status_indicator.fillTarget">text</option>
<option name="status_indicator_app.status_indicator.fixIcon">warning</option>
<option name="status_indicator_app.status_indicator.icon">field_value</option>
<option name="status_indicator_app.status_indicator.precision">0</option>
<option name="status_indicator_app.status_indicator.showOption">1</option>
<option name="status_indicator_app.status_indicator.staticColor">#555</option>
<option name="status_indicator_app.status_indicator.useColors">true</option>
<option name="status_indicator_app.status_indicator.useThousandSeparator">true</option>
</viz>
</panel>
</row>
</dashboard>

That displays

15/57V in 132/543H

I would like it to display

15/57V
in
132/543H

I have tried using \n, <br/> and escaped versions of those to no avail.

Is there a way to do what Iwant?

Thanks!

Labels (1)
0 Karma
1 Solution

pvarelab
Path Finder

To summarize, the solution was a combination of @richgalloway 's proposal of including the line returns in the query:

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label

plus some CSS in a row before the row containing the panels:

<html>
<style>
.splunk-status-indicator {
white-space: pre;
line-height: 100% !important;
font-size: 2.5vw !important;
}
</style>
</html>

 

View solution in original post

pvarelab
Path Finder

To summarize, the solution was a combination of @richgalloway 's proposal of including the line returns in the query:

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label

plus some CSS in a row before the row containing the panels:

<html>
<style>
.splunk-status-indicator {
white-space: pre;
line-height: 100% !important;
font-size: 2.5vw !important;
}
</style>
</html>

 

richgalloway
SplunkTrust
SplunkTrust

Try embedding literal newlines in the command.

| strcat partialA "/" totalA "V 
in 
" partialB "/" totalB "H" label
---
If this reply helps you, Karma would be appreciated.

pvarelab
Path Finder

Thanks, Rich:

I also had tried that, which had worked for me in other situations, but not in this one.

 

0 Karma

richgalloway
SplunkTrust
SplunkTrust

Have you tried the same thing using eval?

| eval label = partialA . "/" . totalA . "V 
in 
" . partialB . "/" . totalB . "H" 

 

---
If this reply helps you, Karma would be appreciated.

pvarelab
Path Finder

Hi, Rich:

At the end your original solution worked but combined with a little CSS "magic". I had to add the following snippet to the xml:

 <html>
<style>
.splunk-status-indicator {
white-space: pre;
line-height: 100% !important;
font-size: 2.5vw !important;
}
</style>
0 Karma
Get Updates on the Splunk Community!

Index This | I’m short for "configuration file.” What am I?

May 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with a Special ...

New Articles from Academic Learning Partners, Help Expand Lantern’s Use Case Library, ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Your Guide to SPL2 at .conf24!

So, you’re headed to .conf24? You’re in for a good time. Las Vegas weather is just *chef’s kiss* beautiful in ...