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

Inneractive jQuery widgets for presenting data in a KPI box

!function(a){a.widget("inneractive.PercentageKPI",{options:{title:"",data:[{value:"",partial:0,total:0}],footer:"",height:148,width:230,clickHandler:null,containerStyleClass:"percentage-kpi-container",headerStyleClass:"kpi-title",headerTextStyleClass:"kpi-title-text",valueStyleClass:"percentage-kpi-data-text",subValueStyleClass:"percentage-kpi-sub-data-text",footerStyleClass:"percentage-kpi-footer",footerTextStyleClass:"kpi-footer-text"},_create:function(){var b=this,c=this.options.height/4,d=c/2,e=(this.options.height-c-d,"function"==typeof b.options.clickHandler?"pointer":""),f=a("<div/>",{height:this.options.height+"px",width:this.options.width+"px","class":this.options.containerStyleClass}),g=a("<div/>",{html:'<div class="'+this.options.headerTextStyleClass+'">'+this.options.title+"</div>","class":this.options.headerStyleClass,height:c}),h=this._createDataDiv(e).click(function(){"function"==typeof b.options.clickHandler&&b.options.clickHandler.apply()}),i=a("<div/>",{html:'<div class="'+this.options.footerTextStyleClass+'">'+this.options.footer+"</div>","class":this.options.footerStyleClass,height:d});f.append(g).append(h).append(i),this.element.append(f)},_createDataDiv:function(b){var c=this.options.height/4,d=c/2,e=this.options.height-c-d,f='<div style="display:inline-table;height:'+e+';"><div class="'+this.options.valueStyleClass+'">'+this.options.data.value+"</div>";this.options.data.total>0&&(f+="<div class='"+this.options.subValueStyleClass+"'>"+(100*this.options.data.partial/this.options.data.total).toFixed(2)+"%</div>"),f+="</div>";var g=a("<div />",{html:f,"class":"kpi-data percentage-kpi-data",style:"cursor:"+b,height:e});return g},setData:function(b){this.options.data=b;var c=this._createDataDiv();this.element.find(a(".percentage-kpi-data")).remove(),this.element.find(a("."+this.options.headerStyleClass)).after(c)},getData:function(){return this.options.data}})}(jQuery);