Dimension and Break By Changer With BloX
Objective: Change the grouping dimension of many widgets at once.
There are three steps for the configuration:
- Adding dimensions to the items panel
- Editing the drop-down values in the BloX design panel
- Editing the BloX action
Limitations
Performance degrades as the number of fields increases
Preparation
- Download and import this BloX Template
- Create a custom action with this code below and name it Dim Swapper.
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[0].items[dimIndex];
var widgetIds = payload.data.widgetToModify;
payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){
widget.metadata.panels[0].items[0] = dimToSwapTo;
widget.changesMade();
widget.refresh();
})
Implementation
Adding dimensions to swap between
The items in the items panel define the dimensions your other widgets will swap between.
Add all the dimensions you want to swap between into the items panel.
Creating the drop-down menu
This step will define the values that are visible to the user in the drop-down menu.
Add choices that reflect the ORDER and intuitive name the items in the items panel.
Make sure the value is incrementing.
For example, if we are using the above dimension to swap between our choice set would be:
{
"type": "Input.ChoiceSet",
"id": "selectVal",
"class": "custom-select",
"displayType": "compact",
"value": "1",
"choices": [
{
"title": "Date",
"value": "1"
},
{
"title": "Category",
"value": "2"
},
{
"title": "Condition",
"value": "3"
},
{
"title": "Age Range",
"value": "4"
}
]
}
Selecting which widgets to affect
In the action, the widgetToModify array defines which widgets are affected.
Add the widget IDs of the widgets you'd like to modify to this list.
You can find the widget ids in the URL when in widget editing mode.
127.0.0.1:8081/app/main#/dashboards/5eeba582753c0825cc8225bc/widgets/5eefeebb753c0825cc8225cc
The action should look like this:
"actions": [
{
"type": "Dim Swapper",
"title": "Apply",
"data": {
"widgetToModify": [
"5ef0bc03753c0825cc8225e1",
"5ef0bc15753c0825cc8225e3",
"5ef0f4d37f583125c4e45cb6"
]
}
}
]
Break By Changer
To swap the break by elements, follow the instructions above with the exception of the following items:
- In the action code there is a reference to panels[0]. You will need to use panels[2] instead
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[0].items[dimIndex];
var widgetIds = payload.data.widgetToModify;
payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){
widget.metadata.panels[2].items[0] = dimToSwapTo;
widget.changesMade();
widget.refresh();
}) - Give this action a unique name like break-by changer
- Use the name in the action type of the action
Value Changer
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[1].items[dimIndex].jaql;
var widgetIds = payload.data.widgetToModify;
payload.widget.dashboard.widgets.$$widgets
.filter(i => widgetIds.includes(i.oid))
.forEach(function (widget) {
if (widget.metadata.panels[1].$$widget.type == 'indicator') {
widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
}
else {
widget.metadata.panels[1].items[0].jaql = dimToSwapTo;
}
widget.changesMade();
widget.refresh();
})
Treemap Categories
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[0].items[dimIndex].jaql;
var widgetIds = payload.data.widgetToModify;payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){ //Check if the widget type is treemap
if(widget.subtype == 'treemap'){
debugger
widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
widget.metadata.panels[2].items[0].jaql = dimToSwapTo;
widget.changesMade();
widget.refresh();
}
else {
widget.metadata.panels[2].items[0].jaql = dimToSwapTo;
widget.changesMade();
widget.refresh();
}
})
-
Hi Artem!
This is an excellent widget option and exactly what we need for our dashboards, however is there a way to get it to work where it will only change on column at a time within a pivot? So for example having one dimension changer widget that changes one column and then a second dimension changer widget that changes the second column.
Thanks!
Joe
-
Hey Joe, this is possible by creating two actions. If you notice in the script we're modifying the first item in the panel by default.
widget.metadata.panels[0].items[0] = dimToSwapTo;
Your second action could simply modify the second. There's no issue about them working in tandem.
-
Hi Artem!
Thanks for that! Works perfect. The only other issue that I'm having is that there seems to be a bug when it comes to being able to move the BloX widget around the dashboard. I've tested this by just adding the BloX widget to the dashboard with no code and I'm able to move it to any position on the dashboard, however once I added the code you've provided it seems that the title bar does not display properly so I'm unable to move the widget from the bottom of the dashboard. Any ideas on how to resolve this?
Thanks!
-
Hi Artem,
This works great and I love it. Thanks a lot for sharing this option.
However is it possible to assign a color for selected button in the action. For Example, when we select 'Date' button can we assign a yellow color and other unselected buttons('Category', 'Condition', 'Age Range') as grey color.
Thanks in advance.
Regards
Nikhil
-
Hi Nikhil Palla you can add a style hint to the action.
{
"type": "Filters",
"title": "Action",
"style": {
"background-color": "blue",
"color": "white"
},
"data": {}
} -
Such a wonderful widget option! One question, is there a way on how can we set up the order of color that resulted in the affected widget?
Regards,
Mustika
-
The following action will support changing dimensions on Treemap widgets as well - it is necessary to change the item values within two panels:
var dimIndex = payload.data.selectVal - 1;
var dimToSwapTo = payload.widget.metadata.panels[0].items[dimIndex].jaql;
var widgetIds = payload.data.widgetToModify;payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){ //Check if the widget type is treemap
if(widget.subtype == 'treemap'){
debugger
widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
widget.metadata.panels[2].items[0].jaql = dimToSwapTo;
widget.changesMade();
widget.refresh();
}
else {
widget.metadata.panels[2].items[0].jaql = dimToSwapTo;
widget.changesMade();
widget.refresh();
}
}) -
Mustika Fitriyanti I'd be interested to see if you could get the colors to translate over if you moved just the jaql over. Update lines 2 and 7 in your code to this.
2:var dimToSwapTo = payload.widget.metadata.panels[0].items[dimIndex].jaql;
7:
widget.metadata.panels[0].items[0].jaql = dimToSwapTo;
If this doesn't work I think you'll need to use the color manager plugin to specify what dimensions get what color. Alternatively you can manage the colors by using the color palette feature in the dashboard.
Please sign in to leave a comment.
Comments
11 comments