{"version":3,"sources":["webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/ArcPieChart.vue?9c05","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/ArcPieChart.vue?2685","webpack:///src/apps/dashboard/BaoWidgetsBaseComponents/ArcPieChart.vue","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/ArcPieChart.vue?9088","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/ArcPieChart.vue"],"names":["render","_vm","this","_c","_self","staticClass","attrs","widget","id","previewMode","_v","_s","computedValue","total","chartData","label","staticRenderFns","name","props","type","Object","default","Boolean","computedTotal","animationInterval","intersectionObserver","chartAnimatedFlag","outerArc","watch","animateChart","initiateIntersectionObserver","computed","parseInt","value","color","methods","options","threshold","callback","entries","isIntersecting","IntersectionObserver","document","getElementById","observe","computationType","chartValue","valueDifference","Math","abs","totalTimer","interval","setInterval","clearInterval","deg","style","background","component"],"mappings":"+GAAA,W,yCCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,yCAAyC,CAACF,EAAG,MAAM,CAACE,YAAY,YAAYC,MAAM,CAAC,GAAK,aAAaL,EAAIM,OAAOC,MAAMP,EAAIQ,gBAAgB,CAACN,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,OAAO,CAACE,YAAY,oBAAoBC,MAAM,CAAC,GAAK,mBAAmB,CAACL,EAAIS,GAAG,IAAIT,EAAIU,GAAGV,EAAIW,eAAe,QAAQT,EAAG,OAAO,CAACE,YAAY,qBAAqB,CAACJ,EAAIS,GAAG,IAAIT,EAAIU,GAAGV,EAAIY,OAAO,WAAWV,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACJ,EAAIS,GAAGT,EAAIU,GAAGV,EAAIa,UAAUC,aAEthBC,EAAkB,GCwBP,GACbC,KAAM,cACNC,MAAO,CACLJ,UAAW,CACTK,KAAMC,OACNC,QAAS,QAEXd,OAAQ,CACNY,KAAMC,OACNC,QAAS,QAEXZ,YAAa,CACXU,KAAMG,QACND,SAAS,IAGb,OACE,MAAO,CACLT,cAAe,EACfW,cAAe,EACfC,kBAAmB,KACnBC,qBAAsB,KACtBC,mBAAmB,EACnBC,SAAU,OAGdC,MAAO,CACL,YACE1B,KAAK2B,iBAGT,UACE3B,KAAKqB,cAAgBrB,KAAKW,MAC1BX,KAAK4B,gCAEPC,SAAU,CACR,QACE,OAAOC,SAAS9B,KAAKY,UAAUD,QAEjC,aACE,OAAOmB,SAAS9B,KAAKY,UAAUmB,QAEjC,QACE,OAAO/B,KAAKY,UAAUoB,MAAQhC,KAAKY,UAAUoB,MAAQ,YAGzDC,QAAS,CACP,+BACE,MAAMC,EAAU,CACdC,UAAW,KAEPC,EAAYC,KACkB,IAA9BA,EAAQ,GAAGC,iBACRtC,KAAKwB,mBACRxB,KAAK2B,eAEP3B,KAAKwB,mBAAoB,IAG7BxB,KAAKuB,qBAAuB,IAAIgB,qBAAqBH,EAAUF,GAC/DlC,KAAKyB,SAAWe,SAASC,eAAe,aAAazC,KAAKK,OAAOC,MAAMN,KAAKO,eAC5EP,KAAKuB,qBAAqBmB,QAAQ1C,KAAKyB,WAEzC,eACE,MAAMkB,EAAkB3C,KAAKU,cAAgBV,KAAK4C,WAAa,YAAc,YACvEC,EAAkBC,KAAKC,IAAI/C,KAAKU,cAAgBV,KAAK4C,YACrDI,EAAa,IACnB,IAAIC,EAAWD,EAAaH,EAG5B,GAFAI,EAAWA,EAAW,GAAK,GAAKA,EAE3BjD,KAAKU,gBAAkBV,KAAK4C,YAAgB5C,KAAKqB,gBAAkBrB,KAAKW,MAI3E,OAFAX,KAAKU,cAAgB,OACrBV,KAAK2B,eAIP3B,KAAKsB,kBAAoB4B,YAAY,KACnC,GAAIlD,KAAKU,gBAAkBV,KAAK4C,WAAYO,cAAcnD,KAAKsB,uBAC1D,CACiB,cAApBqB,EAAkC3C,KAAKU,gBAAkBV,KAAKU,gBAC9D,MAAM0C,EAAMpD,KAAKU,cAAgBV,KAAKW,MAAQ,IAC9CX,KAAKyB,SAAS4B,MAAMC,WAAa,kBAAkBtD,KAAKgC,SAASoB,wBAElEH,GAEHjD,KAAKqB,cAAgBrB,KAAKW,SChH4O,I,wBCQxQ4C,EAAY,eACd,EACAzD,EACAgB,GACA,EACA,KACA,WACA,MAIa,aAAAyC,E","file":"js/ArcPieChart.c7f8f075.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./ArcPieChart.vue?vue&type=style&index=0&id=d7f55224&prod&scoped=true&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"d-flex flex-column align-items-center\"},[_c('div',{staticClass:\"outer-arc\",attrs:{\"id\":`outer-arc-${_vm.widget.id}-${_vm.previewMode}`}},[_c('div',{staticClass:\"inner-text\"},[_c('span',{staticClass:\"inner-text__value\",attrs:{\"id\":\"progress-value\"}},[_vm._v(\" \"+_vm._s(_vm.computedValue)+\"/ \")]),_c('span',{staticClass:\"inner-text__total\"},[_vm._v(\" \"+_vm._s(_vm.total)+\" \")])])]),_c('div',{staticClass:\"arc-text pt-2\"},[_vm._v(_vm._s(_vm.chartData.label))])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div\n      class=\"outer-arc\"\n      :id=\"`outer-arc-${widget.id}-${previewMode}`\"\n    >\n      <div class=\"inner-text\">\n        <span\n          class=\"inner-text__value\"\n          id=\"progress-value\"\n        >\n          {{ computedValue }}/\n        </span>\n        <span\n          class=\"inner-text__total\"\n        >\n          {{ total }}\n        </span>\n      </div>\n    </div>\n\n    <div class=\"arc-text pt-2\">{{chartData.label}}</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"ArcPieChart\",\n  props: {\n    chartData: {\n      type: Object,\n      default: () => {}\n    },\n    widget: {\n      type: Object,\n      default: () => {}\n    },\n    previewMode: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data () {\n    return {\n      computedValue: 0,\n      computedTotal: 0,\n      animationInterval: null,\n      intersectionObserver: null,\n      chartAnimatedFlag: false,\n      outerArc: null\n    }\n  },\n  watch: {\n    chartData () {\n      this.animateChart()\n    }\n  },\n  mounted () {\n    this.computedTotal = this.total\n    this.initiateIntersectionObserver()\n  },\n  computed: {\n    total () {\n      return parseInt(this.chartData.total)\n    },\n    chartValue () {\n      return parseInt(this.chartData.value)\n    },\n    color () {\n      return this.chartData.color ? this.chartData.color : \"#FF5632\"\n    }\n  },\n  methods: {\n    initiateIntersectionObserver () {\n      const options = {\n        threshold: 0.25\n      }\n      const callback = (entries) => {\n        if (entries[0].isIntersecting === true) {\n          if (!this.chartAnimatedFlag) {\n            this.animateChart()\n          }\n          this.chartAnimatedFlag = true\n        }\n      }\n      this.intersectionObserver = new IntersectionObserver(callback, options)\n      this.outerArc = document.getElementById(`outer-arc-${this.widget.id}-${this.previewMode}`)\n      this.intersectionObserver.observe(this.outerArc)\n    },\n    animateChart () {\n      const computationType = this.computedValue < this.chartValue ? \"increment\" : \"reduction\"\n      const valueDifference = Math.abs(this.computedValue - this.chartValue)\n      const totalTimer = 1000\n      let interval = totalTimer / valueDifference\n      interval = interval > 50 ? 50 : interval\n\n      if ((this.computedValue === this.chartValue) && (this.computedTotal !== this.total)) {\n        // This is to handle a case where the user changes the target value; the chart is reset\n        this.computedValue = 0\n        this.animateChart()\n        return\n      }\n\n      this.animationInterval = setInterval(() => {\n        if (this.computedValue === this.chartValue) clearInterval(this.animationInterval)\n        else {\n          computationType === \"increment\" ? this.computedValue++ : this.computedValue--\n          const deg = this.computedValue / this.total * 360\n          this.outerArc.style.background = `conic-gradient(${this.color} ${deg}deg, #efefef 0deg)`\n        }\n      }, interval)\n\n      this.computedTotal = this.total\n    }\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n\n.outer-arc {\n  width: 180px;\n  height: 180px;\n  position: relative;\n  border-radius: 50%;\n  background: conic-gradient(#C5805D 0deg, $grey 0deg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    background-color: $white;\n    border-radius: 50%;\n    height: 150px;\n    width: 150px;\n  }\n\n  .inner-text {\n    position: relative;\n    display: flex;\n    align-items: baseline;\n    &__value {\n      color: $slate;\n      font-weight: bold;\n      font-size: 36px;\n    }\n    &__total {\n      color: $slate80;\n      font-size: 20px;\n    }\n  }\n}\n\n.arc-text{\n  text-align: center;\n  color: $slate60;\n  font-size: 14px;\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./ArcPieChart.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./ArcPieChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ArcPieChart.vue?vue&type=template&id=d7f55224&scoped=true&\"\nimport script from \"./ArcPieChart.vue?vue&type=script&lang=js&\"\nexport * from \"./ArcPieChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ArcPieChart.vue?vue&type=style&index=0&id=d7f55224&prod&scoped=true&lang=scss&\"\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  \"d7f55224\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}