Using BloX Buttons - Changing Date Granularity Of Widgets In A Dashboard

[intapiuser]

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
        }
    }
};

[stevediaz]

Hello

This detailed script provides a comprehensive guide to implementing date granularity change in Sisense using BloX actions and buttons. The step-by-step instructions, accompanied by code samples, demonstrate how to create BloX actions, build BloX buttons, and achieve color animations based on button selections. This comprehensive approach allows users to seamlessly change date granularity and visually track their selection. The inclusion of a bonus section for automatically updating widgets with time series slicers adds further value. Your thorough explanation helps users apply this functionality to their Sisense environment effectively. Thank you for sharing this insightful solution. 

Your thorough explanation helps users apply this functionality to their Sisense environment effectively, paralleling how the CCSP Training empowers individuals to effectively implement and manage cloud security measures.

[johnsuslavich]

This was incredibly helpful, I'd love for Sisense community to create more guides like this one.

I didn't want quarters included, so I had to remove it from both the BloX code and widget script. In the widget script, you need to make sure when removing Quarters you adjust the textOfButtonToFormat[1,2,3] of Days, Weeks, and Months to keep the logic. Here's what mine looks like:

var ChooseYourUnselectColor = '#D3D3D3'; //Unselected Color

var ChooseYourSelectedColor = '#1D426C'; //Selected Color

var widgetID = '651c59b817a37800334e1cb2'; //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 == 'months'){

var textOfButtonToFormat1 = 'Weeks';

var textOfButtonToFormat2 = '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('+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 = '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('+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 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('+selectedButton+')').css({

transition : 'background-color 50ms ease-in-out', "background-color": ChooseYourSelectedColor, "pointer-events": "none"

});

}

});

[Astroraf]

I have used the exact code in each of the three steps and instead of specifically calling on the widgets I wanted to be affected, I used the last bit of code to so it affects all the widgets when creating the action button but it does seem to be working. Is there anything that needs to be changed specifically for my dashboard for this to work? 

Things that I have changed were the HEX code for the button color and the widget ID.