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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...