How to drill down from a single value panel to a specific panel in the same dashboard?

[jossplacencia]

I have a single value panel , so I need click it and move to the specific panel in the same dashboard, is any way to do it?

[niketn]

Following is a run anywhere example with slight modification to the answer by @jeffland,

The jQuery selector for trapping click event on Single value should be $(document).on("click","#single", function(e) { instead of $("#single").on("click", function(e) { to ensure that the document is rendered and #single is available for clicking.

 $(document).on("click","#single", function(e) {
     e.preventDefault(); // Prevent default drilldown if needed
     var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
     window.location.href = url; // Go to specified position
 });

Following is a run anywhere example which you can try and confirm!

<dashboard script="single_custom_drilldown.js">
  <label>Single Value with Drilldown to Another section of Dashboard</label>
  <row>
    <panel>
      <title>Click Single Value to navigate to the chart in the bottom within the dashboard</title>
      <single id="single">
        <title>Internal index event count</title>
        <search>
          <query>| tstats count where index=_internal
          </query>
          <earliest>-1d@d</earliest>
          <latest>now</latest>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Trending event count - tabular</title>
        <search id="sResults">
          <query>| tstats count where index=_internal by _time span=1h
          </query>
          <earliest>-1d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="count">20</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <title>Drilldown chart</title>
      <chart id="drilldownTarget">
        <title>Trending event count - Column Chart</title>
        <search base="sResults"></search>
      </chart>
    </panel>
  </row>
</dashboard>

Following is the code for single_custom_drilldown.js JavaScript file:

require(["jquery", 
        "splunkjs/mvc", 
        "splunkjs/mvc/simplexml/ready!"], 
    function($, mvc) {
    console.log("Inside Custom Single Drilldown JS");
     $(document).on("click","#single", function(e) {
         e.preventDefault(); // Prevent default drilldown if needed
         var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
         window.location.href = url; // Go to specified position
     });
});

[spkriyaz]

Hi @niketn ,

I would like to know whether the JS which you provided can have a dynamic IDs instead of hardcoding it. If I am applying this JS for more than one panel then instead of me hardcoding the ID for the second one in the JS can this be done for incremental IDs automatically.

For example:

The below JS works for ID "single" and drilldownTarget. But if I want to apply this to another single value panel as "single1" and another target panel "drilldownTarget1". I may need to code the JS like below. Instead can we dynamically pass the "single" ID to increment along with drilldownTarget where I won't need to update the JS again and again. So the JS works for multiple panel by just providing the ID in the XML not in JS.

Let me know your suggestion

require(["jquery", 
        "splunkjs/mvc", 
        "splunkjs/mvc/simplexml/ready!"], 
    function($, mvc) {
    console.log("Inside Custom Single Drilldown JS");
     $(document).on("click","#single", function(e) {
         e.preventDefault(); // Prevent default drilldown if needed
         var url = window.location.href.split("#")[0] + "#drilldownTarget"; // Add/Replace url fragment
         window.location.href = url; // Go to specified position
     });
	 $(document).on("click","#single1", function(e) {
         e.preventDefault(); // Prevent default drilldown if needed
         var url = window.location.href.split("#")[0] + "#drilldownTarget1"; // Add/Replace url fragment
         window.location.href = url; // Go to specified position
     });
});

[jeffland]

Using event bubbling is definitely a more robust solution. In my experience however, requiring

"splunkjs/mvc/simplexml/ready!"

means that the DOM element with the id single exists before our js is run, and that attaching the event listener works.

[jeffland]

This can be done with some js. In Simple XML, give your Single Value an id and enable drilldown:

<row>
  <panel>
    <single id="single">
      <search>
        ...
      </search>
      ...
      <option name="drilldown">all</option>
      ...

Next, put some ids as anchors in your html in your target panel:

<row>
  <panel>
    <table id="target1">
      <search>
        ...

Finally, add some js to your dashboard with the following code in it:

$("#single").on("click", function(e) {
    e.preventDefault(); // Prevent default drilldown if needed
    var url = window.location.href.split("#")[0] + "#target1"; // Add/Replace url fragment
    window.location.href = url; // Go to specified position
});

That should be all you need.
(Edited to work with jquery selector instead of splunkjs component)

[ppablo]

Hi @jossplacencia

Can you clarify what you mean by "scroll with drilldown" in your question title? You don't mention scrolling at all in your content. Are you simply asking "How to drill down from a single value panel to a specific panel in the same dashboard?"

[jossplacencia]

Hi @ppablo , that is correct, I just updated the question

thank you