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!

Financial Services Industry Use Cases, ITSI Best Practices, and More New Articles ...

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

Splunk Federated Analytics for Amazon Security Lake

Thursday, November 21, 2024  |  11AM PT / 2PM ET Register Now Join our session to see the technical ...

Splunk With AppDynamics - Meet the New IT (And Engineering) Couple

Wednesday, November 20, 2024  |  10AM PT / 1PM ET Register Now Join us in this session to learn all about ...