I have a custom extension that makes an ugly chart similar to the excel chart my client is used to. It works great but I tried to make it a master visualization and it is not rendering. Has anyone ran into this before? I have plenty of other custom extensions that do work as master vizs but I can't seem to figure out why this one does not. Below is the paint function.
paint: function ( $element, layout ) {
itr++;
$element.empty();
this.backendApi.getProperties().then(function(reply){
let id = layout.qInfo.qId + `_${itr}`,
hypercube = layout.qHyperCube,
rowcount = hypercube.qDataPages[0].qMatrix.length,
colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length,
dims = [],
measures = reply.qHyperCubeDef.qMeasures,
bordersStr = layout.borders,
groupings = [];
let borderArray = bordersStr.split(",")
if(layout.hasOwnProperty("groupings")){
groupings = layout.groupings
}
let html = `<table id="${id}_main" class="ERA_Hier_Main"><thead><tr><th style="border-right:1px solid black;"> <button id="${id}_print">Print</button></th>`
if(groupings.length > 0 ){
let groupTotalSpan = 0
groupings.forEach(group => {
groupTotalSpan += group.colSpan
let bgColor = '#fff',
textColor = '#000000'
if(group.hasOwnProperty("color")){
bgColor = group.color.color
}
if(group.hasOwnProperty('textcolor')){
textColor = group.textcolor.color;
}
html += `<th colspan="${group.colSpan}" style="background-color:${bgColor};color:${textColor}";>${group.label}</th>`
})
let empties = measures.length - groupTotalSpan
if(empties > 0){
html += `<th colspan="${empties}"></th>`
}
html += `</tr><tr><th style="border-right:1px solid black;"></th>`
}
hypercube.qDimensionInfo.forEach(function(row){
let title = row.qFallbackTitle
if (row.hasOwnProperty("title")){
title = row.title
}
dims.push({ fields: row.qGroupFieldDefs,
title: title})
})
hypercube.qMeasureInfo.forEach(row => {
let bgColor = '#fff',
textColor = '#595959';
if(row.hasOwnProperty('color')){
bgColor = row.color.color
}
if(row.hasOwnProperty('textcolor')){
textColor = row.textcolor.color
}
html += `<th style="background-color:${bgColor};color:${textColor};">${row.qFallbackTitle}</th>`
})
html += `</tr></thead>`
for (let i = 0; i < dims.length; i++) {
html += `<tbody id="${id}_${i}" class="ERA_Hier_Sub"></tbody>`
}
html += `</table>`
$element.html( html );
if(groupings.length > 0){
borderArray.forEach(colNum => {
$(`#${id}_main > thead > tr:nth-child(2) > th:nth-child(${colNum})`).css("border-right", "1px solid black") ;
})
$(`#${id}_main > thead > tr:nth-child(1) > th`).css("border-right", "1px solid black") ;
} else {
borderArray.forEach(colNum => {
$(`#${id}_main > thead > tr > th:nth-child(${colNum})`).css("border-right", "1px solid black") ;
})
}
$(document).ready(function() {
var firstheight = $(`#${id}_main > thead > tr:nth-child(1) > th:nth-child(2)`).innerHeight();
$(`#${id}_main > thead > tr:nth-child(2) > th`).css("top", "25px")
});
cubeMaker(dims, measures, id, borderArray)
$(`#${id}_print`).off()
$(`#${id}_print`).on('click', function(e){
$(`#${id}_main`).addClass("ERA_Hier_Print ")
$(`#${id}_main`).printThis();
})
});
return qlik.Promise.resolve();
}
