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
