topic Re: Drilldown for Donut Custom Visualisation? in All Apps and Add-ons

Drilldown for Donut Custom Visualisation?

sarvesh_11 — Wed, 08 Apr 2020 07:37:03 GMT

Hey Splunkers,

There is no drilldown functionality in :
https://splunkbase.splunk.com/app/3238/.

To get that, i have tried with css, and also got the reference to write js for click events, for drill down.
But how can i integrate that js with css. Below is my code:

Donut Chart with CSS

 <panel>
   <html depends="$alwaysHideCSSStyle$">
     <style>
       g.c3-shapes.c3-shapes-WARN path.c3-shape.c3-arc-WARNING{
           fill:amber !important;
       }
       g.c3-shapes.c3-shapes-ERROR path.c3-shape.c3-arc-CRITICAL{
           fill:red !important;
       }
       g.c3-shapes.c3-shapes-ERROR path.c3-shape.c3-arc-NORMAL{
           fill:green !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--WARNING td.name span{
           background-color:amber !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--CRITICAL td.name span{
           background-color:red !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--NORMAL td.name span{
           background-color:green !important;
       }
       g.c3-legend-item-WARN line.c3-legend-item-tile{
           stroke:amber !important;
       }
       g.c3-legend-item-ERROR line.c3-legend-item-tile{
           stroke:red !important;
       }
       g.c3-legend-item-NORMAL line.c3-legend-item-tile{
           stroke:green !important;
       }
     </style>
   </html>

Re: Drilldown for Donut Custom Visualisation?

niketn — Wed, 08 Apr 2020 14:22:14 GMT

@sarvesh_11 ideal place would be to fix in visualization.js file which already handles hover and click events. But prints in console log instead of setting tokens to be used in Simple XML. Refer to Custom Visualization API for details.

Following is quick and dirty workaround I was referring to where you can use Simple XML JS extension to handle the click event through jQuery and set the token through Splunk JS token model.

Following is the Simple XML code for run anywhere example as per your question (PS: I have added id="my_donut" to the donut viz for applying specific CSS and jQuery selector rather than generic):

<dashboard script="donut_click_handler.js">
  <label>Donut with drilldown</label>
  <row>
    <panel>
      <html>
        <style>
          #my_donut g.c3-chart-arc.c3-target-NORMAL text{
            fill:black !important;
          }
          #my_donut g.c3-shapes.c3-shapes-WARN path.c3-shape.c3-arc-WARN{
              fill:orange !important;
          }
          #my_donut g.c3-shapes.c3-shapes-CRITICAL path.c3-shape.c3-arc-CRITICAL{
              fill:red !important;
          }
          #my_donut g.c3-shapes.c3-shapes-NORMAL path.c3-shape.c3-arc-NORMAL{
              fill:green !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--WARN td.name span{
              background-color:orange !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--CRITICAL td.name span{
              background-color:red !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--NORMAL td.name span{
              background-color:green !important;
          }
          #my_donut g.c3-legend-item-WARN line.c3-legend-item-tile{
              stroke:orange !important;
          }
          #my_donut g.c3-legend-item-CRITICAL line.c3-legend-item-tile{
              stroke:red !important;
          }
          #my_donut g.c3-legend-item-NORMAL line.c3-legend-item-tile{
              stroke:green !important;
          }
        </style>
        <div>
          <div><b>Clicked Slice Label and Value</b></div>
          <div>tokLabel: $tokLabel$</div>
          <div>tokValue: $tokValue$</div>
        </div>
      </html>
      <viz id="my_donut" type="viz_donut_c3.c3donut">
        <search>
          <query>| makeresults
| eval kpi="WARN,CRITICAL,NORMAL"
| makemv kpi delim=","
| mvexpand kpi
| eval count=substr(tostring(random()),1,2)
| table kpi count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="viz_donut_c3.c3donut.expand">0</option>
        <option name="viz_donut_c3.c3donut.label_show">1</option>
        <option name="viz_donut_c3.c3donut.label_threshold">.05</option>
        <option name="viz_donut_c3.c3donut.label_value">value</option>
        <option name="viz_donut_c3.c3donut.legend_position">bottom</option>
        <option name="viz_donut_c3.c3donut.legend_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_format">%</option>
        <option name="viz_donut_c3.c3donut.tooltip_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_value">default</option>
      </viz>
    </panel>
  </row>
</dashboard>

Following is the JS file donut_click_handler.js that needs to be placed under your app's appserver/static folder. If you have not used SimpleXML CSS extension or JS Extension then you should see the example on Splunk Dev site: https://dev.splunk.com/enterprise/docs/developapps/webframework/usewebframework/modifydashboards/ or try out Splunk Dashboard Examples app: https://splunkbase.splunk.com/app/1603/

 require(["splunkjs/mvc",
         "jquery", 
         "splunkjs/ready!", 
         "splunkjs/mvc/simplexml/ready!"    
     ], function( mvc,
     $){ 
        var defaultTokenModel=mvc.Components.get("default");
        var submittedTokenModel=mvc.Components.get("submitted");
        var strValue;

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-WARN",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","WARN");
            submittedTokenModel.set("tokLabel","WARN");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-CRITICAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","CRITICAL");
            submittedTokenModel.set("tokLabel","CRITICAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-NORMAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","NORMAL");
            submittedTokenModel.set("tokLabel","NORMAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });
     });

Re: Drilldown for Donut Custom Visualisation?

sarvesh_11 — Thu, 09 Apr 2020 04:33:03 GMT

Hi @niketnilay
Thanks for your inputs.

But how drilldown is working in this?
how my next panel is visible on click ?

As, all
drilldown --> all
drilldownRedirect --> true

nothing seems to be working on this visualization.

Re: Drilldown for Donut Custom Visualisation?

niketn — Thu, 09 Apr 2020 04:45:00 GMT

When any donut Slice is clicked, it set the slice name as tokLabel and value as tokValue. It is very much specific to series name for example the series NORMAL will have jQUery selector #my_donut g.c3-chart-arc.c3-target-NORMAL.

Nothing seem to be working is difficult to solve please add more details on what you have tried and what is the issue you see. Are you comfortable with JS? Can you debug JS code for issue? The above code is run anywhere example so it should work if you put JS in the right place (it may require debug/refresh/restart Splunk instance and also clear browser history).

Re: Drilldown for Donut Custom Visualisation?

sarvesh_11 — Wed, 30 Sep 2020 04:59:21 GMT

Hi @niketn ,
Thanks mate, the above thing worked for me.
Now this is good when we have 1 single panel, but i have 15 such donut panels,
so in donut_click_handler.js , i have to write 45 stanzas, giving different tokLabel, as value is same for all i.e Warn, Normal and critical?

Re: Drilldown for Donut Custom Visualisation?

niketn — Fri, 10 Apr 2020 16:51:13 GMT

@sarvesh_11 like mentioned above, best approach for you would need to handle click event already present in visualization.js to assign to your custom tokens like clickedValue and clickedLabel so that they always get assigned without coding for each and every donut/slice.

The above is just workaround example for you to handle drilldown. If you notice, the DOM selector for drilldown in Donut slice is the label of slice which is clicked for example if CRITICAL slice is clicked then the DOM selector target name is the following: c3-target-CRITICAL.

So instead of having specific CSS Selector you can have generic CSS Selector and extract the label name from selector i.e. CRITICAL. The value can always be generically assigned to Value token. This way you can have single JS for for all Donut drilldown. Also you can perform click handler for array of Donut Chart by Ids like [#donut1, #donut2...] or else take out ID based selector completely. However this will depend on your dashboard use case.

Ideally first approach is the best. Although visualization.js has already been created for donut chart along with click handler (it currently only logs to console, does not pass back to Splunk Token Model), you can refer to Custom Visualization API for better understanding of how it works. https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomVizTutorial

Please try out and confirm as this is the maximum help/hint I can provide rather than writing the code for you!

Re: Drilldown for Donut Custom Visualisation?

vin_ven27 — Mon, 30 Nov 2020 02:56:39 GMT

Is it possible to have two words Status like "Not running"? I tried to put it in:

Tried: with underscore (Not_Running) and with d.quotes ("Not Running")

but no luck. It seems status with space is not valid. Is there a way? Thanks