How can I highlight table cells conditioned on a v...

cherylheng9586 · ‎07-01-2021

I followed @niketn 's syntax to produce a panel of table cells. My syntax is as follow:

<dashboard>
  <label>Test2</label>
  <row>
    <panel>
      <html>
        <style>
          #highlight table tbody{
            display:flex;
            flex-wrap: wrap;
          }
          #highlight table tbody tr{
            margin-right:10px;
            margin-bottom:10px;
          }
          #highlight table tbody tr td{
            width: 180px;
            text-align: center;
          }
        </style>
        <div>
          <div>Clicked Value in Cell (click.value):$click.value$</div>
          <div>Clicked Cell Values (click.value2):$click.value2$</div>
        </div>
      </html>
      <table id="highlight">
        <search>
          <query>index="omap_heng"
| fields host reception Station 
| sort 0 +host
| search reception = *
| streamstats count by reception,host reset_on_change=true
| eval new_counter=if(reception == 1,0, count)
| table host new_counter Station
| streamstats max(new_counter) as max_counter by host 
| sort 0 +host, -max_counter
| streamstats first(max_counter) as max_counter by host
| where new_counter=max_counter
| table Station,max_counter
| eval "Max Counter Info"=Station."###".max_counter
| fields "Max Counter Info"
| makemv "Max Counter Info" delim="###"</query>
          <earliest>0</earliest>
          <latest></latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="color" field="Max Counter Info">
          <colorPalette type="list">[#53A051,#006D9C,#F1813F,#DC4E41]</colorPalette>
          <scale type="threshold">0,6,11</scale>
        </format>
        <format type="number" field="Max Counter Info">
          <option name="precision">0</option>
        </format>
        <drilldown>
          <set token="click.value">$click.value$</set>
          <set token="click.value2">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

I would like to highlight each cells, based on a range on max_counter value (the circled value in my image below). Hence, if my max_counter is between 0 and 6, then green, if between 7 and 11, then orange and if above 11, red.

My panel currently looks like this now:

Pls help! thanks!

ITWhisperer · ‎07-02-2021

You could use a third value in your mv evaluated to the colour you want to use, then hide (display none) the value.

  <row>
    <panel depends="$stayhidden$">
      <title>Colour based on previous</title>
      <html>
        <style>
          #highlight table tbody{
            display:flex;
            flex-wrap: wrap;
          }
          #highlight table tbody tr{
            margin-right:10px;
            margin-bottom:10px;
          }
          #highlight table tbody tr td{
            width: 180px;
            text-align: center;
          }
          #highlight table tbody td div.multivalue-subcell[data-mv-index="2"]{
            display: none;
          }
        </style>
      </html>
    </panel>
    <panel id="highlight">
      <table>
        <search>
          <query>| makeresults 
| eval maxcounterinfo="8.0###6|8.0###7|8.0###11|8.0###12|8.0###19"
| eval maxcounterinfo=split(maxcounterinfo,"|")
| mvexpand maxcounterinfo
| makemv maxcounterinfo delim="###"
| eval maxcounterinfo=mvappend(maxcounterinfo,case(tonumber(mvindex(maxcounterinfo,1))&lt;7,"GREEN",tonumber(mvindex(maxcounterinfo,1))&lt;12,"ORANGE",true(),"RED"))
| table maxcounterinfo</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color">
          <colorPalette type="expression">case (match(value,"RED"), "#ff0000",match(value,"ORANGE"), "#ff8000",match(value,"GREEN"),"#00ff00",true(),"#ffffff")</colorPalette>
        </format>
      </table>
    </panel>
  </row>

How can I highlight table cells conditioned on a value?

chart

CSS

javascript

panel

table

Data Persistence in the OpenTelemetry Collector

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

Community Content Calendar, September edition

Are you a member of the Splunk Community?

How can I highlight table cells conditioned on a value?