Dashboards & Visualizations

BUG: Single-Value visualization Viz w/ Trellis clipping text: CSS work-around?

Noah_Woodcock
Path Finder

Check out this run-anywhere example dashboard XML. You might have to adjust your browser's zoom but on my laptop, on all zooms, it is clipping both the label of the trellis and the value. How can I fix this?

<dashboard>
  <label>Trellis Scaling Example</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults 
| eval _raw="aShortName  bThisIsMediumName  cThis_Name_Is_Somewhat_Long   dThis_Is_An_Absolutely_Absurdly_Long_Stinking_Name
24D 15H 0M  16D 4H 5M          13D 17H 45M                   0D 0H 0M"
| multikv forceheader=1
| fields - _time linecount _raw
| eval foo="bar"
| untable foo asset count
| xyseries foo asset count
| fields - foo</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
        <option name="trellis.enabled">1</option>
      </single>
    </panel>
  </row>
</dashboard>
1 Solution

niketn
Legend

@Noah_Woodcock @woodcock , I had answered something similar, obviously the CSS override is based on your requirement so it would have to be adjusted as per actual. https://answers.splunk.com/answers/813362/adjust-trellis-font-size-results.html#answer-812652

I have added Text Box in your code example to play around with the required CSS override for Widget width that you can finally use in your CSS:

alt text

Following is a run anywhere Simple XML example with CSS override:

<form>
  <label>Trellis Scaling Example</label>
  <fieldset submitButton="false">
    <input type="text" token="tokWidth" searchWhenChanged="true">
      <label>Widget Width (in pixel)</label>
      <default>250</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
         <style>
           #trellis_single div.viz-facet{
             width: $tokWidth$px !important;
           }
           #trellis_single .viz-panel.viz-facet-size-medium .facet-label{
             font-size:11px !important;
             font-weight: bold !important;
           }
         </style>
      </html>
      <single id="trellis_single">
        <title>With CSS Override</title>
        <search>
          <query>| makeresults 
 | eval _raw="aShortName  bThisIsMediumName  cThis_Name_Is_Somewhat_Long   dThis_Is_An_Absolutely_Absurdly_Long_Stinking_Name
 24D 15H 0M  16D 4H 5M          13D 17H 45M                   0D 0H 0M"
 | multikv forceheader=1
 | fields - _time linecount _raw
 | eval foo="bar"
 | untable foo asset count
 | xyseries foo asset count
 | fields - foo</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
        <option name="height">179</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">medium</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <single>
        <title>Without CSS Override</title>
        <search>
          <query>| makeresults 
 | eval _raw="aShortName  bThisIsMediumName  cThis_Name_Is_Somewhat_Long   dThis_Is_An_Absolutely_Absurdly_Long_Stinking_Name
 24D 15H 0M  16D 4H 5M          13D 17H 45M                   0D 0H 0M"
 | multikv forceheader=1
 | fields - _time linecount _raw
 | eval foo="bar"
 | untable foo asset count
 | xyseries foo asset count
 | fields - foo</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
        <option name="height">162</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">medium</option>
      </single>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

nnilay_splunk
Splunk Employee
Splunk Employee

@Noah_Woodcock @woodcock just saw this in 8.0.5 Fixed Issues:

2020-05-26SPL-189778, SPL-186300Single-Value visualization Viz w/ Trellis clipping text

 

0 Karma

niketn
Legend

@Noah_Woodcock @woodcock , I had answered something similar, obviously the CSS override is based on your requirement so it would have to be adjusted as per actual. https://answers.splunk.com/answers/813362/adjust-trellis-font-size-results.html#answer-812652

I have added Text Box in your code example to play around with the required CSS override for Widget width that you can finally use in your CSS:

alt text

Following is a run anywhere Simple XML example with CSS override:

<form>
  <label>Trellis Scaling Example</label>
  <fieldset submitButton="false">
    <input type="text" token="tokWidth" searchWhenChanged="true">
      <label>Widget Width (in pixel)</label>
      <default>250</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
         <style>
           #trellis_single div.viz-facet{
             width: $tokWidth$px !important;
           }
           #trellis_single .viz-panel.viz-facet-size-medium .facet-label{
             font-size:11px !important;
             font-weight: bold !important;
           }
         </style>
      </html>
      <single id="trellis_single">
        <title>With CSS Override</title>
        <search>
          <query>| makeresults 
 | eval _raw="aShortName  bThisIsMediumName  cThis_Name_Is_Somewhat_Long   dThis_Is_An_Absolutely_Absurdly_Long_Stinking_Name
 24D 15H 0M  16D 4H 5M          13D 17H 45M                   0D 0H 0M"
 | multikv forceheader=1
 | fields - _time linecount _raw
 | eval foo="bar"
 | untable foo asset count
 | xyseries foo asset count
 | fields - foo</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
        <option name="height">179</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">medium</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <single>
        <title>Without CSS Override</title>
        <search>
          <query>| makeresults 
 | eval _raw="aShortName  bThisIsMediumName  cThis_Name_Is_Somewhat_Long   dThis_Is_An_Absolutely_Absurdly_Long_Stinking_Name
 24D 15H 0M  16D 4H 5M          13D 17H 45M                   0D 0H 0M"
 | multikv forceheader=1
 | fields - _time linecount _raw
 | eval foo="bar"
 | untable foo asset count
 | xyseries foo asset count
 | fields - foo</query>
          <earliest>-24h</earliest>
          <latest>now</latest>
        </search>
        <option name="height">162</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.size">medium</option>
      </single>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

woodcock
Esteemed Legend

As usual, you are my hero.

niketn
Legend

Thanks, this really means a lot coming from you.

I am just one of the several Splunk interns from the virtual classroom you have conducted for such a long time with your answers 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

woodcock
Esteemed Legend

@niketnilay, we could use your expertise here (thank you in advance)!

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 ...