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!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...