Change Date Granularity of a Widget using BloX
This article will cover the below options:
Section 1- Buttons + Highlight Background-Color - Creating Buttons of date granularity slicing options (Alternative for Tabber plugin)
OR
Section 2 - Dropdown List - Creating Drop-down list with Date granularity slicing options (Alternative for Tabber plugin)
------------------------------------------------------------------------
Section 1- Buttons + Highlight Background-Color:
You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (Buttons-DateGranularityBloX.dash)
Step 1: Create a BloX widget and use this snippet in the Editor tab: (or import this JSON file as a BloX template)
Provide the widget ID to apply the change, you can apply on multiple widgets :
"widgetToModify": ["5f7b91e27051052128453cdf","5f7b91e27051052128sdfcer"]
"style": "",
"script": "",
"title": "",
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": true,
"body": [],
"actions": [
{
"type": "dynamicGranSwap",
"title": "Years",
"style": {
"background-color": "#1D426C"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "years"
},
{
"type": "dynamicGranSwap",
"title": "Quarters",
"style": {
"background-color": "#D3D3D3"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "quarters"
},
{
"type": "dynamicGranSwap",
"title": "Months",
"style": {
"background-color": "#D3D3D3"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "months"
},
{
"type": "dynamicGranSwap",
"title": "Weeks",
"style": {
"background-color": "#D3D3D3"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "weeks"
},
{
"type": "dynamicGranSwap",
"title": "Days",
"style": {
"background-color": "#D3D3D3"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "days"
},
{
"type": "dynamicGranSwap",
"title": "Hours",
"style": {
"background-color": "#D3D3D3"
},
"data": {
"widgetToModify": [
"5f7b91e27051052128453cdf"
]
},
"dategran": "minutes"
}
]
}Step 2: Create a custom action with the below code and name it "dynamicGranSwap":
Adjust the background color of unselected & selected buttons
// Holds the chosen granularity from the selected button 'months' for example
const dategran = payload.dategran;
var widgetIds = payload.data.widgetToModify;
//Change the background color for unselected buttons
payload.widget.style.currentCard.actions.forEach(function(i){
i.style["background-color"] = '#D3D3D3'
})
//Change the background color for selected buttons
payload.widget.style.currentCard.actions
.filter(i => i.dategran == dategran)[0].style["background-color"] = "#1D426C"
//Redraw the changes
payload.widget.redraw()
//For each widget change the data granularity
payload.widget.dashboard.widgets.$$widgets
.filter(i=>widgetIds.includes(i.oid))
.forEach(function(widget){
//change the level of granularity to the chosen value from our button: 'months' for example
widget.metadata.panels[0].items[0].jaql.level = dategran;
//Apply changes to Mongo
widget.changesMade()
//Refresh widget
widget.refresh()
})Section 2 - Dropdown List:
You can follow the steps below or download the dashboard file , import it and create a custom action as described in Step 2. (DateGrnularityBloX.dash)
Step 1: Create a BloX widget and use this snippet to create the choice-set:
{
"type": "Input.ChoiceSet",
"id": "data.choicesetvalue",
"class": "",
"displayType": "compact",
"value": "1",
"choices": [
{
"title": "Hours",
"value": "minutes"
},
{
"title": "Days",
"value": "days"
},
{
"title": "Weeks",
"value": "weeks"
},
{
"title": "Months",
"value": "months"
},
{
"title": "Quarters",
"value": "quarters"
},
{
"title": "Years",
"value": "years"
}
]
} Step 2: Create a custom action with the below code and name it "DateGranDrill"
(provide the widget ID to apply the change - can apply on multiple widgets):
var gran = payload.data.choicesetvalue // Holds the chosen granularity 'months' for example
var widgets = ['5ec291c181203611649756f6','5ec291c121803611649756c7'] //Apply this action on widget ids
//for each widget id
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 = gran //change the level of granularity to the chosen value 'months' for example or the item location (currently 0)
widgetfindid.changesMade() //apply changes to Mongo
widgetfindid.refresh() //refresh the widget
}Step 3: Use the action you've created in the editor under "actions" section:
"actions": [
{
"type": "DateGranDrill",
"title": "Apply"
}
]Updated 03-02-2023
