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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

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

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...