Multiple single values in one panel alignment

schou87 — Wed, 19 May 2021 07:11:29 GMT

Hi,

I have 2 rows in my dashboard. 3 single value elements in a panel in first row and one table in second row. These 3 single values dont seem to align themselves properly. They seem to be left aligned. Is there a way to center these elements in the panel?

Regards

Re: Multiple single values in one panel alignment

bowesmana — Wed, 19 May 2021 08:07:40 GMT

Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.

Can you share your XML?

Re: Multiple single values in one panel alignment

schou87 — Wed, 19 May 2021 08:53:03 GMT

@bowesmana wrote:
Can you provide an example of that - three single value elements in a single panel in a row would normally be spaced evenly, horizontally across the row.
Can you share your XML?

Below is the xml.

<form theme="dark">
<label>Data</label>
<search>
<query> base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date BY comp1 | sort -Date | head 6</query>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel id="panel_layout">
<input id="input_link_split_by" type="link" token="unused">
<label>Choose a view</label>
<choice value="table">Consolidated</choice>
<choice value="chart">Daily report</choice>
<choice value="table1">Request</choice>
<default>Table</default>
<change>
<condition value="table">
<set token="showTable">true</set>
<unset token="showChart"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="chart">
<set token="showChart">true</set>
<unset token="showTable"></unset>
<unset token="showTable1"></unset>
</condition>
<condition value="table1">
<set token="showTable1">true</set>
<unset token="showChart"></unset>
<unset token="showTable"></unset>
</condition>
</change>
</input>
<html>
<style> /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */
#panel_layout .fieldset{
padding: 10px 12px 0px 12px !important;
}
/* Increase width of Link input to have options in Single Line */
#input_link_split_by.input-link{
width: 720px !important;
}
/* Change from flex to -webkit-box for side by side layout */
#input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
display: -webkit-box !important;
}
/* Create Button Border to make them appear as Tabs */
#input_link_split_by.input-link button{
width: 200px !important;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Hide link input bottom message section to merge with Horizontal line */
.dashboard-panel #input_link_split_by label,
#input_link_split_by .splunk-choice-input-message{
display: none !important;
}
/* Remove padding from horizontal line */
#panel_layout .panel-body.html{
padding: 0px !important;
}
</style>
<hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/>
</html>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
.panel1 {
width: 120% !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="panel1">
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="new comp" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">151</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0x53a051","0x53a051"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="PENDING"| stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">136</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xf8be34","0xf8be34"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
<single depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | where comp="ERROR" | stats values(percent) by comp </query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="colorBy">value</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="height">179</option>
<option name="numberPrecision">0.00</option>
<option name="rangeColors">["0xdc4e41","0xdc4e41"]</option>
<option name="rangeValues">[100]</option>
<option name="refresh.display">progressbar</option>
<option name="showSparkline">1</option>
<option name="trellis.enabled">1</option>
<option name="trellis.size">medium</option>
<option name="trellis.splitBy">comp</option>
<option name="unit">%</option>
<option name="useColors">1</option>
</single>
</panel>
</row>
<row>
<panel depends="$showTable$">
<html>
<style>
#table1 .table th, .table td {
text-align: center!important;
}
</style>
</html>
<table id="table1" depends="$showTable$">
<search>
<query>base query | eval comp = CASE(comp="new_comp","new comp", comp!="new_comp" AND comp!="error"AND comp!="error1","PENDING", TRUE(),"ERROR") | eventstats count as "TotalCount" | eventstats count as "compcount" by comp1 | eval percent=(compcount/TotalCount)*100 | chart limit=13 count over Date comp1 | sort -Date | head 6</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="dataOverlayMode">heatmap</option>
<option name="drilldown">cell</option>
<option name="rowNumbers">true</option>
<format type="color" field="new comp">
<colorPalette type="minMidMax" maxColor="#53A051" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="PENDING">
<colorPalette type="minMidMax" maxColor="#F8BE34" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
<format type="color" field="ERROR">
<colorPalette type="minMidMax" maxColor="#DC4E41" minColor="#FFFFFF"></colorPalette>
<scale type="minMidMax"></scale>
</format>
</table>
</panel>
</row>
</form>

Re: Multiple single values in one panel alignment

schou87 — Wed, 19 May 2021 13:12:38 GMT

Hi,

My single values are in trellis mode -medium. I could adjust the alignment by changing them to large.

But now I am getting vertical and horizontal scrollbar. Is there any way to get rid of them?

Regards

topic Re: Multiple single values in one panel alignment in Dashboards & Visualizations

Multiple single values in one panel alignment

Re: Multiple single values in one panel alignment

Re: Multiple single values in one panel alignment

Re: Multiple single values in one panel alignment