Tabs For Pivot Tables

[intapiuser]

The main intention is to organize the pivot table in case it has too many columns. The script will add a tabber that hides and show a specific set of columns.

The code is completely fitted to our needs. If you want to use it, you have to replace everything to your set of columns and column names.

widget.on("ready", function(widget, args) {

console.log('args',args);
var CUR_COL_FIND_CRITERIA = "[fidx=0]";
var FORMAT_COL_FIND_CRITERIA = "[fidx=5]";
var Belonsto_COL_FIND_CRITERIA = "[fidx=7]";
var COUNTRY_COL_FIND_CRITERIA = "[fidx=8]";

//format a cell according to a condition on the current cell
function formatCell(){
if (($(this).attr('val')==$(this).siblings(Belonsto_COL_FIND_CRITERIA).attr('val')) && ($(this).attr('val')!='') && ($(this).attr('val')!=null)){
$(this).siblings(FORMAT_COL_FIND_CRITERIA).text("");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "left");
}
else {
if((($(this).siblings(FORMAT_COL_FIND_CRITERIA).attr('val')!='') ) && ($(this).attr('val')!=$(this).siblings(Belonsto_COL_FIND_CRITERIA).attr('val'))){
$(this).siblings(FORMAT_COL_FIND_CRITERIA).text($(this).siblings(FORMAT_COL_FIND_CRITERIA).attr('val') +" (" + $(this).siblings(COUNTRY_COL_FIND_CRITERIA).attr('val') + ")");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "left");
}
}
}

var cells = $('[id="' + widget.oid+ '"]').find('td' + CUR_COL_FIND_CRITERIA).each(formatCell);

CUR_COL_FIND_CRITERIA = "[fidx=20]";
FORMAT_COL_FIND_CRITERIA = "[fidx=10]";
function formatCellneu(){
if ( $(this).attr('val')=="N\\A"){
$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("color", "#58ACFA");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).text("n.a");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "right");
}else{
if ($(this).attr('val')!="N\\A"){
//$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("color", "#58ACFA");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).text( $(this).siblings(CUR_COL_FIND_CRITERIA).attr('val'));
// $(this).siblings(FORMAT_COL_FIND_CRITERIA).text("N/A");
$(this).siblings(FORMAT_COL_FIND_CRITERIA).css("text-align", "right");
}
}
}
var cells = $('[id="' + widget.oid+ '"]').find('td' + CUR_COL_FIND_CRITERIA).each(formatCellneu);


CUR_COL_FIND_CRITERIA = "[fidx=7]";

//hide current column and set new width for the pivots
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

CUR_COL_FIND_CRITERIA = "[fidx=21]";

//hide current column and set new width for the pivots
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");


CUR_COL_FIND_CRITERIA = "[fidx=22]";

//hide current column and set new width for the pivots
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

CUR_COL_FIND_CRITERIA = "[fidx=8]";

//hide current column and set new width for the pivots
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).html("");
$('[id="' + widget.oid+ '"]').find(CUR_COL_FIND_CRITERIA).css("width", "0px");

 


//pivot tabs script
const columns = [
{ "fidx": "0", "name": "Wolk ID" },
{ "fidx": "1", "name": "Company Name" },
{ "fidx": "2", "name": "ITG_Name" },
{ "fidx": "3", "name": "Specialization" },
{ "fidx": "4", "name": "Country" },
{ "fidx": "5", "name": "Belongs to" },
{ "fidx": "6", "name": "Turnover quality" },
{ "fidx": "7", "name": "", "hide":true },
{ "fidx": "8", "name": "", "hide":true },
{ "fidx": "9", "name": "Outlets (2018)", "hide":true },
{ "fidx": "10", "name": "Turnover in Mil €", "hide":true },
{ "fidx": "11", "name": "Employees (2016)", "hide":true },
{ "fidx": "12", "name": "Associates National (2018)", "hide":true },
{ "fidx": "13", "name": "Outlets National (2018)", "hide":true },
{ "fidx": "14", "name": "Turnover National", "hide":true },
{ "fidx": "15", "name": "Employees National (2016)", "hide":true },
{ "fidx": "16", "name": "Associates Europe (2018)", "hide":true },
{ "fidx": "17", "name": "Outlets Europe (2018)", "hide":true },
{ "fidx": "18", "name": "Turnover Europe (2016)", "hide":true },
{ "fidx": "19", "name": "Employees Europe (2016)", "hide":true },
{ "fidx": "20", "name": "Turnover in Mil € (1)", "hide":true },
{ "fidx": "21", "name": "", "hide":true },
{ "fidx": "22", "name": "", "hide":true }
];

const pivotTabs = [
{"id":"0","label":"Company", "color":"#eaeaea", "columns":[9,10,11]},
{"id":"1","label":"National", "color":"#eaeaea", "columns":[12,13,14,15]},
{"id":"2","label":"Europe", "color":"#eaeaea", "columns":[16,17,18,19]},
{"id":"3","label":"All", "color":"#eaeaea", "columns":[9,10,11,12,13,14,15,16,17,18,19]}
]

var generateTabs = (tabs) => {
console.log('generating tabs' + tabs.length);
var tabs = tabs.reverse();
var style = tabs.map(function (tab) {
var css = '.tabbed [data-id="' + tab.id + '"] { \
background: ' + (tab.color || '#fff') + '; \
} \
.tabbed [data-id="' + tab.id + '"]:before { \
background: ' + (tab.color || '#fff') + '; \
} \
.tabbed [data-id="' + tab.id + '"]:after { \
background: ' + (tab.color || '#fff') + '; \
} \
';

return css;
});

style = '<style>' + style.join('\n') + '</style>';

var html = tabs.map(function (tab) {
var tabHtml = '<li class="" data-id="' + tab.id + '"> \
<a href="#">' + tab.label + '</a> \
</li>';

return tabHtml;
}).join('\n');

return style + '\n' + html;
};

var tabSelectionChanged = (id) => {
console.log('tabSelectionChanged id=' + id);
$('.tabbed li').removeClass('active');
$('.tabbed li[data-id="' + id + '"]').addClass('active');
};

var tabsHtml = `<style> /* Tabbed Styles */ .tabbed { width: 80%; min-width: 400px; margin: 0 auto; margin-top: 10px; overflow: hidden; transition: border 250ms ease; } .tabbed ul { margin: 0px; padding: 0px; overflow: hidden; float: left; padding-left: 48px; list-style-type: none; } .tabbed ul * { margin: 0px; padding: 0px; } .tabbed ul li { display: block; float: right; padding: 10px 24px 8px; background-color: #FFF; margin-right: 46px; z-index: 2; position: relative; cursor: pointer; color: #777; text-transform: uppercase; font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif; transition: all 250ms ease; } .tabbed ul li:before, .tabbed ul li:after { display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color: #FFF; transition: all 250ms ease; } .tabbed ul li:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; } .tabbed ul li:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; } .tabbed ul li:hover, .tabbed ul li:hover:before, .tabbed ul li:hover:after { background-color: #F4F7F9; color: #444; } .tabbed ul li.active { z-index: 3; } .tabbed ul li.active, .tabbed ul li.active:before, .tabbed ul li.active:after { background-color: #a80234; color: #fff; } /* Round Tabs */ .tabbed.round ul li { border-radius: 8px 8px 0 0; } .tabbed.round ul li:before { border-radius: 0 8px 0 0; } .tabbed.round ul li:after { border-radius: 8px 0 0 0; }
.dashboard widget.columnar .widget-body{
/*height: auto;*/
}
.p-container .p-mid {
/*ID missing scroll bar fix*/
-ms-overflow-style: auto;
}
.dataTables_scrollBody {
-ms-overflow-style: auto;
}
</style>
<div class="tabbed round">
<ul class="tab-links">
` + generateTabs(pivotTabs.slice(0)) + `
</ul>
</div>`;

var toggleColums = (allColumns, columnsToShow, color) => {
//first hide all hidable columns
allColumns.filter(function (column) { return column.hide }).forEach(function (column) {
$('[id="' + widget.oid+ '"]').find('[fidx="' + column.fidx + '"]').hide();
// $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').css('background', '');
});
//show selected columns
allColumns.filter(function (column) { return column.hide && columnsToShow.indexOf(parseInt(column.fidx)) >= 0 }).forEach(function (column) {
$('[id="' + widget.oid+ '"]').find('[fidx="' + column.fidx + '"]').show();
//let columns blinck with tab color (currently deactivated)
// if (color)
// $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').animate({backgroundColor:color}, 700, function () {
// $('[id="' + widget.oid+ '"]').find('.p-value[fidx="' + column.fidx + '"]').css('background', '')
// });
})

///////////////////////////////
/// workaround gesamtsumme
///////////////////////////////
if ($('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').length) {
$('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').attr('colspan', 7);
$('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').show();
$('widget[widgetid="' + widget.oid+ '"] div .p-grand-total-row-head').text('Gesamtsumme');
}
};

$('[widgetid="' + widget.oid+ '"]').find('.tabbed').remove();
$('[id="' + widget.oid+ '"]').closest('.p-container').before(tabsHtml);
//make first tab active

var selectedtab = localStorage.getItem('selectedtab') || "0";
tabSelectionChanged(selectedtab);
var firstTab = pivotTabs.filter(function (tab) { return tab.id == selectedtab})[0];
toggleColums(columns, firstTab.columns, firstTab.color);

//////////////////////////////////////////////////////////////
// this is workaround for ghost heades in pivot table /////
//////////////////////////////////////////////////////////////
console.log('fix gohst headers in pivot for ' + widget.oid);
$('widget[widgetid="' + widget.oid+ '"] div.p-fixed-rows').hide()

//fix style of hidden headers of widget
if (/Edge\/\d./i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
//IE specific
$('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['height'] = "auto";
$('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['-ms-overflow-style'] = "auto";
} else {
$('widget[widgetid="' + widget.oid+ '"] .p-container .p-mid')[0].style['height'] = "auto";
//fix headers height
$('widget[widgetid="' + widget.oid+ '"] .p-dim-head .p-head-content')[0].style['min-height'] = "50px";
}

$('.tabbed li').off('click');
$('.tabbed li').on('click', function (event) {
event.preventDefault();
var id = $(event.target).closest('li').data('id');
console.log('tab clicked id=' + id);
tabSelectionChanged(id);

var tab = pivotTabs.filter(function (tab) { return tab.id == id })[0];
toggleColums(columns, tab.columns, tab.color);

localStorage.setItem('selectedtab', id);
});

//end of pivot tabs script


});

widget.on("domready", function(w){
 var tags = $('td.phantom', element);
 for(var i=0; i<tags.length; i++) {
  tags[i].style.width = '0px';
 }
})