Solved: Re: How do you change background color for Trellis... - Page 2

jacruzs · ‎08-30-2017

I have some Trellis to single value visualization, but I need to change the background color for each Trellis depending on label, not the value.

For example, this code changes the background-color if the trellis's label is "dbx_health_metrics"

if ()$(".viz-facet").first().first().text() == 'dbx_health_metrics') {
  $(".viz-facet").first().last().css('background-color', '#000');
}

my problem is: when I execute JS in the dashboard, the search status is: in process, there fore the JS cant change the background-color because the object doesn't exist yet in the moment of execution

niketn · ‎08-30-2017

@jacruzs, If you want to color Single Value Trellis panels by their Labels and not values you can do so directly via CSS override (without jQuery).

Following is a run anywhere example with Splunk's _internal index which picks up 5 Components and displays their ERROR count in last 24 hours as Single Value Trellis. There are two Trellis in the example:
1) id="singleTrellis0" uses color by value

        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[30,70]</option>

2) id="singleTrellis1" overrides the color by value through CSS Style being applied through <html> panel hidden via depends attribute token which is never set. The color is overridden based on component names used for Single value labels.

If component name is TimeoutHeap then selector is #singleTrellis1 #facet-viz_data_source_TimeoutHeap #singlevalue svg rect
For component with special character like colon (:), it is replaced by underscore (_) i.e. for component=spatial:PointInPolygonIndex the CSS Selector is #singleTrellis1 #facet-viz_data_source_spatial_PointInPolygonIndex #singlevalue svg rect

Following is the code

<dashboard>
  <label>trellis single value color by label not value</label>
  <row>
    <panel>
      <title>Default Trellis Single Value Panel with Color based on Values</title>
      <single id="singleTrellis0">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" component="TimeoutHeap" OR component="HandleJobsDataProvider" OR component="spatial:PointInPolygonIndex" OR component="ExecProcessor" OR component="DateParserVerbose"
|  stats count by component
|  sort - count
|  transpose 0 header_field="component" column_name="component"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <!-- Reduce trellis panel height-->
        <option name="height">150</option>
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[30,70]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">small</option>
        <option name="trellis.splitBy">_aggregation</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <title>CSS Override Trellis Single Value Panel with Color based on Labels</title>
      <html depends="$alwaysHideCSS$">
        <style>
          /* Applying to only our Trellis with id="singleTrellis1" */
              /* Label is suffixed to facet-viz_data_source_ */
              /* component="TimeoutHeap" */
          #singleTrellis1 #facet-viz_data_source_TimeoutHeap #singlevalue svg rect {
             fill:#65a637;
          }
              /* component="HandleJobsDataProvider" */        
          #singleTrellis1 #facet-viz_data_source_HandleJobsDataProvider #singlevalue svg rect {
             fill:#d93f3c;
          }
              /* component="spatial:PointInPolygonIndex"*/
              /* spatial:PointInPolygonIndex converts to spatial_PointInPolygonIndex */
          #singleTrellis1 #facet-viz_data_source_spatial_PointInPolygonIndex #singlevalue svg rect {
             fill:#d93f3c;
          }
              /* component="ExecProcessor"*/
          #singleTrellis1 #facet-viz_data_source_ExecProcessor #singlevalue svg rect {
             fill:#f7bc38;
          }
              /* component="DateParserVerbose"*/
          #singleTrellis1 #facet-viz_data_source_DateParserVerbose #singlevalue svg rect {
             fill:#f7bc38;
          }
              /* 
                #d93f3c  (Red)
                #f7bc38  (Yellow)
                #65a637  (Green)          
              */
        </style>
      </html>
      <single id="singleTrellis1">
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" component="TimeoutHeap" OR component="HandleJobsDataProvider" OR component="spatial:PointInPolygonIndex" OR component="ExecProcessor" OR component="DateParserVerbose"
|  stats count by component
|  sort - count
|  transpose 0 header_field="component" column_name="component"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <!-- Reduce trellis panel height-->
        <option name="height">150</option>
        <option name="colorBy">value</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[30,70]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">small</option>
        <option name="trellis.splitBy">_aggregation</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

PS: I have change Panel height to 150 using simpleXML configuration since the Single Value Panels will accommodate in single row.
I have CSS Style applied within HTML body. If you want you can move the style code to CSS file and place under your Splunk App's appserver/static folder so that it can be reused across various dashboards.

Following is the CSS Style portion of the dashboard:

     <style>
       /* Applying to only our Trellis with id="singleTrellis1" */
           /* Label is suffixed to facet-viz_data_source_ */
           /* component="TimeoutHeap" */
       #singleTrellis1 #facet-viz_data_source_TimeoutHeap #singlevalue svg rect {
          fill:#65a637;
       }
           /* component="HandleJobsDataProvider" */          
       #singleTrellis1 #facet-viz_data_source_HandleJobsDataProvider #singlevalue svg rect {
          fill:#d93f3c;
       }
           /* component="spatial:PointInPolygonIndex"*/
           /* spatial:PointInPolygonIndex converts to spatial_PointInPolygonIndex */
       #singleTrellis1 #facet-viz_data_source_spatial_PointInPolygonIndex #singlevalue svg rect {
          fill:#d93f3c;
       }
           /* component="ExecProcessor"*/
       #singleTrellis1 #facet-viz_data_source_ExecProcessor #singlevalue svg rect {
          fill:#f7bc38;
       }
           /* component="DateParserVerbose"*/
       #singleTrellis1 #facet-viz_data_source_DateParserVerbose #singlevalue svg rect {
          fill:#f7bc38;
       }
           /* 
             #d93f3c  (Red)
             #f7bc38  (Yellow)
             #65a637  (Green)          
           */
     </style>

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

View solution in original post

logloganathan · ‎06-12-2018

wow really very nice answer @niketnilay...

niketn · ‎06-12-2018

@loglaganathan, I am glad you found this answer useful 🙂

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

jacruzs · ‎09-04-2017

thanks for your help

dfrench151 · ‎02-17-2019

Hello @niketnilay
How would you change the font color as well?

Thanks,

niketn · ‎02-18-2019

@dfrench151 do you want to change font color statically from white to something else or dynamically based on ranges?

Since it is trellis of single value. You can use single value format option to color text font itself based on ranges rather than background.

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

How do you change background color for Trellis visualization by label (not by value)?

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

Join the Conversation

How do you change background color for Trellis visualization by label (not by value)?

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...