topic Can I change panel width in a dashboard using Simple XML? in Dashboards & Visualizations

Can I change panel width in a dashboard using Simple XML?

ArthurGautesen — Tue, 17 Nov 2015 17:08:39 GMT

I have 3 single panels and a table on a row in a dashboard

<dashboard>
   *...*
   *...*
   *...*
   <row>
      <panel><single><search base="Results"><query>table $TheGood$</query></search></single&gt;</panel>
      <panel><single><search base="Results"><query>table $TheBad$</query></search></single></panel>
      <panel><single><search base="Results"><query>table $TheUgly$</query></search></single></panel>
      <panel>
         <table>
            <search base="Results">
               <query>table This, That, and More;</query>
            </search>
         </table>
      </panel>
   <row>
</dashboard>

However, I would like to have each single only take up 15% of the row, and the remaining 55% taken up by the table. Currently, the row gives each panel 25% space for its content (4 panels split 4-ways gives 25% for each panel). Is there any way to override the defaults using simple xml?

Re: Can I change panel width in a dashboard using Simple XML?

nnmiller — Tue, 17 Nov 2015 20:56:37 GMT

There are some examples in the developer's docs: Charts Using Simple XML. You may also wish to download the Dashboard Examples for Splunk 6. So you can do it, but it's not as simple as plugging in an option tag, unfortunately, as you can do for height. Dashboards and Visualizations Reference.

Re: Can I change panel width in a dashboard using Simple XML?

ArthurGautesen — Wed, 06 Jan 2016 19:16:18 GMT

Yes, it is not easy. So far, the simplest method has been to just make two panels on the row, and setup an html table in the first one, like this:

<dashboard>
   *...*
   *...*
   *...*
   <row>
      <panel>
         <html>
            <table style="width:100% !important;">
               <tr>
                  <td style="width:33% !important;">$TheGood$</td>
                  <td style="width:33% !important;">$TheBad$</td>
                  <td style="width:33% !important;">$TheUgly$</td>
               </tr>
            </table>
         </html>
      </panel>
      <panel>
         <table>
            <search base="Results">
               <query>table This, That, and More;</query>
            </search>
         </table>
      </panel>
   <row>
</dashboard>

As there are only two panels, it splits the row evenly and gives each panel 50% of the row. It's as close as I can get and still keep things simple. Since I'm using tokens, it isn't much of a switch from displaying within a simple xml panel, or an html panel.

Re: Can I change panel width in a dashboard using Simple XML?

gyslainlatsa — Tue, 29 Sep 2020 08:20:15 GMT

hi,
this is an example of code that does the same job

<dashboard script="custom_layout_width.js">
  <label>Layout Customization: Panel Width</label>
  <row>
      <single>
        <searchString>index=_internal sourcetype=splunkd | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">splunkd events</option>
        <option name="linkView">search</option>
        <option name="drilldown">none</option>
      </single>
      <single>
        <searchString>index=_internal sourcetype=*access | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">access events</option>
      </single>
      <chart>
        <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </chart>
  </row>
  <row>
      <table>
        <searchString>index=_internal | stats count by sourcetype</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </table>
  </row>
</dashboard>

next you add the custom_layout_width.js

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    // Grab the DOM for the first dashboard row
    var firstRow = $('.dashboard-row').first();
    // Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
    var panelCells = $(firstRow).children('.dashboard-cell');
    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '20%');
    $(panelCells[2]).css('width', '60%');
});