jquery-kpiwidgets
Version:
Inneractive jQuery widgets for presenting data in a KPI box
1 lines • 2.62 kB
JavaScript
!function(a){a.widget("inneractive.NumTrendKPI",{options:{title:"",data:{value:0,trend:"",symbol:""},footer:"",height:148,width:230,showDecimalPoint:!0,maxValueForSize:1e5,clickHandler:null,containerStyleClass:"num-trend-kpi-container",headerStyleClass:"kpi-title",headerTextStyleClass:"kpi-title-text",valueStyleClass:"num-trend-kpi-data-text",trendUpStyleClass:"kpi-trend-up",trendDownStyleClass:"kpi-trend-down",trendFlatStyleClass:"kpi-trend-flat",footerStyleClass:"num-trend-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,""),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="height:'+c+"px;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=c/2,e=this.options.height-c-d,f=this.options.data.value,g=f;try{g=f%1!=0&&this.options.showDecimalPoint?parseFloat(f).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,","):parseInt(f).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",")}catch(h){}var i='<div style="display:inline-table;height:'+e+"px;cursor:"+b+'">';if(i+=f>=this.options.maxValueForSize?'<div class="'+this.options.valueStyleClass+' num-trend-kpi-data-text-small">':'<div class="'+this.options.valueStyleClass+'">',i+=(""!=this.options.data.symbol?this.options.data.symbol:"")+g,i+="</div>",""!=this.options.data.trend){var j=this.options.trendFlatStyleClass;"down"==this.options.data.trend?j=this.options.trendDownStyleClass:"flat"==this.options.data.trend?j=this.options.trendFlatStyleClass:"up"==this.options.data.trend&&(j=this.options.trendUpStyleClass);var k=e/5*4;i+='<div class="'+j+'" style="height:'+k+'px;" />'}i+="</div>";var l=a("<div/>",{html:i,"class":"kpi-data num-trend-kpi-data",height:e,style:"cursor: "+b+";"});return l},setData:function(b){this.options.data=b;var c=this._createDataDiv();this.element.find(a(".num-trend-kpi-data")).remove(),this.element.find(a("."+this.options.headerStyleClass)).after(c)},getData:function(){return this.options.data}})}(jQuery);