{"version":3,"sources":["webpack:///./src/assets/styles/views/Framework.css?fd51","webpack:///./src/components/Chart/TimeDoughnutChart.vue","webpack:///src/components/Chart/TimeDoughnutChart.vue","webpack:///./src/components/Chart/TimeDoughnutChart.vue?a661","webpack:///./src/components/Chart/TimeDoughnutChart.vue?5b2d","webpack:///./src/views/Framework.vue","webpack:///src/views/Framework.vue","webpack:///./src/views/Framework.vue?0063","webpack:///./src/views/Framework.vue?e2fe","webpack:///./src/components/Chart/AimDoughnutChart.vue","webpack:///src/components/Chart/AimDoughnutChart.vue","webpack:///./src/components/Chart/AimDoughnutChart.vue?1155","webpack:///./src/components/Chart/AimDoughnutChart.vue?890b","webpack:///./src/components/Chart/FrameworkDoughnutChart.vue","webpack:///src/components/Chart/FrameworkDoughnutChart.vue","webpack:///./src/components/Chart/FrameworkDoughnutChart.vue?95bf","webpack:///./src/components/Chart/FrameworkDoughnutChart.vue?7b14","webpack:///./src/assets/FrameworkBtn.svg","webpack:///./src/assets/BackArrow.svg"],"names":["render","_vm","this","_self","_c","_m","staticRenderFns","attrs","props","doughnutChartData","type","Object","mounted","min","max","percentage","totalYear","setInterval","drawCircle","methods","endpoint","canvas","document","getElementById","centerX","width","centerY","height","ctx","getContext","clearRect","font","fillStyle","color","fillText","title","subtitle1","subtitle2","insideText","beginPath","lineWidth","strokeStyle","lineCap","arc","Math","PI","stroke","fill","fraction","watch","handler","val","box","deep","component","on","$event","$router","go","staticClass","require","_v","doughnutChartData1","doughnutChartData2","moneyTypes","_s","totalTenants","growthRate","achievedDoughnutChartData","yearOptions","model","value","selectedYear","callback","$$v","expression","aimDoughnutChartData","components","AimDoughnutChart","TimeDoughnutChart","FrameworkDoughnutChart","data","info1","info2","cssId","subtitle2Position","subtitle3","canvasId","firstlinebold","firstlinelight","firstlinePosition","secondlinebold","secondlinelight","secondlinePostiion","thirdlinebold","thirdlinelight","thirdlinePostiion","percentageForChart","percentageTextPostiion","insideTextPostiion","showNavBar","setYearSelectBox","navbar","style","display","required","year","Number","initDraw","endpoint1","endpoint2","endpoint3","renderComponent","fillCircles","radius","$nextTick","module","exports"],"mappings":"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","file":"js/chunk-7a92650e.3db64388.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!./Framework.css?vue&type=style&index=0&prod&lang=css&external\"","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',[_c('canvas',{attrs:{\"id\":\"box2\",\"width\":\"114\",\"height\":\"114\"}})])\n}]\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <canvas id=\"box2\" width=\"114\" height=\"114\"></canvas>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    doughnutChartData: {\n      type: Object\n    }\n  },\n  mounted () {\n    let min = 0\n    let max = this.doughnutChartData.percentage / this.doughnutChartData.totalYear * 100\n    setInterval(() => {\n      if (min <= max) {\n        min += 0.3\n        this.drawCircle(min)\n      }\n    }, 0.01)\n  },\n  // data () {\n  //   return {\n  //   }\n  // },\n  methods: {\n    drawCircle (endpoint) {\n      const canvas = document.getElementById('box2')\n      const centerX = canvas.width / 1.65\n      const centerY = canvas.height / 1.6\n      const ctx = canvas.getContext('2d')\n      ctx.clearRect(0, 0, canvas.width, canvas.height)\n      // Chart text\n      ctx.font = '16.2px Helvetica'\n      ctx.fillStyle = `${this.doughnutChartData.color}`\n      ctx.fillText(this.doughnutChartData.title, 0, 15)\n      ctx.font = '300 12px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText('in ' + this.doughnutChartData.subtitle1, 0, 36.2, 60)\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.subtitle2, 0, 49.2, 60)\n      ctx.font = '20px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(`${this.doughnutChartData.percentage}`, 60, 68, 60)\n      ctx.font = '300 12px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.insideText, 42, 88, 60)\n      // background\n      ctx.beginPath()\n      ctx.lineWidth = 8\n      ctx.strokeStyle = '#D8D8D8'\n      ctx.lineCap = 'round'\n      ctx.arc(centerX, centerY, 38, 1.5 * Math.PI, 1 / 100 * 100 * Math.PI, false)\n      ctx.stroke()\n      ctx.fillStyle = 'rgb(255, 255, 255, 0)'\n      ctx.fill()\n      // color\n      ctx.beginPath()\n      ctx.lineWidth = 8\n      ctx.strokeStyle = `${this.doughnutChartData.color}`\n      ctx.lineCap = 'round'\n      const fraction = endpoint / 100\n      ctx.arc(centerX, centerY, 38, 1.5 * Math.PI, (1.0 + fraction) * 1.5 * Math.PI, false)\n      ctx.stroke()\n      ctx.fillStyle = 'rgb(255, 255, 255, 0)'\n      ctx.fill()\n    }\n  },\n  watch: {\n    doughnutChartData: {\n      handler: function (val) {\n        this.drawCircle(\n          val.box,\n          val.title,\n          val.subtitle1,\n          val.subtitle2,\n          val.percentage,\n          val.insideText,\n          val.color)\n      },\n      deep: true\n    }\n  }\n}\n</script>\n\n<style>\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TimeDoughnutChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TimeDoughnutChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./TimeDoughnutChart.vue?vue&type=template&id=ed73323c\"\nimport script from \"./TimeDoughnutChart.vue?vue&type=script&lang=js\"\nexport * from \"./TimeDoughnutChart.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","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('main',{attrs:{\"id\":\"framework\"}},[_c('section',{attrs:{\"id\":\"page-title\"}},[_c('a',{on:{\"click\":function($event){return _vm.$router.go(-1)}}},[_c('img',{staticClass:\"framework-btn\",attrs:{\"src\":require(\"../assets/FrameworkBtn.svg\")}})]),_c('row',[_c('column',{staticClass:\"page-title\",attrs:{\"lg\":8}},[_c('div',{staticClass:\"back\",attrs:{\"align\":\"left\"}},[_c('a',{staticClass:\"btn\",on:{\"click\":function($event){return _vm.$router.go(-1)}}},[_c('div',[_c('img',{attrs:{\"src\":require(\"../../src/assets/BackArrow.svg\"),\"alt\":\"back-arrow\"}}),_vm._v(\" Back\")])])]),_c('h1',{staticClass:\"title\"},[_vm._v(\"Policy in practice - Low income households’ savings\")])]),_c('column',{staticClass:\"progress-summary\",attrs:{\"lg\":4}},[_c('div',{staticClass:\"doughnut-1\"},[_c('aim-doughnut-chart',{attrs:{\"doughnutChartData\":_vm.doughnutChartData1}})],1),_c('div',{staticClass:\"doughnut-2\"},[_c('time-doughnut-chart',{attrs:{\"doughnutChartData\":_vm.doughnutChartData2}})],1)])],1)],1),_c('section',{staticClass:\"framework-select-area\"},[_c('row',{attrs:{\"gutter\":12}},[_c('column',{attrs:{\"lg\":1}},[_c('h3',{staticClass:\"framework-select-country\"},[_vm._v(\"Select type\")])]),_c('column',{staticClass:\"framework-select-box\",attrs:{\"lg\":2.5}},[_c('v-select',{attrs:{\"options\":_vm.moneyTypes,\"placeholder\":\"Show all\",\"searchable\":false}})],1)],1)],1),_c('section',{staticClass:\"chart-title-area\",attrs:{\"gutter\":12}},[_c('row',{staticClass:\"chart-title\"},[_c('column',{attrs:{\"lg\":8,\"xs\":6}},[_c('h2',{staticClass:\"framework-sub-title\"},[_vm._v(\"Low income households’ savings - across funds\")])]),_c('column',{staticClass:\"chart-summary\",attrs:{\"lg\":4,\"xs\":6}},[_c('div',{staticClass:\"total-money\"},[_c('span',[_c('h1',[_vm._v(\"£\"+_vm._s(_vm.totalTenants)+\" saved\")])]),_vm._v(\" \"),_c('h3',{staticClass:\"source-sans-font\"},[_vm._v(\"by Resonance’s tenants\")])]),_c('div',{staticClass:\"growth-rate\"},[_c('h1',[_vm._v(_vm._s(_vm.growthRate))]),_vm._v(\" \"),_c('h3',{staticClass:\"source-sans-font\"},[_vm._v(\"in 2020\")])])])],1)],1),_c('section',{attrs:{\"id\":\"chart-area\"}},[_c('row',{staticClass:\"chart-main\",attrs:{\"gutter\":12}},[_c('column',{staticClass:\"douhnut-chart-area\",attrs:{\"lg\":6}},[_c('h2',[_vm._v(\"Achieved - £10,000 saved by Resonance tenants\")]),_c('framework-doughnut-chart',{attrs:{\"doughnutChartData\":_vm.achievedDoughnutChartData}}),_c('column',{staticClass:\"year-select-box\",attrs:{\"lg\":4,\"xs\":12}},[_vm._v(\"in \"),_c('v-select',{staticClass:\"select-year\",attrs:{\"options\":_vm.yearOptions,\"placeholder\":\"Show all\",\"searchable\":false},model:{value:(_vm.selectedYear),callback:function ($$v) {_vm.selectedYear=$$v},expression:\"selectedYear\"}})],1)],1),_c('column',{staticClass:\"douhnut-chart-area\",attrs:{\"lg\":6}},[_c('h2',[_vm._v(\"Aim - £60,000 savings aim by Resonance tenants\")]),_c('framework-doughnut-chart',{attrs:{\"doughnutChartData\":_vm.aimDoughnutChartData}}),_c('column',{staticClass:\"year-select-box\",attrs:{\"lg\":4,\"xs\":12}},[_vm._v(\"in \"),_c('v-select',{staticClass:\"select-year\",attrs:{\"options\":_vm.yearOptions,\"placeholder\":\"Show all\",\"searchable\":false},model:{value:(_vm.selectedYear),callback:function ($$v) {_vm.selectedYear=$$v},expression:\"selectedYear\"}})],1)],1)],1)],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <main id=\"framework\">\n    <section id=\"page-title\">\n      <a @click=\"$router.go(-1)\"><img src=\"../assets/FrameworkBtn.svg\" class=\"framework-btn\"></a>\n      <row>\n        <column :lg=\"8\" class=\"page-title\">\n          <div align=\"left\" class=\"back\">\n            <a @click=\"$router.go(-1)\" class=\"btn\">\n              <div><img src=\"../../src/assets/BackArrow.svg\" alt=\"back-arrow\"/> Back</div>\n            </a>\n          </div>\n\n           <!-- <div\n                classhref=\"#\"\n                tabindex=\"0\"\n                class=\"popover-style\"\n              >\n                <Bpopover1 :info=\"info1\" idPopover=\"pb1\" />\n              </div> -->\n\n          <h1 class=\"title\">Policy in practice - Low income households’ savings</h1>\n        </column>\n        <column :lg=\"4\" class=\"progress-summary\">\n\n        <!-- <div\n              classhref=\"#\"\n              tabindex=\"0\"\n              title=\"\"\n              class=\"popover-style\"\n              style=\"position: absolute; right: 5px !important; top: -14px\"\n            >\n              <Bpopover2 :info=\"info2\" idPopover=\"2PB\" id=\"2pbC\" />\n            </div> -->\n\n\n        \n          <div class=\"doughnut-1\"><aim-doughnut-chart :doughnutChartData=\"doughnutChartData1\"></aim-doughnut-chart></div>\n          <div class=\"doughnut-2\"><time-doughnut-chart :doughnutChartData=\"doughnutChartData2\"></time-doughnut-chart></div>\n        </column>\n      </row>\n    </section>\n    <section class=\"framework-select-area\">\n      <row :gutter=\"12\" >\n        <column :lg=\"1\"><h3 class=\"framework-select-country\">Select type</h3></column>\n        <column :lg=\"2.5\" class=\"framework-select-box\">\n          <v-select :options=\"moneyTypes\" placeholder=\"Show all\" :searchable=\"false\">\n          </v-select>\n        </column>\n      </row>\n    </section>\n    <section :gutter=\"12\" class=\"chart-title-area\">\n      <row class=\"chart-title\">\n        <column :lg=\"8\" :xs=\"6\"><h2 class=\"framework-sub-title\">Low income households’ savings - across funds</h2></column>\n        <column class=\"chart-summary\" :lg=\"4\" :xs=\"6\">\n          <div class=\"total-money\"> <span><h1>£{{ totalTenants }} saved</h1></span> <h3 class=\"source-sans-font\">by Resonance’s tenants</h3></div>\n          <div class=\"growth-rate\"> <h1>{{growthRate}}</h1> <h3 class=\"source-sans-font\">in 2020</h3></div>\n        </column>\n      </row>\n    </section>\n    <section id=\"chart-area\">\n      <row :gutter=\"12\" class=\"chart-main\">\n        <column :lg=\"6\" class=\"douhnut-chart-area\">\n        <h2>Achieved - £10,000 saved by Resonance tenants</h2>\n          <framework-doughnut-chart :doughnutChartData=\"achievedDoughnutChartData\"></framework-doughnut-chart>\n          <column :lg=\"4\" :xs=\"12\" class=\"year-select-box\" >in <v-select :options=\"yearOptions\" v-model=\"selectedYear\" class=\"select-year\" placeholder=\"Show all\" :searchable=\"false\"></v-select></column>\n        </column>\n        <column :lg=\"6\" class=\"douhnut-chart-area\">\n        <h2>Aim - £60,000 savings aim by Resonance tenants</h2>\n          <framework-doughnut-chart :doughnutChartData=\"aimDoughnutChartData\"></framework-doughnut-chart>\n          <column :lg=\"4\" :xs=\"12\" class=\"year-select-box\" >in <v-select :options=\"yearOptions\" v-model=\"selectedYear\" class=\"select-year\" placeholder=\"Show all\" :searchable=\"false\"></v-select></column>\n        </column>\n      </row>\n    </section>\n  </main>\n</template>\n\n<script>\nimport AimDoughnutChart from '../components/Chart/AimDoughnutChart.vue'\nimport TimeDoughnutChart from '../components/Chart/TimeDoughnutChart.vue'\nimport FrameworkDoughnutChart from '../components/Chart/FrameworkDoughnutChart'\nimport { setYearSelectBox } from '../data/data-provider.js'\n// import Bpopover1 from \"../components/B-popover.vue\";\n// import Bpopover2 from \"../components/B-popover.vue\";\n\n\n\nexport default {\n  components: {\n    AimDoughnutChart,\n    TimeDoughnutChart,\n    //  Bpopover1,\n    //  Bpopover2,\n    FrameworkDoughnutChart\n  },\n  data () {\n    return {\n      selectedYear: 2020,\n        info1: `In this demo project the social enterprise offers digital education to students in refugee camps in 6 african countries. Measuring the programme’s success against SDG 4 -Quality Education- we present how many refugee students were helped into school, out of the total number of refugee children out of school, worldwide. `,\n\n        info2: `If you run more than one programmes as \n              a fund, foundation, charity or sustainable \n              corporation, you can navigate through the \n              dashboards of each programme, from this \n              drop down selection.`,\n\n      doughnutChartData1: {\n        cssId: 'box1',\n        title: 'Aim',\n        subtitle1: '£50K',\n        subtitle2: '/year',\n        subtitle2Position: [36, 36.2, 40],\n        subtitle3: 'by Resonance',\n        percentage: '20',\n        insideText: 'complete',\n        color: '#8954BA'\n      },\n      doughnutChartData2: {\n        box: 'box2',\n        title: 'Time',\n        subtitle1: '8 years',\n        subtitle2: '',\n        percentage: '5',\n        insideText: 'more year',\n        color: '#0091FF',\n        totalYear: 8\n      },\n      achievedDoughnutChartData: {\n        canvasId:'achieved',\n        firstlinebold: '£60K',\n        firstlinelight: 'saved by UK households',\n        firstlinePosition: [6, 11, 500, 45, 11, 500],\n        secondlinebold: '£10K',\n        secondlinelight: 'saved by Resonance tenants',\n        secondlinePostiion: [7, 43, 500, 45, 43, 500],\n        thirdlinebold: '£4K',\n        thirdlinelight: 'spent by Resonance tenants',\n        thirdlinePostiion: [15, 75, 500, 45, 75, 500],\n        percentageForChart: [90, 20, 10], // out / middle / inside\n        percentage: '16',\n        percentageTextPostiion: [180, 160, 500],\n        insideText: 'contribution',\n        insideTextPostiion: [200, 190, 100],\n        centerX: 250,\n        centerY: 163.5\n      }, \n      aimDoughnutChartData: {\n        canvasId:'aim',\n        firstlinebold: '£200K',\n        firstlinelight: 'savings aim by UK households',\n        firstlinePosition: [2, 11, 500, 50, 11, 500],\n        secondlinebold: '£60K',\n        secondlinelight: 'savings aim by Resonance tenants',\n        secondlinePostiion: [10, 43, 500, 50, 43, 500],\n        thirdlinebold: '£34K',\n        thirdlinelight: 'spending aim by Resonance tenants',\n        thirdlinePostiion: [10, 75, 500, 50, 75, 500],\n        percentageForChart: [60, 30, 40], // out / middle / inside\n        percentage: '30',\n        percentageTextPostiion: [250, 160, 500],        \n        insideText: 'contribution',\n        insideTextPostiion: [255, 190, 100],\n        centerX: 291.66,\n        centerY: 163.5\n      },            \n      yearOptions: [],\n      moneyTypes: [\n        'Money offered to tenants',\n        'Money saved by tenants',\n        'Money spent by tenants'\n      ],\n      totalTenants: '10,000',\n      growthRate: '+56%'\n    }\n  },\n  mounted () {\n    this.showNavBar()\n    this.yearOptions = setYearSelectBox() // Set initial Year select box options\n  },\n  methods: {\n    showNavBar () {\n      const navbar = document.getElementById('nav')\n      navbar.style.display = 'inline'\n    }\n  }\n}\n</script>\n\n<style src=\"@/assets/styles/views/Framework.css\"></style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Framework.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Framework.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Framework.vue?vue&type=template&id=5b913c80\"\nimport script from \"./Framework.vue?vue&type=script&lang=js\"\nexport * from \"./Framework.vue?vue&type=script&lang=js\"\nimport style0 from \"@/assets/styles/views/Framework.css?vue&type=style&index=0&prod&lang=css&external\"\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","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('canvas',{attrs:{\"id\":_vm.cssId,\"width\":\"133\",\"height\":\"114\"}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <canvas :id=\"cssId\" width=\"133\" height=\"114\"></canvas>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    doughnutChartData: {\n      type: Object,\n      required: true\n    }\n  },\n  mounted () {\n    let min = 0\n    let max = this.doughnutChartData.percentage\n    setInterval(() => {\n      if (min <= max) {\n        min += 0.3\n        this.drawCircle(min)\n      }\n    }, 0.01)\n  },\n  data () {\n    return {\n      cssId: this.doughnutChartData.cssId\n    }\n  },\n  methods: {\n    drawCircle (endpoint) {\n      const canvas = document.getElementById(`${this.doughnutChartData.cssId}`)\n      const centerX = canvas.width / 1.65\n      const centerY = canvas.height / 1.6\n      const ctx = canvas.getContext('2d')\n      \n      ctx.clearRect(0, 0, canvas.width, canvas.height)\n      // Chart text\n      ctx.font = '16.2px Helvetica'\n      ctx.fillStyle = `${this.doughnutChartData.color}`\n      ctx.fillText(this.doughnutChartData.title, 0, 15)\n      ctx.font = '300 12px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.subtitle1, 0, 36.2, 60)\n      ctx.font = '300 10px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.subtitle2, \n        // subtitle 2nd line position (x, y, maxwidth)\n        this.doughnutChartData.subtitle2Position[0],\n        this.doughnutChartData.subtitle2Position[1],\n        this.doughnutChartData.subtitle2Position[2])\n      ctx.font = '300 10px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.subtitle3, 0, 49.2, 80)\n      ctx.font = '20px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(`${this.doughnutChartData.percentage}%`, 60, 68, 60)\n      ctx.font = '300 12px Helvetica'\n      ctx.fillStyle = '#686868'\n      ctx.fillText(this.doughnutChartData.insideText, 55, 88, 60)\n      // background\n      ctx.beginPath()\n      ctx.lineWidth = 8\n      ctx.strokeStyle = '#D8D8D8'\n      ctx.lineCap = 'round'\n      ctx.arc(centerX, centerY, 38, 1.5 * Math.PI, 1 / 100 * 100 * Math.PI, false)\n      ctx.stroke()\n      ctx.fillStyle = 'rgb(255, 255, 255, 0)'\n      ctx.fill()\n      // color\n      ctx.beginPath()\n      ctx.lineWidth = 8\n      ctx.strokeStyle = `${this.doughnutChartData.color}`\n      ctx.lineCap = 'round'\n      const fraction = endpoint / 100\n      ctx.arc(centerX, centerY, 38, 1.5 * Math.PI, (1.0 + fraction) * 1.5 * Math.PI, false)\n      ctx.stroke()\n      ctx.fillStyle = 'rgb(255, 255, 255, 0)'\n      ctx.fill()\n    }\n  },\n  watch: {\n    doughnutChartData: {\n      handler: function (val) {\n        this.drawCircle(\n          val.cssId,\n          val.title,\n          val.subtitle1,\n          val.subtitle2,\n          val.subtitle2Position,\n          val.subtitle3,\n          val.percentage,\n          val.insideText,\n          val.color)\n      },\n      deep: true\n    }    \n  }\n}\n</script>\n\n<style>\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AimDoughnutChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AimDoughnutChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./AimDoughnutChart.vue?vue&type=template&id=6d35be6e\"\nimport script from \"./AimDoughnutChart.vue?vue&type=script&lang=js\"\nexport * from \"./AimDoughnutChart.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","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('canvas',{attrs:{\"id\":_vm.canvasId,\"width\":\"455\",\"height\":\"327\"}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <canvas :id=\"canvasId\" width=\"455\" height=\"327\"></canvas>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    doughnutChartData: {\n      type: Object,\n      required: true,\n    },\n    year: {\n      type: Number,\n      required: true,\n    },\n  },\n  mounted() {\n    this.initDraw();\n  },\n  data() {\n    return {\n      canvasId: this.doughnutChartData.canvasId,\n      centerX: this.doughnutChartData.centerX,\n      centerY: this.doughnutChartData.centerY,\n      width: 455,\n      height: 327,\n      endpoint1: 0,\n      endpoint2: 0,\n      endpoint3: 0,\n      renderComponent: true,\n    };\n  },\n  methods: {\n    drawCircle() {\n      const canvas = document.getElementById(`${this.doughnutChartData.canvasId}`);\n      const ctx = canvas.getContext(\"2d\");\n\n      ctx.clearRect(0, 0, this.width, this.height);\n      // Chart text\n      ctx.font = \"500 15px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.firstlinebold,\n        this.doughnutChartData.firstlinePosition[0],\n        this.doughnutChartData.firstlinePosition[1],\n        this.doughnutChartData.firstlinePosition[2]\n      );\n      ctx.font = \"300 14px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.firstlinelight,\n        this.doughnutChartData.firstlinePosition[3],\n        this.doughnutChartData.firstlinePosition[4],\n        this.doughnutChartData.firstlinePosition[5]\n      );\n      ctx.font = \"500 15px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.secondlinebold,\n        this.doughnutChartData.secondlinePostiion[0],\n        this.doughnutChartData.secondlinePostiion[1],\n        this.doughnutChartData.secondlinePostiion[2]\n      );\n      ctx.font = \"300 14px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.secondlinelight,\n        this.doughnutChartData.secondlinePostiion[3],\n        this.doughnutChartData.secondlinePostiion[4],\n        this.doughnutChartData.secondlinePostiion[5]\n      );\n      ctx.font = \"500 15px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.thirdlinebold,\n        this.doughnutChartData.thirdlinePostiion[0],\n        this.doughnutChartData.thirdlinePostiion[1],\n        this.doughnutChartData.thirdlinePostiion[2]\n      );\n      ctx.font = \"300 14px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.thirdlinelight,\n        this.doughnutChartData.thirdlinePostiion[3],\n        this.doughnutChartData.thirdlinePostiion[4],\n        this.doughnutChartData.thirdlinePostiion[5]\n      );\n      ctx.font = \"45px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        `${this.doughnutChartData.percentage}%`,\n        this.doughnutChartData.percentageTextPostiion[0],\n        this.doughnutChartData.percentageTextPostiion[1],\n        this.doughnutChartData.percentageTextPostiion[2]\n      );\n      ctx.font = \"300 15px Helvetica\";\n      ctx.fillStyle = \"#686868\";\n      ctx.fillText(\n        this.doughnutChartData.insideText,\n        this.doughnutChartData.insideTextPostiion[0],\n        this.doughnutChartData.insideTextPostiion[1],\n        this.doughnutChartData.insideTextPostiion[2]\n      );\n      // circle chart : 325 * 325\n      this.fillCircles(ctx, this.doughnutChartData.percentageForChart[0] + (this.year - 2001), 314, \"#FE8708\"); // out\n      this.fillCircles(ctx, this.doughnutChartData.percentageForChart[1] + (this.year - 2001), 250, \"#2FB9EF\"); // middle\n      this.fillCircles(ctx, this.doughnutChartData.percentageForChart[2] + (this.year - 2001), 186, \"#EA4C89\"); // inside\n    },\n    fillCircles(ctx, endpoint, radius, color) {\n      // background\n      ctx.beginPath();\n      ctx.lineWidth = 12;\n      ctx.strokeStyle = \"#D8D8D8\";\n      ctx.lineCap = \"round\";\n      ctx.arc(\n        this.doughnutChartData.centerX,\n        this.doughnutChartData.centerY,\n        radius / 2,\n        1.5 * Math.PI,\n        (1 / 100) * 100 * Math.PI,\n        false\n      );\n      ctx.stroke();\n      ctx.fillStyle = \"rgb(255, 255, 255, 0)\";\n      ctx.fill();\n      // color\n      ctx.beginPath();\n      ctx.lineWidth = 12;\n      ctx.strokeStyle = color;\n      ctx.lineCap = \"round\";\n      const fraction = endpoint / 100;\n      ctx.arc(\n        this.doughnutChartData.centerX,\n        this.doughnutChartData.centerY,\n        radius / 2,\n        1.5 * Math.PI,\n        (1.0 + fraction) * 1.5 * Math.PI,\n        false\n      );\n      ctx.stroke();\n      ctx.fillStyle = \"rgb(255, 255, 255, 0)\";\n      ctx.fill();\n      return ctx;\n    },\n    initDraw() {\n      this.drawCircle();\n    },\n  },\n  watch: {\n    doughnutChartData: {\n      handler(){\n        this.initDraw();\n        this.renderComponent = false;\n        this.$nextTick(() => {\n          this.renderComponent = true;\n        });\n      },\n      deep: true\n    },\n    year: {\n      handler(){\n        this.initDraw();\n        this.renderComponent = false;\n        this.$nextTick(() => {\n          this.renderComponent = true;\n        });\n      },\n      deep: true\n    },\n  },\n};\n</script>\n\n<style>\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FrameworkDoughnutChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FrameworkDoughnutChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./FrameworkDoughnutChart.vue?vue&type=template&id=4d5c3582\"\nimport script from \"./FrameworkDoughnutChart.vue?vue&type=script&lang=js\"\nexport * from \"./FrameworkDoughnutChart.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","module.exports = __webpack_public_path__ + \"img/FrameworkBtn.a47a3e3d.svg\";","module.exports = __webpack_public_path__ + \"img/BackArrow.673beb66.svg\";"],"sourceRoot":""}