jquery-kpiwidgets/dist/js/topThreeKPI.min.js

Inneractive jQuery widgets for presenting data in a KPI box

!function(a){a.widget("inneractive.TopThreeKPI",{options:{title:"",data:{},footer:"",height:148,width:230,showDecimalPoint:!0,clickHandler:null,maxDeltaThreshold:999,containerStyleClass:"top-three-kpi-container",headerStyleClass:"kpi-title",headerTextStyleClass:"kpi-title-text",nameStyleClass:"top-3-name",valueStyleClass:"top-3-value",trendUpStyleClass:"kpi-trend-up-small",trendDownStyleClass:"kpi-trend-down-small",trendFlatStyleClass:"kpi-trend-flat-small",deltaUpStyleClass:"kpi-delta-up",deltaDownStyleClass:"kpi-delta-down",deltaFlatStyleClass:"kpi-delta-flat",footerStyleClass:"top-3-kpi-footer",footerTextStyleClass:"kpi-footer-text"},_create:function(){var b=this,c=this.options.height/4,d=""!=this.options.footer?c/2:0,e="",f="function"==typeof b.options.clickHandler?"pointer":"",g=a("<div/>",{height:this.options.height+"px",width:this.options.width+"px","class":this.options.containerStyleClass}),h=a("<div/>",{html:'<div class="'+this.options.headerTextStyleClass+'" style="cursor:'+e+';">'+this.options.title+"</div>","class":this.options.headerStyleClass,height:c}),i=this._createDataDiv(f).click(function(){"function"==typeof b.options.clickHandler&&b.options.clickHandler.apply()}),j=a("<div/>",{html:'<div class="'+this.options.footerTextStyleClass+'">'+this.options.footer+"</div>","class":this.options.footerStyleClass,height:d});g.append(h).append(i).append(j),this.element.append(g)},_createDataDiv:function(b){var c=this.options.height/4,d=""!=this.options.footer?c/2:0,e=this.options.height-c-d,f=e/3,g=this.options.maxDeltaThreshold,h=a("<div/>",{"class":"kpi-data top-three-kpi-data",height:e}),i=this;if(this.options.data.length>0)a.each(this.options.data,function(c,d){var e=d,j=i.options.trendFlatStyleClass,k=i.options.deltaFlatStyleClass;""!=e.trend&&("down"==e.trend?(j=i.options.trendDownStyleClass,k=i.options.deltaDownStyleClass):"flat"==e.trend?(j=i.options.trendFlatStyleClass,k=i.options.deltaFlatStyleClass):"up"==e.trend&&(j=i.options.trendUpStyleClass,k=i.options.deltaUpStyleClass));var l=e.name,m=e.value,n=e.delta;try{l.length>14&&(l=l.substr(0,14)+"...")}catch(o){}try{m=m%1!=0&&i.options.showDecimalPoint?parseFloat(m).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,","):parseInt(m).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")}catch(o){}var p='<div style="height: 100%; width: 100%; display: table;cursor:'+b+'"><div title="'+e.name+'" class="'+i.options.nameStyleClass+'">'+l+'</div><div class="'+i.options.valueStyleClass+'">'+e.symbol+m+"</div>";p+=g>=n?'<div class="'+j+'" />':'<div class="'+j+'" title="'+n+'%" />',n>0&&g>=n?p+='<div class="'+k+'">'+n+"%</div>":n>g&&(p+='<div class="'+k+'" style="width:20px;"></div>'),p+="</div>";var q=a("<div/>",{html:p,height:f+"px",width:i.options.width+"px","class":2==c?"top-3-row-item-noborder":"top-3-row-item"});h.append(q)});else{var j='<div style="height: 100%; width: 100%; display: inline-table;"><div class="'+i.options.nameStyleClass+'" style="text-align:center;">No data to display</div>';j+="</div>",h.append(j)}return h},setData:function(b){this.options.data=b;var c=this._createDataDiv(),d=this.element.find(a("."+this.options.footerStyleClass));this.element.find(a(".top-three-kpi-data")).remove(),this.element.find(a("."+this.options.footerStyleClass)).remove(),this.element.find(a("."+this.options.containerStyleClass)).append(c).append(d)},getData:function(){return this.options.data}})}(jQuery);