Dashboards & Visualizations

Is it possible to center the value of a panel?

zayra
Loves-to-Learn

Hi !

I have a question, it is possible to center the content of a single value panel if the panel width should be 2.8 px, as seen in the image the value is outside the panel width

alt text

Tags (2)
0 Karma

efavreau
Motivator

@zayra Here's something that may solve your problem.

Starting with this (it works but hides the number), as percentages probably won't help - based on resolution of the screen. Here's a percentage.

#panel5
{
width:3%  !important;
}
div[id="singlevalue"]
{
width:3%  !important;
}

Try using an exact px size for the number. This is my proposed solution:

#panel5
{
width:3%  !important;
}
div[id="singlevalue"]
{
width:65px !important;
}

If you want to move the panel body - it would impact all the panels in the dashboard, so probably not what you want (although it works):

#panel5
{
width:3%  !important;
}
.panel-body
{
width:65px !important;
}

I think at this point you have enough to work with. Let me know if this solves your problem.

###

If this reply helps you, an upvote would be appreciated.
0 Karma

efavreau
Motivator

Seems possible. Please post the code you've tried and what version of Splunk (things change from the 6.x to the 7.x series).

###

If this reply helps you, an upvote would be appreciated.
0 Karma

zayra
Loves-to-Learn

Hi !!!

This is my code:

<panel depends="$alwaysHideCSS$">
  <title>Panel1</title>
  <html>
     <style type="text/css">
       .dashboard-panel .panel-body.html 
       {
 padding: 10px 10px;
 background-color: ;
       }
       .single-value .single-result 
       {
  font-size: 10px !important;
       }
  </style>
 </html>
</panel>
<panel depends="$alwaysHideCSS$">
  <title>Panel1</title>
  <html>
     <style>
       #panel5
       {
        width:3%  !important;
       }
     </style>
   </html>
</panel>


<panel id="panel5" >
  <title></title>
  <single>
    <search>
      <query>index=_internal | stats count</query>
      <earliest>-15m</earliest>
      <latest>now</latest>
    </search>
    <option name="colorMode">none</option>
    <option name="field">count</option>
    <option name="height">50</option>
    <option name="rangeColors">["0xdc4e41","0x555","0x53a051"]</option>
    <option name="rangeValues">[0,0.1]</option>
    <option name="refresh.display">progressbar</option>
    <option name="unit">%</option>
    <option name="useColors">1</option>
    <option name="refresh.link.visible">false</option>
    <option name="link.openSearch.visible">false</option>
    <option name="link.openPivot.visible">false</option>
    <option name="link.inspectSearch.visible">false</option>
    <option name="link.exportResults.visible">false</option>
  </single>
</panel>

The splunk version: 7.3.1.1

0 Karma

efavreau
Motivator

You mentioned an image, but I don't see it. Could you attach it? Or if you can't, put it up on imgur or where ever, and put a link here?

###

If this reply helps you, an upvote would be appreciated.
0 Karma

zayra
Loves-to-Learn

the image is seen again

0 Karma
Get Updates on the Splunk Community!

Splunk Mobile: Your Brand-New Home Screen

Meet Your New Mobile Hub  Hello Splunk Community!  Staying connected to your data—no matter where you are—is ...

Introducing Value Insights (Beta): Understand the Business Impact your organization ...

Real progress on your strategic priorities starts with knowing the business outcomes your teams are delivering ...

Enterprise Security (ES) Essentials 8.3 is Now GA — Smarter Detections, Faster ...

As of today, Enterprise Security (ES) Essentials 8.3 is now generally available, helping SOC teams simplify ...