Thanks @Ido_QBeeQ !
The first 2 answers worked perfectly. I can't seem to get the third one to work. Here is the widget.js script. Anyway you could take a look and see if I am doing something wrong?
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Highchart Highchart Color Heatmap
// Version : 1.4
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
prism.registerWidget("colorheatmap", {
name : "colorheatmap",
family : "line",
title : "Color Heatmap",
iconSmall : "/plugins/ColorHeatmap/ColorHeatmap.png",
styleEditorTemplate: "/plugins/ColorHeatmap/styler.html",
style: {
LegendPosition : 'Bottom',
XAxisPosition : 'Bottom',
YAxisPosition : 'Left',
ClickFilters : 'Off'
},
data : {
selection : [],
defaultQueryResult : {},
panels : [
{
name: 'X-Axis',
type: "visible",
metadata: {
types: ['dimensions'],
maxitems: 1
},
visibility: true
},
{
name: 'Y-Axis',
type: "visible",
metadata: {
types: ['dimensions'],
maxitems: 1
},
visibility: true
},
{
name: 'Value',
type: "visible",
itemAttributes: ["color"],
allowedColoringTypes: function() {
return {
color: false,
condition: true,
range: true
};
},
metadata: {
types: ['measures'],
maxitems: 1
},
itemAdded: function(widget, item) {
item["format"] =
{
mask :
{
type: 'number',
abbreviations: {
t: true,
b: true,
m: true,
k: true
},
separated: true,
decimals: 'auto'
},
color :
{
rangeMode : 'auto',
steps:0,
type: 'range',
}
};
},
visibility: true
},
{
name: 'filters',
type: 'filters',
metadata: {
types: ['dimensions'],
maxitems: -1
}
}
],
canColor: function (widget, panel, item) {
console.log('canColor');
if (panel.name == "Value") {
return true;
}
else {
return false;
}
},
buildQuery: function (widget) {
console.log('buildQuery');
var query = {
datasource: widget.datasource,
format: "json",
isMaskedResult:true,
metadata: []
};
widget.metadata.panel("X-Axis").items.forEach(function (item) {
query.metadata.push(item);
});
widget.metadata.panel("Y-Axis").items.forEach(function (item) {
query.metadata.push(item);
});
widget.metadata.panel("Value").items.forEach(function (item) {
query.metadata.push(item);
});
// force a sort by
//if ($$get(query, 'metadata.1.jaql')) {
// query.metadata[1].jaql.sort = "desc";
//};
// pushing filters
widget.metadata.panel('filters').items.forEach(function (item) {
item = $$.object.clone(item, true);
item.panel = "scope";
item.filterType = "widget";
query.metadata.push(item);
});
return query;
},
//Create widget Data Object and populate all values
processResult : function (widget, queryResult) {
console.log('processResult');
var
Data = [],
nodeDimX,
nodeDimY,
XAxis = {},
YAxis = {},
Values = [],
minDataValue = 0,
maxDataValue = 0,
RangeMode = 'auto',
ColorFormatType = '',
minColor = '#FF0000',
maxColor = '#008000',
dashboardFiltersX = null,
dashboardFiltersY = null;
// find if there is any matching dashboard filters
nodeDimY = widget.metadata.panel("Y-Axis").items[0];
nodeDimX = widget.metadata.panel("X-Axis").items[0];
widget.dashboard.filters.$$items.forEach(function(f){
if (f.isCascading){
f.levels.forEach(function(f2){
if(f2.dim == nodeDimY.jaql.dim) {
dashboardFilterY = f2.filter;
}
if(f2.dim == nodeDimX.jaql.dim) {
dashboardFilterX = f2.filter;
}
})
} else {
if (f.jaql.dim == nodeDimY.jaql.dim) {
dashboardFiltersY = f.jaql.filter;
};
if (f.jaql.dim == nodeDimX.jaql.dim) {
dashboardFiltersX = f.jaql.filter;
}
}
});
// Create Categories list for X Axis
if (queryResult.columns().length > 0){
queryResult.columns()[0].forEach(function (item, i) {
XAxis[item.text] = 0;
});
};
XAxis = Object.keys(XAxis)
// Create Categories list for Y Axis
if (queryResult.columns().length > 1){
queryResult.columns()[1].forEach(function (item, i) {
YAxis[item.text] = 0;
});
}
YAxis = Object.keys(YAxis);
// sort the list if it is a datatime field
if (widget.metadata.panel('Y-Axis').items[0].jaql.datatype == 'datetime'){
YAxis.sort();
};
// Create value list in order to calc min, max values
if (typeof widget.metadata.panel("Value").items[0] != 'undefined'){
if (queryResult.columns().length > 2){
queryResult.columns()[2].forEach(function (item, i) {
Values[i] = item.data;
});
};
maxDataValue = Math.max.apply(Math, Values);
minDataValue = Math.min.apply(Math, Values);
}
// Build the points for plotting the heatmap
queryResult.$$rows.forEach(function (item, i) {
Data[i] = {
x :(typeof item[0] != 'undefined') ? item[0].text : null,
y :(typeof item[1] != 'undefined') ? item[1].text : null,
value :(typeof item[2] != 'undefined') ? item[2].data : null,
xdata :(typeof item[0] != 'undefined') ? item[0].data : null,
ydata :(typeof item[1] != 'undefined') ? item[1].data : null,
color : (typeof item[2] != 'undefined') ? item[2].color : null,
selected: false
}
var isSelectedX = IsSelected(dashboardFiltersX, Data[i].x),
isSelectedY = IsSelected(dashboardFiltersY, Data[i].y);
if (!(isSelectedX && isSelectedY)){
Data[i].color = Highcharts.Color(Data[i].color).setOpacity(0.3).get();
};
// Save selected state
Data[i].selected = (isSelectedX && isSelectedY);
});
// determine the color mode and set min max colors accodingly
if (typeof widget.metadata.panel("Value").items[0] != "undefined"){
ColorFormatType = widget.metadata.panel("Value").items[0].format.color.type;
};
switch (ColorFormatType){
case 'range':
RangeMode = widget.metadata.panel("Value").items[0].format.color.rangeMode;
if (RangeMode == 'auto') {
minColor = '#FF0000',
maxColor = '#008000'
}
else {
minColor = widget.metadata.panel("Value").items[0].format.color.min;
maxColor = widget.metadata.panel("Value").items[0].format.color.max;
}
break;
case 'condition':
minColor = widget.metadata.panel("Value").items[0].format.color.conditions[0].color;
maxColor = widget.metadata.panel("Value").items[0].format.color.conditions[widget.metadata.panel("Value").items[0].format.color.conditions.length - 1].color;
//minColor = null;
//maxColor = null;
break;
default:
minColor = null;
maxColor = null;
}
return {minColor,maxColor,maxDataValue,minDataValue,XAxis,YAxis, Data};
function IsSelected(dashboardFilters, Item){
if (dashboardFilters == null) {
return true
}
else if (dashboardFilters && (typeof dashboardFilters.all != 'undefined')) {
return true
}
else if (dashboardFilters && (typeof dashboardFilters.exclude != 'undefined')) {
var ItemsToExclude = dashboardFilters.exclude.members;
return (ItemsToExclude.indexOf(Item) == -1) ? true : false
}
else if (dashboardFilters && (typeof dashboardFilters.members != 'undefined')) {
var ItemsToInclude = dashboardFilters.members;
if (ItemsToInclude.length == 0) {
return true
}
else {
return (ItemsToInclude.indexOf(Item) == -1) ? false : true
}
}
else {
return false;
}
}
}
},
beforequery: function(widget, args){
var
widgetPanels = [];
// if filter mode is slice/filter then do nothing
if (widget.options.dashboardFiltersMode == "filter"){
return;
};
widgetPanels.push(widget.metadata.panel("X-Axis").items[0]);
widgetPanels.push(widget.metadata.panel("Y-Axis").items[0]);
for (var j=0; j <= (widgetPanels.length - 1); j++){
var nodeDim = widgetPanels[j];
// Look for any dashboard filters
var dashboardFilters = prism.activeDashboard.filters.$$items;
// Loop through the metadata
for (var i=args.query.metadata.length-1; i>0; i--){
// Does this item match the node's dimension AND is a dashboard filter?
var isMatch = (args.query.metadata[i].panel == "scope") && (args.query.metadata[i].jaql.dim == nodeDim.jaql.dim),
isNotWidgetFilter = (args.query.metadata[i].filterType !== "widget"),
isWidgetFilter = (args.query.metadata[i].filterType == "widget"),
isDashboardFilter = $.grep(dashboardFilters, function(w){
return (w.jaql.dim == args.query.metadata[i].jaql.dim) && (typeof w.jaql.filter.all == "undefined");
}).length > 0;
if (isMatch && isNotWidgetFilter && isDashboardFilter) {
//if (isMatch && isDashboardFilter) {
// Create a new copy of the filter object
var matchFilter = $$.object.clone(args.query.metadata[i], true);
// Remove the panel attribute
delete matchFilter.panel
// Include with the node's dimension metadata
//nodeDim.jaql.in = {selected: matchFilter}
if (isWidgetFilter && defined(matchFilter.jaql.filter)) {
nodeDim.jaql.filter = matchFilter.jaql.filter;
}
// Remove from the metadata
args.query.metadata.splice(i,1);
}
}
}
},
render : function (widget, event) {
console.log('render');
var element = $(event.element),
svgHeight = $(element).height(),
svgWidth = $(element).width();
element.empty();
var num = Math.floor(Math.random() * 1000000);
var MyDiv = element[0],
ObjectID = widget.oid,
ChartDivName = "colorheatmap-" + ObjectID + "-" + num;
MyDiv.setAttribute("id",ChartDivName);
MyDiv.setAttribute("style","width: 99%; height: 99%; margin: 0 auto");
// element.append('<div style="width=97% height=97% margin: 0 auto" id="' + svgID + '"></div>');
setTimeout(() => { DisplayColorHeatmap ( widget, ChartDivName, svgWidth, svgHeight ); }, 1000);
options: {
dashboardFiltersMode: "select",
selector: false,
title: false
},
sizing: {
minHeight: 120, //header
maxHeight: 2048,
minWidth: 320,
maxWidth: 2048,
height: 200,
defaultWidth: 512
}
});
