zmp-core/components/gauge/gauge.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,a=e.utils,n=(e.getDevice,e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods);e.ModalMethods;function i(e){this.wrapped=e}function l(e){var t,r;function a(t,r){try{var o=e[t](r),l=o.value,s=l instanceof i;Promise.resolve(s?l.wrapped:l).then((function(e){s?a("return"===t?"return":"next",e):n(o.done?"return":"normal",e)}),(function(e){a("throw",e)}))}catch(e){n("throw",e)}}function n(e,n){switch(e){case"return":t.resolve({value:n,done:!0});break;case"throw":t.reject(n);break;default:t.resolve({value:n,done:!1})}(t=t.next)?a(t.key,t.arg):r=null}this._invoke=function(e,n){return new Promise((function(o,i){var l={key:e,arg:n,resolve:o,reject:i,next:null};r?r=r.next=l:(t=r=l,a(e,n))}))},"function"!=typeof e.return&&(this.return=void 0)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}l.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},l.prototype.next=function(e){return this._invoke("next",e)},l.prototype.throw=function(e){return this._invoke("throw",e)},l.prototype.return=function(e){return this._invoke("return",e)};var c=a.extend,d=a.deleteProps,g=function(e){var t,a;function n(t,a){var n;void 0===a&&(a={});var o=u(n=e.call(this,a,[t])||this),i=c({},t.params.gauge);o.useModulesParams(i),o.params=c(i,a);var l=o.params.el;if(!l)return o||u(n);var s=r(l);return 0===s.length?o||u(n):s[0].zmpGauge?s[0].zmpGauge||u(n):(c(o,{app:t,$el:s,el:s&&s[0]}),s[0].zmpGauge=o,o.useModules(),o.init(),o||u(n))}a=e,(t=n).prototype=Object.create(a.prototype),t.prototype.constructor=t,s(t,a);var o=n.prototype;return o.calcRadius=function(){var e=this.params;return e.size/2-e.borderWidth/2},o.calcBorderLength=function(){var e=this.calcRadius();return 2*Math.PI*e},o.render=function(){var e=this;if(e.params.render)return e.params.render.call(e,e);var t=e.params,r=t.type,a=t.value,n=t.size,o=t.bgColor,i=t.borderBgColor,l=t.borderColor,s=t.borderWidth,u=t.valueText,c=t.valueTextColor,d=t.valueFontSize,g=t.valueFontWeight,f=t.labelText,h=t.labelTextColor,v=t.labelFontSize,p=t.labelFontWeight,m="semicircle"===r,x=e.calcRadius(),b=e.calcBorderLength(),y=Math.max(Math.min(a,1),0);return $jsx("svg",{class:"gauge-svg",width:n+"px",height:(m?n/2:n)+"px",viewBox:"0 0 "+n+" "+(m?n/2:n)},m&&$jsx("path",{class:"gauge-back-semi",d:"M"+(n-s/2)+","+n/2+" a1,1 0 0,0 -"+(n-s)+",0",stroke:i,"stroke-width":s,fill:o||"none"}),m&&$jsx("path",{class:"gauge-front-semi",d:"M"+(n-s/2)+","+n/2+" a1,1 0 0,0 -"+(n-s)+",0",stroke:l,"stroke-width":s,"stroke-dasharray":b/2,"stroke-dashoffset":b/2*(1+y),fill:i?"none":o||"none"}),!m&&i&&$jsx("circle",{class:"gauge-back-circle",stroke:i,"stroke-width":s,fill:o||"none",cx:n/2,cy:n/2,r:x}),!m&&$jsx("circle",{class:"gauge-front-circle",transform:"rotate(-90 "+n/2+" "+n/2+")",stroke:l,"stroke-width":s,"stroke-dasharray":b,"stroke-dashoffset":b*(1-y),fill:i?"none":o||"none",cx:n/2,cy:n/2,r:x}),u&&$jsx("text",{class:"gauge-value-text",x:"50%",y:m?"100%":"50%","font-weight":g,"font-size":d,fill:c,dy:m?f?-v-15:-5:0,"text-anchor":"middle","dominant-baseline":!m&&"middle"},u),f&&$jsx("text",{class:"gauge-label-text",x:"50%",y:m?"100%":"50%","font-weight":p,"font-size":v,fill:h,dy:m?-5:u?d/2+10:0,"text-anchor":"middle","dominant-baseline":!m&&"middle"},f))},o.update=function(e){void 0===e&&(e={});var t=this,r=t.params,a=t.$svgEl;if(Object.keys(e).forEach((function(t){void 0!==e[t]&&(r[t]=e[t])})),0===a.length)return t;var n=r.value,o=r.size,i=r.bgColor,l=r.borderBgColor,s=r.borderColor,u=r.borderWidth,c=r.valueText,d=r.valueTextColor,g=r.valueFontSize,f=r.valueFontWeight,h=r.labelText,v=r.labelTextColor,p=r.labelFontSize,m=r.labelFontWeight,x=t.calcBorderLength(),b=Math.max(Math.min(n,1),0),y=t.calcRadius(),k="semicircle"===r.type,w={width:o+"px",height:(k?o/2:o)+"px",viewBox:"0 0 "+o+" "+(k?o/2:o)};if(Object.keys(w).forEach((function(e){a.attr(e,w[e])})),k){var z={d:"M"+(o-u/2)+","+o/2+" a1,1 0 0,0 -"+(o-u)+",0",stroke:l,"stroke-width":u,fill:i||"none"},j={d:"M"+(o-u/2)+","+o/2+" a1,1 0 0,0 -"+(o-u)+",0",stroke:s,"stroke-width":u,"stroke-dasharray":x/2,"stroke-dashoffset":x/2*(1+b),fill:l?"none":i||"none"};Object.keys(z).forEach((function(e){a.find(".gauge-back-semi").attr(e,z[e])})),Object.keys(j).forEach((function(e){a.find(".gauge-front-semi").attr(e,j[e])}))}else{var C={stroke:l,"stroke-width":u,fill:i||"none",cx:o/2,cy:o/2,r:y},M={transform:"rotate(-90 "+o/2+" "+o/2+")",stroke:s,"stroke-width":u,"stroke-dasharray":x,"stroke-dashoffset":x*(1-b),fill:l?"none":i||"none",cx:o/2,cy:o/2,r:y};Object.keys(C).forEach((function(e){a.find(".gauge-back-circle").attr(e,C[e])})),Object.keys(M).forEach((function(e){a.find(".gauge-front-circle").attr(e,M[e])}))}if(c){if(!a.find(".gauge-value-text").length){var $=document.createElementNS("http://www.w3.org/2000/svg","text");$.classList.add("gauge-value-text"),a.append($)}var E={x:"50%",y:k?"100%":"50%","font-weight":f,"font-size":g,fill:d,dy:k?h?-p-15:-5:0,"text-anchor":"middle","dominant-baseline":!k&&"middle"};Object.keys(E).forEach((function(e){a.find(".gauge-value-text").attr(e,E[e])})),a.find(".gauge-value-text").text(c)}else a.find(".gauge-value-text").remove();if(h){if(!a.find(".gauge-label-text").length){var G=document.createElementNS("http://www.w3.org/2000/svg","text");G.classList.add("gauge-label-text"),a.append(G)}var F={x:"50%",y:k?"100%":"50%","font-weight":m,"font-size":p,fill:v,dy:k?-5:c?g/2+10:0,"text-anchor":"middle","dominant-baseline":!k&&"middle"};Object.keys(F).forEach((function(e){a.find(".gauge-label-text").attr(e,F[e])})),a.find(".gauge-label-text").text(h)}else a.find(".gauge-label-text").remove();return t},o.init=function(){var e=this,t=r(e.render()).eq(0);return t.zmpGauge=e,c(e,{$svgEl:t,svgEl:t&&t[0]}),e.$el.append(t),e},o.destroy=function(){var e=this;e.$el&&!e.destroyed&&(e.$el.trigger("gauge:beforedestroy"),e.emit("local::beforeDestroy selfBeforeDestroy",e),e.$svgEl.remove(),delete e.$el[0].zmpGauge,d(e),e.destroyed=!0)},n}(n),f={name:"gauge",static:{Gauge:g},create:function(){var e=this;e.gauge=o({defaultSelector:".gauge",constructor:g,app:e,domProp:"zmpGauge"}),e.gauge.update=function(t,a){if(0!==r(t).length){var n=e.gauge.get(t);if(n)return n.update(a),n}}},params:{gauge:{el:null,type:"circle",value:0,size:200,bgColor:"transparent",borderBgColor:"#eeeeee",borderColor:"#000000",borderWidth:10,valueText:null,valueTextColor:"#000000",valueFontSize:31,valueFontWeight:500,labelText:null,labelTextColor:"#888888",labelFontSize:14,labelFontWeight:400}},on:{tabMounted:function(e){var t=this;r(e).find(".gauge-init").each((function(e){t.gauge.create(c({el:e},r(e).dataset()||{}))}))},tabBeforeRemove:function(e){r(e).find(".gauge-init").each((function(e){e.zmpGauge&&e.zmpGauge.destroy()}))},pageInit:function(e){var t=this;e.$el.find(".gauge-init").each((function(e){t.gauge.create(c({el:e},r(e).dataset()||{}))}))},pageBeforeRemove:function(e){e.$el.find(".gauge-init").each((function(e){e.zmpGauge&&e.zmpGauge.destroy()}))}},vnode:{"gauge-init":{insert:function(e){var t=e.elm;this.gauge.create(c({el:t},r(t).dataset()||{}))},destroy:function(e){var t=e.elm;t.zmpGauge&&t.zmpGauge.destroy()}}}};if(t){if(e.prototype.modules&&e.prototype.modules[f.name])return;e.use(f),e.instance&&(e.instance.useModuleParams(f,e.instance.params),e.instance.useModule(f))}return f}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))