{"version":3,"sources":["webpack:///./src/views/Components/PaymentPlan/PaymentPlanChart.vue","webpack:///src/views/Components/PaymentPlan/PaymentPlanChart.vue","webpack:///./src/views/Components/PaymentPlan/PaymentPlanChart.vue?2043","webpack:///./src/views/Components/PaymentPlan/PaymentPlanChart.vue?1713"],"names":["render","_vm","this","_self","_c","_m","staticRenderFns","staticStyle","attrs","name","props","paymentPlan","data","options","plugins","tooltip","enabled","hover","mode","cutout","responsive","maintainAspectRatio","watch","handler","val","chart","fillData","update","deep","mounted","self","ctx","document","getElementById","getContext","Chart","type","id","beforeDraw","a","b","width","height","restore","fontSize","toFixed","font","status","fillStyle","textBaseline","text","currentCycle","cycleCount","textX","Math","round","measureText","textY","fillText","save","beforeDestroy","destroy","methods","_this","chartData","chartColor","paymentPlanDetails","forEach","e","isDownPayment","push","processedToLedger","datasets","circumference","backgroundColor","component"],"mappings":"sJAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAQD,EAAIE,MAAMC,GAAG,OAAOH,EAAII,GAAG,IAEtEC,EAAkB,CAAC,WAAY,IAAIL,EAAIC,KAAKE,EAAGH,EAAIE,MAAMC,GAAG,OAAOA,EAAG,MAAM,CAACG,YAAY,CAAC,SAAW,WAAW,OAAS,OAAO,MAAQ,SAAS,CAACH,EAAG,SAAS,CAACI,MAAM,CAAC,GAAK,kB,wBCOhK,GACfC,KAAA,oBAEAC,MAAA,CAAAC,YAAA,MACAC,KAAA,WACA,OACAC,QAAA,CACAC,QAAA,CACAC,QAAA,CAAAC,SAAA,IAEAC,MAAA,CAAAC,KAAA,MACAC,OAAA,GAEAC,YAAA,EACAC,qBAAA,KAIAC,MAAA,CACAX,YAAA,CACAY,QAAA,SAAAC,GACA,KAAAC,MAAAb,KAAA,KAAAc,WACA,KAAAD,MAAAE,UAEAC,MAAA,IAGAC,QAAA,WACA,IAAAC,EAAA,KACAC,EAAAC,SAAAC,eAAA,YAAAC,WAAA,MACA,KAAAT,MAAA,IAAAU,OAAAJ,EAAA,CACAK,KAAA,WACAxB,KAAA,KAAAc,WACAb,QAAA,KAAAA,QACAC,QAAA,CACA,CACAuB,GAAA,OACAC,WAAA,SAAAb,EAAAc,EAAAC,GACA,GAAAV,EAAAnB,YAAA,CACA,IAAA8B,EAAAhB,EAAAgB,MACAC,EAAAjB,EAAAiB,OACAX,EAAAN,EAAAM,IAEAA,EAAAY,UACA,IAAAC,GAAAF,EAAA,KAAAG,QAAA,GACAd,EAAAe,KAAAF,EAAA,0BAEA,YAAAd,EAAAnB,YAAAoC,OACAhB,EAAAiB,UAAA,UACA,YAAAlB,EAAAnB,YAAAoC,OACAhB,EAAAiB,UAAA,UACA,UAAAlB,EAAAnB,YAAAoC,SACAhB,EAAAiB,UAAA,WAEAjB,EAAAkB,aAAA,SAEA,IAAAC,EACApB,EAAAnB,YAAAwC,aACA,OACArB,EAAAnB,YAAAyC,WAEAC,EAAAC,KAAAC,OAAAd,EAAAV,EAAAyB,YAAAN,GAAAT,OAAA,GACAgB,EAAAf,EAAA,IAEAX,EAAA2B,SAAAR,EAAAG,EAAAI,GACA1B,EAAA4B,cAOAC,cAAA,WACA,KAAAnC,OACA,KAAAA,MAAAoC,WAGAC,QAAA,CACApC,SAAA,eAAAqC,EAAA,KACAC,EAAA,GACAC,EAAA,GAeA,OAbA,KAAAtD,YAAAuD,mBAAAC,SAAA,SAAAC,GACAA,EAAAC,gBACAL,EAAAM,KAAA,GAEAF,EAAAG,mBAAA,YAAAR,EAAApD,YAAAoC,OACAkB,EAAAK,KAAA,WACAF,EAAAG,mBAAA,YAAAR,EAAApD,YAAAoC,OACAkB,EAAAK,KAAA,WACAF,EAAAG,mBAAA,UAAAR,EAAApD,YAAAoC,OACAkB,EAAAK,KAAA,WACAL,EAAAK,KAAA,eAGA,CACAE,SAAA,CACA,CACAC,cAAA,IACAC,gBAAAT,EACArD,KAAAoD,QC7GuX,I,YCOnXW,EAAY,eACd,EACA3E,EACAM,GACA,EACA,KACA,KACA,MAIa,aAAAqE,E","file":"js/Components-PaymentPlan-PaymentPlanChart-vue.b4ab5ca5.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _vm._m(0)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticStyle:{\"position\":\"relative\",\"height\":\"90px\",\"width\":\"100%\"}},[_c('canvas',{attrs:{\"id\":\"myChart3\"}})])\n}]\n\nexport { render, staticRenderFns }","<template>\n  <div style=\"position: relative;height:90px;width:100%;\">\n    <canvas id=\"myChart3\"></canvas>\n  </div>\n</template>\n\n<script>\nimport Chart from \"chart.js/auto\";\n\nexport default {\n  name: \"paymentplan-chart\",\n\n  props: { paymentPlan: null },\n  data() {\n    return {\n      options: {\n        plugins: {\n          tooltip: { enabled: false },\n        },\n        hover: { mode: null },\n        cutout: 75,\n\n        responsive: true,\n        maintainAspectRatio: true,\n      },\n    };\n  },\n  watch: {\n    paymentPlan: {\n      handler(val) {\n        this.chart.data = this.fillData();\n        this.chart.update();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    var self = this;\n    const ctx = document.getElementById(\"myChart3\").getContext(\"2d\");\n    this.chart = new Chart(ctx, {\n      type: \"doughnut\",\n      data: this.fillData(),\n      options: this.options,\n      plugins: [\n        {\n          id: \"text\",\n          beforeDraw: function(chart, a, b) {\n            if (self.paymentPlan) {\n              var width = chart.width,\n                height = chart.height,\n                ctx = chart.ctx;\n\n              ctx.restore();\n              var fontSize = (height / 240).toFixed(2);\n              ctx.font = fontSize + \"em 'SF Pro', sans-serif\";\n\n              if (self.paymentPlan.status == \"COMPLETE\")\n                ctx.fillStyle = \"#59a5d8\";\n              else if (self.paymentPlan.status == \"INACTIVE\")\n                ctx.fillStyle = \"#adb5bd\";\n              else if (self.paymentPlan.status == \"ACTIVE\")\n                ctx.fillStyle = \"#2dce89\";\n\n              ctx.textBaseline = \"middle\";\n\n              var text =\n                self.paymentPlan.currentCycle +\n                \" of \" +\n                self.paymentPlan.cycleCount;\n\n              let textX = Math.round((width - ctx.measureText(text).width) / 2);\n              let textY = height / 2 + 8;\n\n              ctx.fillText(text, textX, textY);\n              ctx.save();\n            }\n          },\n        },\n      ],\n    });\n  },\n  beforeDestroy() {\n    if (this.chart) {\n      this.chart.destroy();\n    }\n  },\n  methods: {\n    fillData() {\n      let chartData = [];\n      let chartColor = [];\n\n      this.paymentPlan.paymentPlanDetails.forEach((e) => {\n        if (!e.isDownPayment) {\n          chartData.push(1);\n\n          if (e.processedToLedger && this.paymentPlan.status == \"COMPLETE\")\n            chartColor.push(\"#59a5d8\");\n          else if (e.processedToLedger && this.paymentPlan.status == \"INACTIVE\")\n            chartColor.push(\"#adb5bd\");\n          else if (e.processedToLedger && this.paymentPlan.status == \"ACTIVE\")\n            chartColor.push(\"#2dce89\");\n          else chartColor.push(\"#f6f9fc\");\n        }\n      });\n      return {\n        datasets: [\n          {\n            circumference: 360,\n            backgroundColor: chartColor,\n            data: chartData,\n          },\n        ],\n      };\n    },\n  },\n};\n</script>\n\n<style></style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentPlanChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentPlanChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PaymentPlanChart.vue?vue&type=template&id=62aeadce\"\nimport script from \"./PaymentPlanChart.vue?vue&type=script&lang=js\"\nexport * from \"./PaymentPlanChart.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}