zmp-core/components/pie-chart/pie-chart.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(t,e){void 0===e&&(e=!0);var r=t.$,o=t.utils,n=(t.getDevice,t.getSupport,t.Class),i=(t.Modal,t.ConstructorMethods);t.ModalMethods;function a(t){this.wrapped=t}function s(t){var e,r;function o(e,r){try{var i=t[e](r),s=i.value,l=s instanceof a;Promise.resolve(l?s.wrapped:s).then((function(t){l?o("return"===e?"return":"next",t):n(i.done?"return":"normal",t)}),(function(t){o("throw",t)}))}catch(t){n("throw",t)}}function n(t,n){switch(t){case"return":e.resolve({value:n,done:!0});break;case"throw":e.reject(n);break;default:e.resolve({value:n,done:!1})}(e=e.next)?o(e.key,e.arg):r=null}this._invoke=function(t,n){return new Promise((function(i,a){var s={key:t,arg:n,resolve:i,reject:a,next:null};r?r=r.next=s:(e=r=s,o(t,n))}))},"function"!=typeof t.return&&(this.return=void 0)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function p(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(t){return this._invoke("next",t)},s.prototype.throw=function(t){return this._invoke("throw",t)},s.prototype.return=function(t){return this._invoke("return",t)};var u=o.extend,c=o.deleteProps,h=function(t){var e,o;function n(e,o){var n;void 0===o&&(o={});var i=p(n=t.call(this,o,[e])||this),a=u({},e.params.pieChart);i.useModulesParams(a),i.params=u(a,o);var s=i.params.el;if(!s)return i||p(n);var l=r(s);return 0===l.length?i||p(n):l[0].zmpPieChart?l[0].zmpPieChart||p(n):(u(i,{app:e,$el:l,el:l&&l[0],currentIndex:null,zmpTooltip:null}),l[0].zmpPieChart=i,i.useModules(),i.showTooltip=i.showTooltip.bind(p(n)),i.hideTooltip=i.hideTooltip.bind(p(n)),i.init(),i||p(n))}o=t,(e=n).prototype=Object.create(o.prototype),e.prototype.constructor=e,l(e,o);var i=n.prototype;return i.getSummValue=function(){var t=this.params.datasets,e=0;return t.map((function(t){return t.value||0})).forEach((function(t){e+=t})),e},i.getPaths=function(){var t=this,e=this.params,r=e.datasets,o=e.size,n=[],i=0;function a(t){return[Math.cos(2*Math.PI*t)*(o/3),Math.sin(2*Math.PI*t)*(o/3)]}return r.forEach((function(e){var r=e.value,s=e.label,l=e.color,p=r/t.getSummValue(),u=a(i),c=u[0],h=u[1],d=a(i+=p),f=d[0],m=d[1],v=["M "+c+" "+h,"A "+o/3+" "+o/3+" 0 "+(p>.5?1:0)+" 1 "+f+" "+m,"L 0 0"].join(" ");n.push({points:v,label:s,color:l})})),n},i.formatTooltipText=function(){var t=this.params.datasets,e=this.currentIndex;if(null===e)return"";var r=t[e],o=r.value,n=r.label,i=r.color,a=o/this.getSummValue()*100,s=function(t){return parseInt(t,10)===t?t:Math.round(100*t)/100};return this.params.formatTooltip?this.params.formatTooltip.call(this,{index:e,value:o,label:n,color:i,percentage:a}):'\n      <div class="pie-chart-tooltip-label">\n        <span class="pie-chart-tooltip-color" style="background-color: '+i+';"></span> '+((n?n+": ":"")+s(o)+" ("+s(a)+"%)")+"\n      </div>\n    "},i.setTooltip=function(){var t=this,e=t.currentIndex,r=t.el,o=t.app,n=t.params.tooltip;if((null!==e||t.zmpTooltip)&&n&&r)return null===e||t.zmpTooltip?void(t.zmpTooltip&&(null!==e?(t.zmpTooltip.setText(t.formatTooltipText()),t.zmpTooltip.setTargetEl(r.querySelector('path[data-index="'+e+'"]')),t.zmpTooltip.show()):t.zmpTooltip.hide())):(t.zmpTooltip=o.tooltip.create({trigger:"manual",containerEl:r,targetEl:r.querySelector('path[data-index="'+e+'"]'),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.zmpTooltip.show())},i.render=function(){var t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:"-"+t/3+" -"+t/3+" "+2*t/3+" "+2*t/3,style:"transform: rotate(-90deg)"},e.map((function(t,e){return $jsx("path",{d:t.points,fill:t.color,"data-index":e})})))},i.update=function(t){void 0===t&&(t={});var e=this,o=e.params;if(Object.keys(t).forEach((function(e){void 0!==t[e]&&(o[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.zmpPieChart;var n=r(e.render()).eq(0);return n.zmpPieChart=e,u(e,{$svgEl:n,svgEl:n&&n[0]}),e.$el.append(n),e},i.setCurrentIndex=function(t){var e=this;if(t!==e.currentIndex){var r=e.params.datasets;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:r[t]}),e.emit("local::select pieChartSelect",e,t,r[t])}},i.showTooltip=function(t){var e=this,o=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(o),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach((function(t,o){o!==e.currentIndex&&r(t).addClass("pie-chart-hidden")})),this.setTooltip()},i.hideTooltip=function(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()},i.init=function(){var t=this,e=r(t.render()).eq(0);return e.zmpPieChart=t,u(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t},i.destroy=function(){var t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.zmpTooltip&&t.zmpTooltip.destroy&&t.zmpTooltip.destroy(),delete t.$el[0].zmpPieChart,c(t),t.destroyed=!0)},n}(n),d={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create:function(){var t=this;t.pieChart=i({defaultSelector:".pie-chart",constructor:h,app:t,domProp:"zmpPieChart"}),t.pieChart.update=function(e,o){if(0!==r(e).length){var n=t.pieChart.get(e);if(n)return n.update(o),n}}}};if(e){if(t.prototype.modules&&t.prototype.modules[d.name])return;t.use(d),t.instance&&(t.instance.useModuleParams(d,t.instance.params),t.instance.useModule(d))}return d}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))