our userss have complained that having to teach people how to right click and find the drill feature, they'd instead like a button at the top of the visual where they can click and it applies the drill function. i'm sure there is a jaql query or implementation we could do for this??
Hi @liamcameron and @gwolfe,
Since drilling is typically performed on a single data point (by right clicking the data point), or several data points (by highlighting / dragging and dropping using the left mouse button) of interest, having "drill" buttons at the top of the widget will not achieve the same effect as the out-of-the-box drill feature.
Let's say we have a widget that shows Revenue by Age Range and the users can drill into one of these four columns: Year, Gender, Country, and Product Category. A typical drill flow would involve selecting a specific age range of interest, such as "35-44", and then drilling down into another dimension, like countries.
If the drill options were added as buttons at the top of the widget (like shown in the screenshot below), how would users choose which data point to drill from? Would the drilling be performed on all age ranges? If so, this is effectively the same as replacing the widget's category column from Age Range to the selected drill column.
If the requirement here is to just add additional granularity into the widget by adding and switching a second category (or Break By column), it can be achieved with a widget script. See examples below.
Gender as the second category:
Year as the second category:
You can find below the widget script for this example. If you'd like to reuse this script, you can update the drillOptionXTitle and drillOptionXJAQL constants with your own titles and JAQLs. Note that you need to manually add a second category (could be one of the drilling options) to the widget first before applying the script.
I also attached an example dashboard below. Note that our community site doesn't currently support .dash file attachments, so please change the file extension from .txt to .dash before you import the dashboard.
//Define the drilling options' title in a list of constants like shown below
const drillOption1Title = 'Year'
const drillOption2Title = 'Gender'
const drillOption3Title = 'Country'
const drillOption4Title = 'Category'
//Define the drilling options' JAQL in a list of constants like shown below
const drillOption1JAQL = {
"table": "Commerce",
"column": "Date",
"dim": "[Commerce.Date (Calendar)]",
"datatype": "datetime",
"merged": true,
"level": "years",
"title": "Years in Date"
}
const drillOption2JAQL = {
"table": "Commerce",
"column": "Gender",
"dim": "[Commerce.Gender]",
"datatype": "text",
"merged": true,
"title": "Gender"
}
const drillOption3JAQL = {
"table": "Country",
"column": "Country",
"dim": "[Country.Country]",
"datatype": "text",
"merged": true,
"title": "Country"
}
const drillOption4JAQL = {
"table": "Category",
"column": "Category",
"dim": "[Category.Category]",
"datatype": "text",
"merged": true,
"title": "Category"
}
//Set margin for the buttons
widget.on('processresult', function(se, ev){
ev.result.chart.marginTop = 90;
});
var selectedDrillOption = 'None';
widget.on("domready", function(w, args){
chart = w.chart[0][Object.keys(w.chart[0])[0]].hc;
chart.renderer.label('Drill into:</br>' + '<b>' + selectedDrillOption + '</b>', 30, 10)
.css({
fontSize: '14px'
})
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.add();
chart.renderer.button('None', 120, 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
selectedDrillOption = 'None';
widget.metadata.panels[0].items[1].disabled = true;
widget.refresh();
})
.add();
chart.renderer.button(drillOption1Title, 200, 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
selectedDrillOption = drillOption1Title;
widget.metadata.panels[0].items[1].disabled = false;
widget.metadata.panels[0].items[1].jaql = drillOption1JAQL;
widget.refresh();
})
.add();
chart.renderer.button(drillOption2Title, 280, 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
selectedDrillOption = drillOption2Title;
widget.metadata.panels[0].items[1].disabled = false;
widget.metadata.panels[0].items[1].jaql = drillOption2JAQL;
widget.refresh();
})
.add();
chart.renderer.button(drillOption3Title, 360, 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
selectedDrillOption = drillOption3Title;
widget.metadata.panels[0].items[1].disabled = false;
widget.metadata.panels[0].items[1].jaql = drillOption3JAQL;
widget.refresh();
})
.add();
chart.renderer.button(drillOption4Title, 440, 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
selectedDrillOption = drillOption4Title;
widget.metadata.panels[0].items[1].disabled = false;
widget.metadata.panels[0].items[1].jaql = drillOption4JAQL;
widget.refresh();
})
.add();
});
hey @liamcameron and @gwolfe ,
Based on the screenshot provided, it appears that the goal is to identify the widgets that have the drill hierarchies feature, allowing end users to utilize this functionality.
Having an Indication of Drill can be set up Using the Script Below.
Generally, the Drill Hierarchy feature offers two options:
- Automatically including the hierarchy when adding dimensions.
- Selecting the hierarchy at the time of adding dimensions.
See Related Screenshot
Script Overview
- Check all the Panels for Each widget for Hierarchies/activeHierarchies element.
For Automatically including the hierarchy - the element exist only after selecting a hierarchy, otherwise the script will not indicate that the widget can be drilled.
Steps to Follow:
- Add the dimension column
- save the widget
- right click on hierarchy and click on drill
- Hierarchies/activeHierarchies element will be available and the Icon will appear.For Selected Hierarchies
- Add the Dimension Column
- Select the Hierarchy
- Hierarchy element will be available Include an icon indicating drill functionality in the widget title:
- The icon is placed before the widget title without overwriting it.
- The icon can be replaced in the drill_icon variable
- The icon position can be adjusted.
Add a guide for the end user to the widget description:
- The description is initially predefined but can be customized in the additional_text variable
- Append the information to the existing widget description.
Implementation
- Open the Dashboard Options.
- Navigate to Edit Script.
- Paste the script provided below.
- Refresh the dashboard to apply the changes.
Dashboard Script
/* update the following variable */
var drill_icon = '🔽 '; /* replace with the icon */
var additional_text = ' Right Click to Drill Hierarchies'; /* replace with the widget description */
dashboard.on("refreshend", function(se, ev) {
// Get all widgets from the dashboard
var widgets = se.widgets.$$widgets;
// Iterate through each widget
widgets.forEach(function(widget) {
// Get the widget's metadata panels and other necessary properties
var widgets_metadata = widget.metadata.panels;
var widget_oid = widget.oid;
// Iterate through each panel in the widget's metadata
widgets_metadata.forEach(function(panel) {
// Iterate through each item in the panel
panel.items.forEach(function(item) {
// Check if the item has hierarchies
if (item.hierarchies || item.activeHierarchy) {
$(`widget[widgetid="${widget_oid}"] widget-header .app-icon--general-info-circle`).css('color', 'red');
$(`widget[widgetid="${widget_oid}"] widget-header .app-icon--general-info-circle`).closest('.widget-toolbar-btn').css('opacity', '1');
// Adding widget description and Icon to the title
if (!widget.title.includes(drill_icon)) {
widget.title = drill_icon + widget.title;
}
if (!widget.desc.includes(additional_text)) {
widget.desc += additional_text;
}
}
});
});
});
});
Best Regards
