Dashboards & Visualizations

Configure the Width of a Hidden Panel

rkeq0515
Path Finder

I am trying to configure two panels in a single row where one panel is 85% and the other is 15%.  I already have the style set up to accomplish the following:

rkeq0515_0-1614035664186.png

I would like to hide the right panel and have it appear when I click a bar on the right.  That would mean the bar graph would start across the entire row then slide to the right to reveal the right panel at 15%. 

 

I have tried multiple configuration but cant seem to get it to work properly.  When I click on the bar graph it seems to split the row at 50% however, the it does show the table at 15%.  

rkeq0515_1-1614036247949.png

The code I am working with is below.  I have tried different combinations of the id tags but still cannot get it to work.

 Style

<style>
           #Table1{
            width:15% !important;
          }
            #Panel1{
            width:85% !important;
          }
</style>

 

Table and Code to Hide the Panel on the Right

    <panel id="Table1" depends="$tkacct$">

      <input id="Table2" type="checkbox" token="tokacct1" searchWhenChanged="true">
        <label></label>
        <change>
          <unset token="tkacct"></unset>
          <unset token="form.tokacct1"></unset>
        </change>
        <choice value="hide">Hide Details</choice>
        <delimiter> </delimiter>
      </input>
      <table>
        <title>Table 1 Title</title>
        <search>
          <query>SPLUNK QUERY</query>
...
...

 

Thanks

Labels (3)
Tags (4)
0 Karma
1 Solution

to4kawa
Ultra Champion
<form>
  <label>hide_panel_width</label>
  <init>
    <set token="width_change">100</set>
    <set token="Viz">0</set>
    <set token="panel1">0</set>
  </init>
  <fieldset submitButton="false">
    <input type="checkbox" token="width_change" searchWhenChanged="true">
      <label>Width Change</label>
      <choice value="85">width_change<set token="Viz">1</set>
        <set token="pane1">15</set>
      </choice>
      <default>100</default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHidePanel$">
      <html>
          <style>
           #Table1{
            width:$width_change$% !important;
          }
            #Panel1{
            width:$panel1$% !important;
          }
          </style>
      </html>
    </panel>
  </row>
  <row>
    <panel id="Table1">
      <chart>
        <search>
          <query>| tstats count where index=_internal by _time span=1h</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel id="Panel1" depends="$Viz$">
      <single>
        <search>
          <query>| tstats count where index=_internal by _time span=1h sourcetype
| rare 1 sourcetype</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</form>

View solution in original post

0 Karma

to4kawa
Ultra Champion
<form>
  <label>hide_panel_width</label>
  <init>
    <set token="width_change">100</set>
    <set token="Viz">0</set>
    <set token="panel1">0</set>
  </init>
  <fieldset submitButton="false">
    <input type="checkbox" token="width_change" searchWhenChanged="true">
      <label>Width Change</label>
      <choice value="85">width_change<set token="Viz">1</set>
        <set token="pane1">15</set>
      </choice>
      <default>100</default>
    </input>
  </fieldset>
  <row>
    <panel depends="$alwaysHidePanel$">
      <html>
          <style>
           #Table1{
            width:$width_change$% !important;
          }
            #Panel1{
            width:$panel1$% !important;
          }
          </style>
      </html>
    </panel>
  </row>
  <row>
    <panel id="Table1">
      <chart>
        <search>
          <query>| tstats count where index=_internal by _time span=1h</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
    <panel id="Panel1" depends="$Viz$">
      <single>
        <search>
          <query>| tstats count where index=_internal by _time span=1h sourcetype
| rare 1 sourcetype</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</form>
0 Karma

rkeq0515
Path Finder

I am curious of the purpose of the percent sign at the end of the token variable?

 

width:$width_change$%

0 Karma

rkeq0515
Path Finder

Thanks for this.  I took your suggestion and modified to fit what I wanted.  This seems to work for me.

<form>
  <label>hide_panel_width</label>
  <init>
    <set token="width_change">100</set>
    <set token="Viz">0</set>
    <set token="panel1">0</set>
  </init>
  <fieldset submitButton="false">
  </fieldset>
  <row>
    <panel depends="$alwaysHidePanel$">
      <html>
          <style>
           #Table1{
            width:$width_change$% !important;
          }
            #Panel1{
            width:$panel1$% !important;
          }
          </style>
      </html>
    </panel>
  </row>

  <row>

    <panel id="Table1">
      <chart>
        <search>
          <query>| tstats count where index=_internal by _time span=1h</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <drilldown>
          <set token="tkbar">$click.value$</set>
          <set token="pane1">15</set>
          <set token="width_change">85</set>
        </drilldown>
      </chart>
    </panel>
    <panel id="Panel1" depends="$tkbar$">
    
      <input type="checkbox" token="tokacct2" searchWhenChanged="true">
        <label></label>

        <change>
          <unset token="tkbar"></unset>
          <unset token="form.tokacct2"></unset>
          <set token="pane1">0</set>
          <set token="width_change">100</set>
        </change>

        <choice value="hide">Hide Details
        
        <change>
        </change>

        </choice>
      </input>
      <single>
        <search>
          <query>| tstats count where index=_internal by _time span=1h sourcetype
| rare 1 sourcetype $tkbar$</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</form>
0 Karma
Get Updates on the Splunk Community!

Set Up More Secure Configurations in Splunk Enterprise With Config Assist

This blog post is part 3 of 4 of a series on Splunk Assist. Click the links below to see the other ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...

Enterprise Security Content Update (ESCU) v3.54.0

The Splunk Threat Research Team (STRT) recently released Enterprise Security Content Update (ESCU) v3.54.0 and ...