⏱️ 3 minute read
Here are a few ready-to-use widget scripts to customize your filters.
Replace the variables highlighted in bold with the appropriate values for your use case.
Add filter buttons in column/bar charts
widget.on('processresult', function(se, ev){
ev.result.chart.marginTop= 60
});var dimension = "[Person Skill.Person Skill Name]"
var normalState = {
fill: '#fcd4d2',
stroke: '#cc4e45',
r: 3,
style: {
color: '#6D6D6D',
borderWidth : 0
}
},
hoverState = {
fill: '#d6665e',
stroke: '#cc4e45',
r: 3,
style: {
color: 'white',
borderWidth : 0
}
},
pressedState = {
fill: '#c9483e',
stroke: '#cc4e45',
r: 3,
style: {
color: '#FFFFFF',
borderWidth : 0
}
},
disabledState = {
fill: '#EEEDFA',
stroke: '#ADABF6',
r: 5,
style: {
color: '#6D6D6D',
borderWidth : 0
}
},
callback = function () {
}widget.on("domready", function(w){
let chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
let items = getItemList(w).values;
//items.length = 10
let itemlist = Array.from(items, x=>x[0].data)
let buttonList = new Array(itemlist.length + 1)
let widgetFilter = widget.metadata.panels[3].items.find(el => el.jaql.dim == dimension)
$.each(itemlist, function(index, value){
buttonList[0] = chart.renderer.button('All', 10, 10,
callback,
normalState,
hoverState,
pressedState,
disabledState)
.attr({
zIndex : 10,
height: 40,
width: 80,
'text-align': 'center'
})
.css({width: '116px'})
.on('click', function() {
widgetFilter.jaql.filter = {
"explicit": false,
"multiSelection": true,
"all": true
}
widget.refresh();
})
.add();
})
$.each(itemlist, function(index, value){
buttonList[index+1] = chart.renderer.button(value, 10 + ((index+1) * 100), 10,
callback,
normalState,
hoverState,
pressedState,
disabledState)
.attr({
zIndex : 10,
height: 40,
width: 80,
'text-align': 'center'
})
.css({width: '116px'})
.on('click', function() {
if( widgetFilter.jaql.filter.members && widgetFilter.jaql.filter.members[0] && widgetFilter.jaql.filter.members[0] == value)
{
widgetFilter.jaql.filter = {
"explicit": false,
"multiSelection": true,
"all": true
}
}
else
{
widgetFilter.jaql.filter = {
"explicit": true,
"multiSelection": true,
"members": [
value
]
}
}
widget.refresh();
})
.add();
})
$('.widget-no-result-overlay').css('top', '60px')
chart.buttonList = buttonList
if( widgetFilter.jaql.filter.members && widgetFilter.jaql.filter.members[0])
filterItem = widgetFilter.jaql.filter.members[0]
else
filterItem = 'All'
currentButton = buttonList.find(el=>el.text.textStr == filterItem)
highlightButton(currentButton, chart)
});function highlightButton(clickedButton, chart){
chart.buttonList.forEach(button => {
if (button.text.textStr !== clickedButton.text.textStr) {
button.setState(0)
}
else{
button.setState(2)
}
})}
function runHTTP(jaql) {
// Use $internalHttp service if exists
const $internalHttp = prism.$injector.has("base.factories.internalHttp") ?
prism.$injector.get("base.factories.internalHttp") : null;
// Ajax configurations
const ajaxConfig = {
url: "/api/datasources/" + encodeURIComponent(jaql.datasource.title) + "/jaql",
method: "POST",
data: JSON.stringify(jaql),
contentType: "application/json",
dataType: "json",
async: false
};
// Use $internalHttp service for v8.0.1+
// else use default ajax request
const httpPromise = $internalHttp ? $internalHttp(ajaxConfig, true) : $.ajax(ajaxConfig);// Return response
return httpPromise.responseJSON;
};function getItemList(widget) {
const query = {
"datasource": widget.datasource.title,
"metadata": [
{
"jaql": {
"dim": dimension,
"filter": {
"explicit": false,
"multiSelection": true,
"all": true
}
}
}
]
};
return runHTTP(query);
}
Rendering example:
Add date granularity buttons in column/bar charts
This only works if you have added the Date field to the Categories.
(function() {
var initialized = false;widget.on('ready', function(se, ev) {
var $el = $(element);if ($el.find('.granularity-toggle').length === 0) {
var toggleHtml = `
<div class="granularity-toggle" style="text-align:center; margin-bottom:10px;">
<button class="granularity-btn" data-grain="years">Years</button>
<button class="granularity-btn" data-grain="quarters">Quarters</button>
<button class="granularity-btn" data-grain="months">Months</button>
<button class="granularity-btn" data-grain="weeks">Weeks</button>
</div>
`;
$el.prepend(toggleHtml);$el.find('.granularity-btn').css({
'margin': '0 5px',
'padding': '5px 10px',
'border': '1px solid #ccc',
'border-radius': '4px',
'cursor': 'pointer',
'background': '#f8f8f8'
});$el.find('.granularity-btn').off('click').on('click', function() {
var grain = $(this).data('grain');
updateGranularity(grain);
setActiveButton(grain);
});
}function setActiveButton(grain) {
$el.find('.granularity-btn').css({ background: '#f8f8f8' });
$el.find(`.granularity-btn[data-grain="${grain}"]`).css({ background: '#d1e7fd' });
}function updateGranularity(grain) {
var panels = widget.metadata.panels;var categoriesPanel = panels.find(function(p) {
return p.name === "categories";
});if (!categoriesPanel || !categoriesPanel.items.length) return;
var dateDim = categoriesPanel.items[0].jaql;
if (!dateDim) return;if (grain === "years") {
dateDim.level = "years";
} else if (grain === "quarters") {
dateDim.level = "quarters";
} else if (grain === "months") {
dateDim.level = "months";
} else if (grain === "weeks") {
dateDim.level = "weeks";
}widget.refresh();
}if (!initialized) {
setActiveButton("years");
initialized = true;
}
});
})();
Comments
0 comments
Please sign in to leave a comment.