Tabber Automatic Switching

Hi Alex,

Great to hear!

Credit to Ophir_Buchman for transform pivot explanation in Solved: Pivot 2.0 - Manipulating a Pivot Chart - Sisense Community as used below.

Please see the script below, with some comments:

// SWITCH TABS AT INTERVAL
const time = 20000
const tabber = {
	tabs: [
		{
			displayWidgetIds: ['64d0fa575c82b800343cdbfd'],
			hideWidgetIds: ['65a6a2a19dd6330033e88608']
		},
		{
			displayWidgetIds: ['65a6a2a19dd6330033e88608'],
			hideWidgetIds: ['64d0fa575c82b800343cdbfd']
		}
	]
}

dashboard.on('domready', () => {
	const numberOfTabs = tabber.tabs.length
	let i = 0
	setInterval(() => {
		prism.$ngscope.$broadcast('tab-change', {
			show: tabber.tabs[i].displayWidgetIds || [],
			hide: tabber.tabs[i].hideWidgetIds || [],
			tabsConfig: tabber.tabsConfig || 'multiply',
			renderWidgets: false
		})
		i = (i === numberOfTabs - 1) ? 0 : i + 1
	}, time)
})

// REFRESH WIDGETS AT INTERVAL
dashboard.on('widgetinitialized', function(w, args) {
   var seconds = 60;
   var refreshWidget = function(){
       args.widget.refresh();
       setTimeout(refreshWidget, seconds*1000);
   }
  setTimeout(refreshWidget, seconds*1000);
})

// APPLY PIVOT STYLING
dashboard.on('widgetinitialized', function(d, args) {
	const widget = args.widget
	if (widget.type !== 'pivot2') { return }
	// credit to @Opir https://community.sisense.com/t5/build-analytics/pivot-2-0-manipulating-a-pivot-chart/m-p/3589
	widget.transformPivot(
	  {},
	  function (metadata, cell) {
		cell.style = {
		  backgroundColor : 'black',
		  fontSize : 14,
		  fontWeight : 'bold',
		  fontStyle : 'italic',
		  textAlign : 'center',
		  color : 'white',
		  borderColor : 'white',
		  borderWidth : '3px',
		  minWidth : '150px',
		  maxWidth : '200px'
		};
	  }
	);
})

// APPLY GLOBAL STYLES
dashboard.on('initialized', (dash) => {
    const styles = `
	body {
		background-color: black !important;
	}
	widget-header {
		background-color: black !important;
		color: white !important;
	}
	.widget-title {
		color: white;
	}
	.widget-body {
		background-color: black !important;
	}
	.widget-chart-container {
		background-color: black !important;
	}
	text {
		color: white;
		font-size: 18px;
		fill: white;
	}
	.x-axis text {
		text-anchor: middle;
	}
	.pivot-container {
		border: none !important;
	}
	.pivot-header, .pivot-cell, .pvtVal {
		background-color: green;
	}
	.pivot-header, .pivot-cell, .table-grid_row {
		color: white;
		fille: white;
	}
	.table-grid.table-grid--fixed.table-grid--columns.table-grid--top.table-grid--right.active {
		background-color: black !important;
	}
	.tablewidget-widget-content, .tablewidget-widget-content tr, div#grid_paginate {
		background: black !important;
	}
	.tablewidget-widget-content tr th, .tablewidget-widget-content td {
		color: white !important;
	}
	.tablewidget-widget-content tr:hover td {
		color: black !important;
	}
	`
	const styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.head.appendChild(styleSheet)
})

Previously, you were using jQuery to modify the styles of elements. If you instead, inject it to the header as a style as above you won't need to worry about applying the style to the element before the element exists. This is why the dashboard previously appeared white for a split second before switching to style specified in the jQuery. Additionally, you can run into race conditions where the style is never changed because the jQuery runs before the element is on the document.

I added style consistent with table widgets and pivots, but pivot controls required a little extra - please see above leveraging transformPivot() method.

We've also made all sorts of fantastic looking dashboards for customers for use specifically on TV screens like your use case, with nice big BloX indicators with sparklines, arrows and logos that were very well received. If you'd like to see some of what we've done for others, we'd love to provide a demo. Please send me an email if you're interested and we can organize a call and compare notes?

Let me know how this goes for you.

Thanks,

Julian

RAPID BI

[email protected]

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

Hi ascott011 ,

Add the below widget script to you tabber widget to automatically switch the tabber in every 3 second (you can change the interval as per you requirement)

widget.on('domready',function(w, e){
	
	function waitForElement() {
		
		if (document.querySelectorAll('.listDefaultCSS .listItemDefaultCSS').length > 0) {
			
			const tabs = $(`.listDefaultCSS .listItemDefaultCSS`);

			function clickNextDiv() {
			  let currentIndex = 0;

			  return function () {
				tabs[currentIndex].click();
				currentIndex = (currentIndex + 1) % tabs.length;
			  };
			}

			const clickNext = clickNextDiv();

			setInterval(clickNext, 3000);
			
		} else {
			
			setTimeout(waitForElement, 100);
			
		}
		
	}

	waitForElement();
								  
});

 

 

Feel free to reach out if you have further questions, we're always happy to help 🙂
[email protected] 
Paldi Solutions, Number #1 Sisense Plugins Developer