{"version":3,"sources":["webpack:///./src/components/charts/PieChart.vue","webpack:///src/components/charts/PieChart.vue","webpack:///./src/components/charts/PieChart.vue?bde4","webpack:///./src/components/charts/PieChart.vue?e756","webpack:///./src/components/charts/PieChart.vue?0999"],"names":["render","_vm","this","_c","_self","ref","staticClass","attrs","loading","loadingColor","_l","values","item","i","key","color","_v","_s","label","staticRenderFns","name","components","Loading","props","type","default","margin","top","right","bottom","left","data","svg","width","height","radius","tooltip","line","area","hoveredValue","mounted","beforeDestroy","window","methods","resize","screensize","init","draw","attr","append","style","selectAll","pie","enter","on","d3","div","num","percent","html","transition","duration","domain","range","arcs","arc","component","VIcon"],"mappings":"uHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,IAAI,YAAYC,YAAY,SAAS,CAACH,EAAG,UAAU,CAACI,MAAM,CAAC,MAAQN,EAAIO,QAAQ,gBAAgBP,EAAIQ,gBAAgBN,EAAG,MAAM,CAACE,IAAI,WAAWC,YAAY,6BAA6BH,EAAG,MAAM,CAACG,YAAY,gBAAgBL,EAAIS,GAAIT,EAAIU,QAAQ,SAASC,EAAKC,GAAG,OAAOV,EAAG,MAAM,CAACW,IAAID,EAAEP,YAAY,iBAAiB,CAACH,EAAG,SAAS,CAACI,MAAM,CAAC,MAAQK,EAAKG,MAAM,KAAO,OAAO,CAACd,EAAIe,GAAG,gBAAgBb,EAAG,QAAQ,CAACG,YAAY,QAAQ,CAACL,EAAIe,GAAGf,EAAIgB,GAAGL,EAAKM,WAAW,MAAK,IAAI,IAEnhBC,EAAkB,G,oCCcP,GACfC,gBACAC,YACAC,sBAEAC,OACAZ,QACAa,YAEAhB,SACAgB,aACAC,YAEAhB,cACAe,YACAC,iBAEAC,QACAF,YACAC,cAAAE,MAAAC,QAAAC,SAAAC,aAGAC,WACAC,SACAC,UACAC,WACAC,WACAC,aACAC,UACAC,UACAC,oBAEAC,UACA,kBACA,aAEAC,gBACAC,kDAEAC,SACAC,SACA,mEACA,0CACA,8CACA,KAGAC,aACAH,+CAGAI,OACA,4BACA,sCAEA,6BACA,IACA,4DACA,+DAGA,oEACA,sEACA,iDAGA,aAGAC,OACA,aACA,OACAC,KAAA,uDACAA,KAAA,yDAEA,IACAC,OAAA,KACAD,KAAA,4FAEA,iEAEA,6BAEA,SACA,QACAC,OAAA,OACAD,KAAA,yBACAE,MAAA,aAEA,cACA,mCACA,QACAC,UAAA,OACApB,KAAAqB,gBACAC,QACAJ,OAAA,KACAC,MAAA,oBACAI,GAAA,6BACAC,gEAEAC,+CAEA,gCAEA,KACAC,kGACAA,kEACAA,wCACAA,QACA,uBACAC,aACAD,OACAA,eACAA,YAEAD,EACAG,KAAAF,GACAP,MAAA,wBACAA,MAAA,0BAEAI,GAAA,0BACAC,8DACAC,oDAEAF,GAAA,uBACAC,aACAK,aACAC,SAAA,OACAb,KAAA,gBACAM,GAAA,kBACAC,aACAK,aACAC,SAAA,OACAb,KAAA,sBAQA,SAEAc,OAAA,6BACAC,MAAA,6BAoCAC,EACAf,OAAA,QACAD,KAAA,eACA,aAEA,iBAGAA,KAAA,IAAAiB,GAEA,wCC9MiW,I,yDCQ7VC,EAAY,eACd,EACAlE,EACAmB,GACA,EACA,KACA,KACA,MAIa,aAAA+C,EAAiB,QAKhC,IAAkBA,EAAW,CAACC,QAAA,Q,oCCxB9B,W","file":"js/chunk-d0695fb6.ebac3393.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:\"container\",staticClass:\"chart\"},[_c('Loading',{attrs:{\"value\":_vm.loading,\"loading-color\":_vm.loadingColor}}),_c('div',{ref:\"piechart\",staticClass:\"chart-container piechart\"}),_c('div',{staticClass:\"chart-legend\"},_vm._l((_vm.values),function(item,i){return _c('div',{key:i,staticClass:\"text-ellipsis\"},[_c('v-icon',{attrs:{\"color\":item.color,\"size\":\"16\"}},[_vm._v(\"mdi-circle\")]),_c('small',{staticClass:\"ml-1\"},[_vm._v(_vm._s(item.label))])],1)}),0)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"chart\" ref=\"container\">\n    <Loading :value=\"loading\" :loading-color=\"loadingColor\" />\n    <div class=\"chart-container piechart\" ref=\"piechart\" />\n    <div class=\"chart-legend\">\n      <div v-for=\"(item, i) in values\" :key=\"i\" class=\"text-ellipsis\">\n        <v-icon :color=\"item.color\" size=\"16\">mdi-circle</v-icon>\n        <small class=\"ml-1\">{{item.label}}</small>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport * as d3 from \"d3\";\nimport Loading from \"@/components/Loading\";\n\nexport default {\n  name: \"PieChart\",\n  components: {\n    Loading,\n  },\n  props: {\n    values: {\n      type: Array,\n    },\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    loadingColor: {\n      type: String,\n      default: \"white\",\n    },\n    margin: {\n      type: Object,\n      default: () => ({ top: 0, right: 0, bottom: 0, left: 100 }),\n    }\n  },\n  data: () => ({\n    svg: null,\n    width: 400,\n    height: 400,\n    radius: 200,\n    tooltip: null,\n    line: null,\n    area: null,\n    hoveredValue: null,\n  }),\n  mounted() {\n    this.screensize();\n    this.init();\n  },\n  beforeDestroy() {\n    window.removeEventListener(\"resize\", this.resize);\n  },\n  methods: {\n    resize() {\n      if (this.changeScreesizeEvent) clearTimeout(this.changeScreesizeEvent);\n      this.changeScreesizeEvent = setTimeout(() => {\n        if (window.clientWidth !== this.width) this.init();\n      }, 80);\n    },\n\n    screensize() {\n      window.addEventListener(\"resize\", this.resize);\n    },\n\n    init() {\n      const chart = this.$refs.piechart;\n      if (chart) this.$refs.piechart.innerHTML = \"\";\n\n      const container = this.$refs.container;\n      if (container) {\n        this.width = container.clientWidth - this.margin.left - this.margin.right\n        this.height = container.clientHeight - this.margin.top - this.margin.bottom\n      }\n\n      if (this.width < 200) this.width = 200 - this.margin.left - this.margin.right\n      if (this.height < 200) this.height = 200 - this.margin.top - this.margin.bottom\n      this.radius = Math.min(this.width, this.height) / 2.2\n\n      // X axis\n      this.draw()\n    },\n\n    draw() {\n      var svg = d3\n        .create(\"svg\")\n        .attr(\"width\", this.width + this.margin.left + this.margin.right)\n        .attr(\"height\", this.height + this.margin.top + this.margin.bottom);\n\n      var g = svg\n        .append(\"g\")\n        .attr(\"transform\", `translate(${(this.width / 2) + this.margin.left},${(this.height / 2)  + this.margin.top})`);\n\n      var arc = d3.arc().innerRadius(this.radius / 1.5).outerRadius(this.radius);\n\n      var pie = d3.pie().value((d) => d.value);\n\n      var div = d3\n        .select(\"body\")\n        .append(\"div\")\n        .attr(\"class\", \"tooltip-donut\")\n        .style(\"opacity\", 1);\n\n      var currentData = this.values;\n      let totalValue = currentData.reduce((a, b) => a + b.value, 0)\n      var arcs = g\n        .selectAll(\"arc\")\n        .data(pie(this.values))\n        .enter()\n        .append(\"g\")\n        .style(\"cursor\", \"pointer\")\n        .on(\"mouseover\", function (d, i, f) {\n          d3.select(this).transition().duration(\"200\").attr(\"opacity\", \".50\")\n\n          div.transition().duration(50).style(\"opacity\", 1)\n\n          let percent = Math.round((i.value * 100) / totalValue)\n\n          let num = ''\n          num += '<div style=\"padding: 5px 12px; border: solid 2px ' + i.data.color + '; border-radius: inherit;\">'\n            num += '<div class=\"pa-4 pb-2\"><small>' + i.data.label + '</small></div>'\n            num += '<strong class=\"pa-4 pt-2 numeric\">'\n              num += percent < 1\n              ? ((percent*100/10) / totalValue).toFixed(1)\n              : percent.toString()\n              num += '%'\n            num += '</strong>'\n          num += '</div>'\n\n          div\n            .html(num)\n            .style(\"left\", `${d.pageX + 10}px`)\n            .style(\"top\", `${d.pageY - 15}px`);\n        })\n        .on(\"mouseout\", function (d, i) {\n          d3.select(this).transition().duration(\"200\").attr(\"opacity\", \"1\");\n          div.transition().duration(\"50\").style(\"opacity\", 0);\n        })\n        .on(\"click\", function (d, i) {\n          d3.select(this)\n            .transition()\n            .duration(\"200\")\n            .attr(\"opacity\", \".3\")\n            .on(\"end\", function () {\n              d3.select(this)\n                .transition()\n                .duration(\"200\")\n                .attr(\"opacity\", \".5\");\n            });\n\n          //here put emit signal when needed\n        });\n\n      // if (svg.node().getAttribute(\"width\") > 450) {\n      //hide legend if not enough space\n      var color = d3\n        .scaleOrdinal()\n        .domain(this.values.map((d) => d.color))\n        .range(this.values.map((d) => d.color));\n\n      // svg\n      //   .selectAll(\"mydots\")\n      //   .data(this.values.map((d) => d.label))\n      //   .enter()\n      //   .append(\"circle\")\n      //   .attr(\"cx\", 50)\n      //   .attr(\"cy\", function (d, i) {\n      //     return 10 + i * 25;\n      //   }) // 100 is where the first dot appears. 25 is the distance between dots\n      //   .attr(\"r\", 8)\n      //   .style(\"fill\", function (d) {\n      //     return color(d);\n      //   });\n      //\n      // svg\n      //   .selectAll(\"mylabels\")\n      //   .data(this.values.map((d) => d.label))\n      //   .enter()\n      //   .append(\"text\")\n      //   .attr(\"x\", 70)\n      //   .attr(\"y\", function (d, i) {\n      //     return 10 + i * 25;\n      //   })\n      //   // .style(\"fill\", function (d) {\n      //   //   return color(d);\n      //   // })\n      //   .style(\"fill\", \"black\")\n      //   .style(\"font-size\", 14)\n      //   .text(function (d) {\n      //     return d;\n      //   })\n      //   .attr(\"text-anchor\", \"left\")\n      //   .style(\"alignment-baseline\", \"middle\");\n      // }\n      arcs\n        .append(\"path\")\n        .attr(\"fill\", (data, i) => {\n          let pieSection = data.data;\n\n          return pieSection.color; //use color provided by data\n          // return d3.schemeSet3[i]; use color provided by D3\n        })\n        .attr(\"d\", arc);\n\n      this.$refs.piechart.append(svg.node());\n    },\n  },\n};\n</script>\n\n<style>\n.piechart path {\n  stroke-width: 2px;\n  stroke: white;\n}\n.chart {\n  position: relative;\n  width:100%;\n  height: 100%;\n}\n.chart-legend {\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 30%;\n}\n\n.tooltip-donut {\n  position: absolute;\n  text-align: center;\n  /* padding: 0.5rem; */\n  background: #ffffff;\n  color: #313639;\n  /* border: 1px solid #313639; */\n  border-radius: 8px;\n  pointer-events: none;\n  font-size: 1rem;\n  min-width: 80px;\n  min-height: 40px;\n}\n</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!./PieChart.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!./PieChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PieChart.vue?vue&type=template&id=3e452f52&\"\nimport script from \"./PieChart.vue?vue&type=script&lang=js&\"\nexport * from \"./PieChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PieChart.vue?vue&type=style&index=0&id=3e452f52&prod&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  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VIcon } from 'vuetify/lib/components/VIcon';\ninstallComponents(component, {VIcon})\n","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!./PieChart.vue?vue&type=style&index=0&id=3e452f52&prod&lang=css&\""],"sourceRoot":""}