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.
Get Updates on the Splunk Community!

Introducing Splunk 10.0: Smarter, Faster, and More Powerful Than Ever

Now On Demand Whether you're managing complex deployments or looking to future-proof your data ...

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...