framework7/components/pie-chart/pie-chart.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(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 u(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 p=o.extend,c=o.deleteProps,h=function(t){var e,o;function n(e,o){var n;void 0===o&&(o={});var i=u(n=t.call(this,o,[e])||this),a=p({},e.params.pieChart);i.useModulesParams(a),i.params=p(a,o);var s=i.params.el;if(!s)return i||u(n);var l=r(s);return 0===l.length?i||u(n):l[0].f7PieChart?l[0].f7PieChart||u(n):(p(i,{app:e,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=i,i.useModules(),i.showTooltip=i.showTooltip.bind(u(n)),i.hideTooltip=i.hideTooltip.bind(u(n)),i.init(),i||u(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,u=r/t.getSummValue(),p=a(i),c=p[0],h=p[1],f=a(i+=u),d=f[0],v=f[1],m=["M "+c+" "+h,"A "+o/3+" "+o/3+" 0 "+(u>.5?1:0)+" 1 "+d+" "+v,"L 0 0"].join(" ");n.push({points:m,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.f7Tooltip)&&n&&r)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(r.querySelector('path[data-index="'+e+'"]')),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=o.tooltip.create({trigger:"manual",containerEl:r,targetEl:r.querySelector('path[data-index="'+e+'"]'),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.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.f7PieChart;var n=r(e.render()).eq(0);return n.f7PieChart=e,p(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.f7PieChart=t,p(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.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,c(t),t.destroyed=!0)},n}(n),f={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:"f7PieChart"}),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[f.name])return;t.use(f),t.instance&&(t.instance.useModuleParams(f,t.instance.params),t.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))