This article covers the steps to change the date granularity of a widget using BloX actions along with the dropdown input of BloX. In this post, we shall achieve the functionality with the help of single-select BloX buttons that has some color animations.
STEP 1: CREATING ACTION WITH LIST OF WIDGETS TO BE AFFECTED
On a dashboard, create a BloX widget. Using the BloX widget, create an action with code below and name the action "dategran_buttons".
Note: you need to include the widget IDs of all the widget you'd want to get affected using the BloX date granularity changer.
const dategran = payload.dategran; // Holds the chosen granularity from the selected button 'months' for example
var widgets = ['5f33224e15e4d70d748910f6','5f34d3218a3c0d1bc43ddb48']; //Include the widgetsIDs here as array of strings ['widgetID_1', 'widgetID_2']
/*for each widget id, we grab the granularity from the selected button,
apply it to all the widgets listed in the array above,
save the changes and then refresh*/
widgets.forEach(myfunction);
function myfunction (item){
var widgetfindid = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === item)
widgetfindid.metadata.panels[0].items[0].jaql.level = dategran //change the level of granularity to the chosen value from our button: 'months' for example
widgetfindid.changesMade() //apply changes to MongoDB - the application database
widgetfindid.refresh() //refresh the widget
};
STEP 2: CREATING BLOX LAYOUT WITH BUTTONS
Now, to build the buttons with the appropriate values of date granularity, download the BloX template from here or use the code below and paste it in the 'Editor' tab of BloX widget.
In this example, we will have 4 buttons in the following order - Quarters, Months, Weeks and Days. Each button will have the action type as 'dategran_buttons' (the BloX action we created in the last step) and also will carry the date granularity in a json key "date_gran' - for example "date_gran":"months" on the button for Months.
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "medium",
"spacing": "small",
"color": "black",
"text": "Choose Date Granularity"
}
]
}
],
"actions": [
{
"type": "dategran_buttons",
"title": "Quarters",
"style": {
"backgroundColor": "#1D426C"
},
"dategran": "quarters"
},
{
"type": "dategran_buttons",
"title": "Months",
"style": {
"backgroundColor": "#1D426C"
},
"dategran": "months"
},
{
"type": "dategran_buttons",
"title": "Weeks",
"style": {
"backgroundColor": "#1D426C"
},
"dategran": "weeks"
},
{
"type": "dategran_buttons",
"title": "Days",
"style": {
"backgroundColor": "#1D426C"
},
"dategran": "days"
}
]
}STEP 3: COLOR ANIMATION ON THE BUTTONS USING A WIDGET THAT IS AFFECTED
Now the functionality of button helping to change the date granularity in the list of widgets whose widgetIDs you pasted in the action will work as expected. Now, let us get the buttons to animate in the desired fashion which is: 'when a button is clicked, the clicked button has SELECTED color and all other buttons take the UNSELECTED color. Before you begin implementing this step, get the hex codes of the selected and unselected colors as per your UI preference.
In one of the widgets (line/bar/column) that will be affected by the BloX buttons, paste the code below into the script editor of that widget.
This logic can be updated:
The functionality has been refined such that a button when in clicked state cannot be clicked again and will be unavailable for any click action. For example, when 'Month' is selected which modifies all the widgets, then only the 3 other buttons are now clickable.
Note: Pasting this into one of the widgets will be enough. Also, in the variable 'widgetID' used in the code below, replace it with the current widget whose script editor you're making use of. This should be available in the URL of the script editor you are in.
var ChooseYourUnselectColor = '#D3D3D3'; //Unselected Color
var ChooseYourSelectedColor = '#1D426C'; //Selected Color
var widgetID = '5f33224e15e4d70d748910f6'; //Current Widget which runs this script
widget.on('ready',function(widget, args){
var widgetOID = widgetID;
//Get the selected date granularity
var widget = prism.activeDashboard.widgets.$$widgets.find(w => w.oid === widgetOID)
if(widget.metadata.panels[0].items[0].jaql.level == 'quarters'){
var textOfButtonToFormat1 = 'Months';
var textOfButtonToFormat2 = 'Weeks';
var textOfButtonToFormat3 = 'Days';
var selectedButton = 'Quarters';
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat3+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none"
});
}
if(widget.metadata.panels[0].items[0].jaql.level == 'months'){
var textOfButtonToFormat1 = 'Quarters';
var textOfButtonToFormat2 = 'Weeks';
var textOfButtonToFormat3 = 'Days';
var selectedButton = 'Months';
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat3+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none"
});
}
if(widget.metadata.panels[0].items[0].jaql.level == 'weeks'){
var textOfButtonToFormat1 = 'Months';
var textOfButtonToFormat2 = 'Quarters';
var textOfButtonToFormat3 = 'Days';
var selectedButton = 'Weeks';
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat3+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none"
});
}
if(widget.metadata.panels[0].items[0].jaql.level == 'days'){
var textOfButtonToFormat1 = 'Months';
var textOfButtonToFormat2 = 'Weeks';
var textOfButtonToFormat3 = 'Quarters';
var selectedButton = 'Days';
$('button.btn:contains('+textOfButtonToFormat1+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat2+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+textOfButtonToFormat3+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourUnselectColor, "pointer-events": "auto"
});
$('button.btn:contains('+selectedButton+')').css({
transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none"
});
}
});To see this demo in action in your own Sisense environment, first create the BloX action using the Step 1 and then, use this dash file (Make sure you have the Sample Ecommerce elasticube available - one of the sample elasticubes that comes with your initial installation of Sisense). Also, check the widgetIDs in the BloX action you created (Step1) and in the script editor of the column chart on the dashboard (Step3).
BONUS:
If you want to automatically change the date granularity on all the widgets which have a time series slicer instead of grabbing the specific widget ids, then replace the code when creating the action (In Step 1) with the code below:
const dategran = payload.dategran; // Holds the chosen granularity 'months' for example
var widgets = prism.activeDashboard.widgets.$$widgets; //get all the widgets in the dashboard
//for each widget
widgets.forEach(myfunction);
function myfunction (item){
//checking if the widget has a slicer (valid dimension in Category/X-Axis panels of the chart) and if it does, checking if it contains a date grouping
if(typeof(item.metadata.panels[0].items[0]) !== 'undefined' && typeof(item.metadata.panels[0].items[0].jaql.level) !== 'undefined'){
var currentGran = item.metadata.panels[0].items[0].jaql.level; //gettting the current granularity
if(currentGran === 'days'||currentGran === 'weeks'||currentGran === 'months'||currentGran === 'quarters'){
item.metadata.panels[0].items[0].jaql.level = dategran //change the level of granularity to the chosen value 'months' for example
item.changesMade() //apply changes to Mongo
item.refresh() //refresh the widget
}
}
};
