{"version":3,"sources":["webpack:////Users/owenli/Documents/workspace/awi-wlc-fe/src/views/blocks/dashboardUserProgressBlock/js/dashboardUserProgressBlock.js"],"names":["CLS","DashboardUserProgressBlock","element","initValue","arguments","length","undefined","_classCallCheck","this","$element","$","percentage","parseFloat","attr","maxPercentage","defaultRadius","plainColor","highlightColor","canvas","find","concat","drawCanvas","key","value","width","getBoundingClientRect","height","lineWidth","context","getContext","centerX","centerY","radius","renderArc","ctx","circleStart","Math","PI","circleEnd","clearRect","beginPath","arc","strokeStyle","stroke","lineCap","fillStyle"],"mappings":"s4BAAA,IACMA,EAAM,iBAECC,EAA0B,WAqBrC,SApBD,SAAAA,EAAYC,GAAwB,IAAfC,EAASC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,+FAACG,CAAAC,KAAAP,GACjCO,KAAKC,SAAWC,EAAE,mBAElBF,KAAKG,WAAaC,WAAWJ,KAAKC,SAASI,KAAK,qBAAuBV,EACvEK,KAAKM,cAAgB,IACrBN,KAAKO,cAAgB,IAGrBP,KAAKQ,WAAa,UAClBR,KAAKS,eAAiB,UAGtBT,KAAKU,OAASV,KAAKC,SAASU,KAAI,IAAAC,OAAKpB,EAAG,YAAW,IAEhDQ,KAAKG,WAAa,GAAKH,KAAKG,WAAaH,KAAKM,iBAChDN,KAAKG,WAAa,GAInBH,KAAKa,mBACLC,IAAA,aAAAC,MAED,WACCf,KAAKU,OAAOM,MAAQhB,KAAKU,OAAOO,wBAAwBD,MACxDhB,KAAKU,OAAOQ,OAASlB,KAAKU,OAAOM,MAEjChB,KAAKmB,UAAY,EACjBnB,KAAKoB,QAAUpB,KAAKU,OAAOW,WAAW,MACtCrB,KAAKsB,QAAUtB,KAAKU,OAAOM,MAAQ,EACnChB,KAAKuB,QAAUvB,KAAKU,OAAOQ,OAAS,EACpClB,KAAKwB,QAAUxB,KAAKU,OAAOM,MAAQhB,KAAKmB,WAAa,EAElDnB,KAAKwB,OAAS,IAChBxB,KAAKwB,OAAS,GAGfxB,KAAKyB,UAAUzB,KAAKG,eACpBW,IAAA,YAAAC,MAED,SAAUZ,GACT,IAAIuB,EAAM1B,KAAKoB,QACXO,EAAc,IAAMC,KAAKC,GACzBC,EAAYH,EAAgBxB,EAAa,IAAOyB,KAAKC,GAAK,EAE9DH,EAAIK,UAAU,EAAG,EAAG/B,KAAKU,OAAOM,MAAOhB,KAAKU,OAAOQ,QAEnDQ,EAAIM,YACJN,EAAIO,IAAIjC,KAAKsB,QAAStB,KAAKuB,QAASvB,KAAKwB,OAAQG,EAAa,EAAIC,KAAKC,IAAI,GAC3EH,EAAIP,UAAYnB,KAAKmB,UACrBO,EAAIQ,YAAclC,KAAKQ,WACvBkB,EAAIS,SAEDhC,EAAa,IACfuB,EAAIM,YACJN,EAAIO,IAAIjC,KAAKsB,QAAStB,KAAKuB,QAASvB,KAAKwB,OAAQG,EAAaG,GAAW,GACzEJ,EAAIP,UAAYnB,KAAKmB,UACrBO,EAAIU,QAAU,OACdV,EAAIQ,YAAclC,KAAKS,eACvBiB,EAAIW,UAAYrC,KAAKS,eACrBiB,EAAIS,yGA5DgC","file":"block-23.2f662a3aa586e55a56ca.js","sourcesContent":["const NS = 'DashboardUserProgressBlock';\nconst CLS = 'radialProgress';\n\nexport class DashboardUserProgressBlock {\n\tconstructor(element, initValue = 0) {\n\t\tthis.$element = $('#radialProgress');\n\n\t\tthis.percentage = parseFloat(this.$element.attr('data-percentage')) || initValue;\n\t\tthis.maxPercentage = 100;\n\t\tthis.defaultRadius = 160;\n\n\t\t// Variables sourced in .scss styles\n\t\tthis.plainColor = '#DCDCDC';\n\t\tthis.highlightColor = '#33CC66';\n\n\t\t// Use the DOM element\n\t\tthis.canvas = this.$element.find(`.${CLS}-canvas`)[0];\n\n\t\tif(this.percentage < 0 || this.percentage > this.maxPercentage) {\n\t\t\tthis.percentage = 0;\n\t\t\tconsole.error(`${NS}::Error`, 'Please supply a valid range between 0–100');\n\t\t}\n\n\t\tthis.drawCanvas();\n\t}\n\n\tdrawCanvas() {\n\t\tthis.canvas.width = this.canvas.getBoundingClientRect().width;\n\t\tthis.canvas.height = this.canvas.width;\n\n\t\tthis.lineWidth = 4;\n\t\tthis.context = this.canvas.getContext('2d');\n\t\tthis.centerX = this.canvas.width / 2;\n\t\tthis.centerY = this.canvas.height / 2;\n\t\tthis.radius = (this.canvas.width - this.lineWidth) / 2;\n\n\t\tif(this.radius < 0) {\n\t\t\tthis.radius = 0;\n\t\t}\n\n\t\tthis.renderArc(this.percentage);\n\t}\n\n\trenderArc(percentage) {\n\t\tlet ctx = this.context;\n\t\tlet circleStart = 1.5 * Math.PI;\n\t\tlet circleEnd = circleStart + ((percentage / 100) * Math.PI * 2);\n\n\t\tctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\n\t\tctx.beginPath();\n\t\tctx.arc(this.centerX, this.centerY, this.radius, circleStart, 4 * Math.PI, false);\n\t\tctx.lineWidth = this.lineWidth;\n\t\tctx.strokeStyle = this.plainColor;\n\t\tctx.stroke();\n\n\t\tif(percentage > 0) {\n\t\t\tctx.beginPath();\n\t\t\tctx.arc(this.centerX, this.centerY, this.radius, circleStart, circleEnd, false);\n\t\t\tctx.lineWidth = this.lineWidth;\n\t\t\tctx.lineCap = 'butt';\n\t\t\tctx.strokeStyle = this.highlightColor;\n\t\t\tctx.fillStyle = this.highlightColor;\n\t\t\tctx.stroke();\n\t\t}\n\t}\n}\n"],"sourceRoot":""}