KPI Toggle - Display Widgets By Selecting KPIs

[intapiuser]

Version 1.2

Challenge

Creating a single dashboard for an audience with diverse requirements is challenging to do because as widgets are added focus is lost. Information overload is evident as more widgets are added. Users can't select the KPIs that are relevant to them.

Solution

This dashboard script lets users select what widgets are visible by selecting KPIs relevant to them.

CONFIGURATION

Paste the script in the dashboard script console and after pasting the script edit the following items. Widgets that are not included in a group will remain visible.

GROUPING WIDGETS WITH KPIGROUPS

The KPI grouping uses the following syntax.

var kpiGroups = {
   'KPI Name':           ['widget id'] ,
   'Another KPI Name':   ['another id','a third widget id']
};

OTHER CONFIGURATIONS

• Transition - accepts an integer. Controls the speed of the transition animation.
• Button Style - CSS that you can use to style your button.

APPLICATION CODE

// Version 1.2
// -------------------------------------------------------------------------------------------------------
// Configuration Code      ----------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------

var kpiGroups = {
 'KPI1 Name' :  ['5c8179af525442430462eebe', '5c8179af525442430462eebb'] ,
 'KPI2 Name' :  ['5c8179af525442430462eebc', '5c8179af525442430462eebd'] ,
 'KPI3 Name' :   ['5c8179af525442430462eebf']
};

var transition = 400;

var ButtonStyle = `
 margin: 5px;
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
 background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
 background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
 background-color:#ededed;
 -moz-border-radius:2em;
 -webkit-border-radius:2em;
 border-radius:2em;
 border:1px solid #dcdcdc;
 display:inline-block;
 cursor:pointer;
 color:#777777;
 font-family:Arial;
 font-size:18px;
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #ffffff;
`;

// -------------------------------------------------------------------------------------------------------
// Application Code         ----------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------------

var i = 0;

dashboard.on('initialized', () => { 
 
 // NEW CODE
 var selectionBox = '<div id="chooser" style="padding: 20px;    text-align: center;    vertical-align: middle; background-color: #FFCB05;"><span style = "color: white; font-size: 18px; ">SELECT KPIS</span></br></br></div>';
 $('dashboard>div>div.content').prepend(selectionBox);
 
 $.each(kpiGroups, (k,v) => {
  $('#chooser', element).append($('<button/>', {
   text: k,
   click: () => {
    $.each(v, (k,v2) => {
     $('widget[widgetid="' + v2 + '"]').toggle(transition);
     setTimeout( () => { prism.activeDashboard.widgets.$$widgets.find(w => w.oid === v2 ).redraw(); } , (transition) );
    })
   },
   style: ButtonStyle
  }));
 })
});

dashboard.on('widgetrender', () => {
  if(!$('.toggleWidget').length){
  $.each(kpiGroups, (k,v) => {
   console.log(k, v);
   $.each(v, (k2,v2) => {
    console.log(v2);
    $('widget[widgetid="' + v2 + '"]').addClass('toggleWidget');
   });
  });
 };
 
 for(i; i<1; i++){
  $('.toggleWidget').hide();
 };
});

BEST PRACTICES

• Contain related widgets to their own rows.
• Do not include more than 15 widgets in the dashboard, visible or invisible.

Enjoy!