{"version":3,"sources":["webpack:///./src/views/components/SagSemiCircleChartDemo.vue?6024","webpack:///./src/components/basic/SagSemiCircleChart.vue?aedf","webpack:///src/components/basic/SagSemiCircleChart.vue","webpack:///./src/components/basic/SagSemiCircleChart.vue?b04a","webpack:///./src/components/basic/SagSemiCircleChart.vue","webpack:///src/views/components/SagSemiCircleChartDemo.vue","webpack:///./src/views/components/SagSemiCircleChartDemo.vue?25d0","webpack:///./src/views/components/SagSemiCircleChartDemo.vue","webpack:///./src/components/basic/SagSemiCircleChart.vue?a4f6"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","chartData","staticRenderFns","staticClass","_l","items","key","_v","_s","Label","getChartData","getChartOptions","class","getPercentageClass","calculatePercentage","name","components","DoughnutChart","extends","props","mounted","renderChart","options","watch","handler","deep","type","Object","required","methods","datasets","data","achieve","remaining","backgroundColor","borderWidth","labels","responsive","maintainAspectRatio","rotation","Math","PI","circumference","legend","display","tooltips","callbacks","label","plan","round","getColor","percentage","component","BCard","SagSemiCircleChart","First","Second","Third"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,SAAS,CAACE,MAAM,CAAC,MAAQ,2BAA2B,CAACF,EAAG,wBAAwB,CAACE,MAAM,CAAC,aAAaN,EAAIO,cAAc,IACtNC,EAAkB,GCDlB,EAAS,WAAa,IAAIR,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACK,YAAY,sBAAsBT,EAAIU,GAAIV,EAAa,WAAE,SAASW,EAAMC,GAAK,OAAOR,EAAG,MAAM,CAACQ,IAAIA,EAAIH,YAAY,mBAAmB,CAACL,EAAG,MAAM,CAACK,YAAY,eAAe,CAACT,EAAIa,GAAGb,EAAIc,GAAGH,EAAM,GAAGI,UAAUX,EAAG,iBAAiB,CAACE,MAAM,CAAC,aAAaN,EAAIgB,aAAaL,EAAM,IAAI,QAAUX,EAAIiB,kBAAkB,OAAS,OAAOb,EAAG,MAAM,CAACK,YAAY,mBAAmBS,MAAMlB,EAAImB,mBAAmBR,EAAM,KAAK,CAACX,EAAIa,GAAG,IAAIb,EAAIc,GAAGd,EAAIoB,oBAAoBT,EAAM,KAAK,SAAS,MAAK,IAC5jB,EAAkB,G,wBCkBtB,GACEU,KAAM,qBACNC,WAAY,CACVC,cAAe,CACbC,QAAS,EAAf,KACMC,MAAO,CAAC,YAAa,WACrBC,QAHN,WAIQzB,KAAK0B,YAAY1B,KAAKM,UAAWN,KAAK2B,UAExCC,MAAO,CACLtB,UAAW,CACTuB,QADV,WAEY7B,KAAK0B,YAAY1B,KAAKM,UAAWN,KAAK2B,UAExCG,MAAM,MAKdN,MAAO,CACLlB,UAAW,CACTyB,KAAMC,OACNC,UAAU,IAGdC,QAAS,CACPnB,aADJ,SACA,GACM,IAAN,oCACA,gCACA,kBAEM,MAAO,CACLoB,SAAU,CAAC,CACTC,KAAM,CAACC,EAASC,GAChBC,gBAAiB,CAC3B,mBACA,WAEUC,YAAa,IAEfC,OAAQ,CAAC,UAAW,eAGxBzB,gBAlBJ,WAmBM,MAAO,CACL0B,YAAY,EACZC,qBAAqB,EACrBC,UAAWC,KAAKC,GAChBC,cAAeF,KAAKC,GACpBE,OAAQ,CACNC,SAAS,GAEXC,SAAU,CACRC,UAAW,CACTC,MAAO,SAAnB,KACc,IAAd,6BACA,kBACA,oBACc,MAAO,GAArB,8BAMIjC,oBAvCJ,SAuCA,GACM,IAAN,oCACA,gCACM,OAAOkC,EAAO,EAAIR,KAAKS,MAAM,EAAnC,UAEIC,SA5CJ,SA4CA,GACM,IAAN,QACM,OAAIC,EAAa,GAAW,UACxBA,EAAa,GAAW,UACrB,WAETtC,mBAlDJ,SAkDA,GACM,IAAN,8BACM,OAAIsC,EAAa,GAAW,cACxBA,EAAa,GAAW,eACrB,kBClG8V,I,wBCQvWC,EAAY,eACd,EACA,EACA,GACA,EACA,KACA,WACA,MAIa,EAAAA,E,oBCTf,GACEpC,WAAY,CACVqC,MAAJ,OACIC,mBAAJ,GAEEvB,KALF,WAMI,MAAO,CACL9B,UAAW,CACTsD,MAAO,CACf,CAAU,MAAV,QAAU,KAAV,OAAU,QAAV,QAEQC,OAAQ,CAChB,CAAU,MAAV,QAAU,KAAV,OAAU,QAAV,QAEQC,MAAO,CACf,CAAU,MAAV,QAAU,KAAV,OAAU,QAAV,YCzB+W,ICO3W,EAAY,eACd,EACAhE,EACAS,GACA,EACA,KACA,KACA,MAIa,e,2CClBf,W","file":"js/chunk-41bd5a80.ac1c28c0.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card',{attrs:{\"title\":\"Semi Circle Chart Demo\"}},[_c('sag-semi-circle-chart',{attrs:{\"chart-data\":_vm.chartData}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"semi-circle-charts\"},_vm._l((_vm.chartData),function(items,key){return _c('div',{key:key,staticClass:\"chart-container\"},[_c('div',{staticClass:\"chart-label\"},[_vm._v(_vm._s(items[0].Label))]),_c('doughnut-chart',{attrs:{\"chart-data\":_vm.getChartData(items[0]),\"options\":_vm.getChartOptions(),\"height\":150}}),_c('div',{staticClass:\"chart-percentage\",class:_vm.getPercentageClass(items[0])},[_vm._v(\" \"+_vm._s(_vm.calculatePercentage(items[0]))+\"% \")])],1)}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"semi-circle-charts\">\r\n    <div v-for=\"(items, key) in chartData\" :key=\"key\" class=\"chart-container\">\r\n      <div class=\"chart-label\">{{ items[0].Label }}</div>\r\n      <doughnut-chart\r\n        :chart-data=\"getChartData(items[0])\"\r\n        :options=\"getChartOptions()\"\r\n        :height=\"150\"\r\n      />\r\n      <div class=\"chart-percentage\" :class=\"getPercentageClass(items[0])\">\r\n        {{ calculatePercentage(items[0]) }}%\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { Doughnut } from 'vue-chartjs'\r\n\r\nexport default {\r\n  name: 'SagSemiCircleChart',\r\n  components: {\r\n    DoughnutChart: {\r\n      extends: Doughnut,\r\n      props: ['chartData', 'options'],\r\n      mounted() {\r\n        this.renderChart(this.chartData, this.options)\r\n      },\r\n      watch: {\r\n        chartData: {\r\n          handler() {\r\n            this.renderChart(this.chartData, this.options)\r\n          },\r\n          deep: true\r\n        }\r\n      }\r\n    }\r\n  },\r\n  props: {\r\n    chartData: {\r\n      type: Object,\r\n      required: true\r\n    }\r\n  },\r\n  methods: {\r\n    getChartData(data) {\r\n      const achieve = parseFloat(data.Achieve || data.Value || 0)\r\n      const plan = parseFloat(data.Plan || data.Date || 0)\r\n      const remaining = Math.max(0, plan - achieve)\r\n\r\n      return {\r\n        datasets: [{\r\n          data: [achieve, remaining],\r\n          backgroundColor: [\r\n            this.getColor(achieve / plan),\r\n            '#f0f0f0'\r\n          ],\r\n          borderWidth: 0\r\n        }],\r\n        labels: ['Achieve', 'Remaining']\r\n      }\r\n    },\r\n    getChartOptions() {\r\n      return {\r\n        responsive: true,\r\n        maintainAspectRatio: false,\r\n        rotation: -Math.PI,\r\n        circumference: Math.PI,\r\n        legend: {\r\n          display: false\r\n        },\r\n        tooltips: {\r\n          callbacks: {\r\n            label: (tooltipItem, data) => {\r\n              const dataset = data.datasets[tooltipItem.datasetIndex]\r\n              const value = dataset.data[tooltipItem.index]\r\n              const label = data.labels[tooltipItem.index]\r\n              return `${label}: ${value}`\r\n            }\r\n          }\r\n        }\r\n      }\r\n    },\r\n    calculatePercentage(data) {\r\n      const achieve = parseFloat(data.Achieve || data.Value || 0)\r\n      const plan = parseFloat(data.Plan || data.Date || 0)\r\n      return plan > 0 ? Math.round((achieve / plan) * 100) : 0\r\n    },\r\n    getColor(ratio) {\r\n      const percentage = ratio * 100\r\n      if (percentage < 60) return '#ff4444'  // Red\r\n      if (percentage < 90) return '#ffbb33'  // Yellow\r\n      return '#00C851'  // Green\r\n    },\r\n    getPercentageClass(data) {\r\n      const percentage = this.calculatePercentage(data)\r\n      if (percentage < 60) return 'text-danger'\r\n      if (percentage < 90) return 'text-warning'\r\n      return 'text-success'\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.semi-circle-charts {\r\n  display: flex;\r\n  justify-content: space-around;\r\n  align-items: center;\r\n  padding: 20px;\r\n}\r\n\r\n.chart-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 33%;\r\n}\r\n\r\n.chart-label {\r\n  font-size: 1rem;\r\n  font-weight: bold;\r\n  margin-bottom: 10px;\r\n  text-align: center;\r\n}\r\n\r\n.chart-percentage {\r\n  font-size: 1.2rem;\r\n  font-weight: bold;\r\n  margin-top: 10px;\r\n}\r\n\r\n.text-danger {\r\n  color: #ff4444;\r\n}\r\n\r\n.text-warning {\r\n  color: #ffbb33;\r\n}\r\n\r\n.text-success {\r\n  color: #00C851;\r\n}\r\n</style>\r\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!./SagSemiCircleChart.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!./SagSemiCircleChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SagSemiCircleChart.vue?vue&type=template&id=8a04812a&scoped=true&\"\nimport script from \"./SagSemiCircleChart.vue?vue&type=script&lang=js&\"\nexport * from \"./SagSemiCircleChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SagSemiCircleChart.vue?vue&type=style&index=0&id=8a04812a&scoped=true&lang=css&\"\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  \"8a04812a\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <b-card title=\"Semi Circle Chart Demo\">\r\n    <sag-semi-circle-chart :chart-data=\"chartData\" />\r\n  </b-card>\r\n</template>\r\n\r\n<script>\r\nimport SagSemiCircleChart from '@/components/basic/SagSemiCircleChart.vue'\r\nimport { BCard } from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BCard,\r\n    SagSemiCircleChart\r\n  },\r\n  data() {\r\n    return {\r\n      chartData: {\r\n        First: [\r\n          { Label: \"入庫達成率\", Plan: \"1000\", Achieve: \"590\" }\r\n        ],\r\n        Second: [\r\n          { Label: \"良率_網印\", Plan: \"1000\", Achieve: \"890\" }\r\n        ],\r\n        Third: [\r\n          { Label: \"良率_曝光\", Plan: \"1000\", Achieve: \"930\" }\r\n        ]\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\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!./SagSemiCircleChartDemo.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!./SagSemiCircleChartDemo.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SagSemiCircleChartDemo.vue?vue&type=template&id=1cb540b8&\"\nimport script from \"./SagSemiCircleChartDemo.vue?vue&type=script&lang=js&\"\nexport * from \"./SagSemiCircleChartDemo.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","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!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SagSemiCircleChart.vue?vue&type=style&index=0&id=8a04812a&scoped=true&lang=css&\""],"sourceRoot":""}