{"version":3,"sources":["webpack:///./src/components/charts/LineBarChart.vue?1e8d","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/LineChart.vue","webpack:///src/components/charts/LineChart.vue","webpack:///./src/components/charts/LineChart.vue?2060","webpack:///./src/components/charts/LineChart.vue?3f43","webpack:///./src/components/charts/PieChart.vue?0999","webpack:///./src/components/charts/Chart.vue","webpack:///src/components/charts/Chart.vue","webpack:///./src/components/charts/Chart.vue?18fb","webpack:///./src/components/charts/Chart.vue?99e8","webpack:///./src/components/charts/BarChart.vue","webpack:///./src/components/charts/LineChart.vue?a55b","webpack:///./src/components/charts/LineBarChart.vue","webpack:///src/components/charts/LineBarChart.vue","webpack:///./src/components/charts/LineBarChart.vue?783c","webpack:///./src/components/charts/LineBarChart.vue?76ab"],"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","isEmpty","$t","_e","hex2rgb","hexColor","a","watch","deep","handler","map","v","filter","length","g","call","text","curve","x","d","y","datum","lineData","y0","y1","offset","join","dot","currentChart","tag","theme","LineChart","BarChart","LineBarChart","PieChart","EarthChart","computed","script","rangeRound","padding","bar","xScale","dividerLine"],"mappings":"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","file":"js/chunk-3fddd9b4.3deeb664.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!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LineBarChart.vue?vue&type=style&index=0&id=6e4c1284&prod&lang=css&\"","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","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:\"container\",staticClass:\"lineChartContainer height-100\"},[(_vm.isEmpty)?_c('div',{staticClass:\"chart-no-data\"},[_vm._v(_vm._s(_vm.$t(\"CHART.NO_DATA\")))]):_vm._e(),_c('Loading',{attrs:{\"value\":_vm.loading,\"loading-color\":_vm.loadingColor}}),_c('div',{ref:\"linechart\",staticClass:\"chart\"})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div ref=\"container\" class=\"lineChartContainer height-100\">\n    <div v-if=\"isEmpty\" class=\"chart-no-data\">{{ $t(\"CHART.NO_DATA\") }}</div>\n    <Loading :value=\"loading\" :loading-color=\"loadingColor\" />\n    <div class=\"chart\" ref=\"linechart\" />\n  </div>\n</template>\n\n<script>\nimport * as d3 from \"d3\";\nimport Loading from \"@/components/Loading\";\n\nconst hex2rgb = (hexColor, a = 1) => {\n  if (hexColor.charAt(0) === \"#\") hexColor = hexColor.substr(1);\n  if (hexColor.length === 3)\n    hexColor =\n      hexColor.substr(0, 1) +\n      hexColor.substr(0, 1) +\n      hexColor.substr(1, 2) +\n      hexColor.substr(1, 2) +\n      hexColor.substr(2, 3) +\n      hexColor.substr(2, 3);\n  return `rgba(${parseInt(\n    `${hexColor.charAt(0)}${hexColor.charAt(1)}`,\n    16\n  )},${parseInt(`${hexColor.charAt(2)}${hexColor.charAt(3)}`, 16)},${parseInt(\n    `${hexColor.charAt(4)}${hexColor.charAt(5)}`,\n    16\n  )},${a})`;\n};\n\nexport default {\n  name: \"LineChart\",\n  components: {\n    Loading,\n  },\n  props: {\n    values: {\n      type: Array,\n      default: () => [],\n    },\n    loading: {\n      type: Boolean,\n    },\n    loadingColor: {\n      type: String,\n      default: \"white\",\n    },\n  },\n  data: () => ({\n    svg: null,\n    margin: { top: 20, right: 20, bottom: 20, left: 20 },\n    width: 200,\n    height: 400,\n    tooltip: null,\n    line: null,\n    area: null,\n    isEmpty: false,\n  }),\n  mounted() {\n    this.screensize();\n    this.init();\n  },\n  beforeDestroy() {\n    window.removeEventListener(\"resize\", this.resize);\n  },\n  watch: {\n    values: {\n      deep: true,\n      handler() {\n        this.init();\n      },\n    },\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.linechart;\n      if (chart) this.$refs.linechart.innerHTML = \"\";\n\n      const container = this.$refs.container;\n      if (container) {\n        this.width = container.clientWidth;\n        this.height = container.clientHeight;\n      }\n\n      if (this.width < 200) this.width = 200;\n      if (this.height < 200) this.height = 200;\n\n      this.isEmpty = true;\n      if (this.values && this.values.length > 0) {\n        const len = this.values\n          .map((v) => v.data.length > 0)\n          .filter((v) => v > 0).length;\n        if (len) {\n          this.isEmpty = false;\n        }\n      }\n      this.draw();\n    },\n\n    draw() {\n      this.x = d3\n        .scaleTime()\n        .domain(d3.extent(this.values[0].data, (d) => +new Date(d.date)))\n        .range([this.margin.left, this.width - this.margin.right - 1]);\n\n      this.xAxis = (g) =>\n        g\n          .attr(\n            \"transform\",\n            `translate(0, ${this.height - this.margin.bottom})`\n          )\n          .call(d3.axisBottom(this.x));\n\n      const max = d3.max(this.values[0].data.map((d) => d.value));\n      this.y = d3\n        .scaleLinear()\n        .domain([0, max + max * 0.3])\n        .range([this.height - this.margin.bottom, this.margin.top]);\n\n      this.yAxis = (g) =>\n        g\n          .call(d3.axisLeft(this.y).ticks(3))\n          .call((g) => g.select(\".domain\").remove())\n          .call((g) =>\n            g\n              .selectAll(\".tick text\")\n              .attr(\"transform\", `translate(${this.margin.left + 10},-8)`)\n              .attr(\"text-anchor\", `start`)\n          );\n\n      var svg = d3.create(\"svg\");\n\n      svg\n        .attr(\"width\", this.width)\n        .attr(\"height\", this.height)\n        .attr(\"viewbox\", [0, 0, this.width, this.height]);\n\n      svg\n        .append(\"g\")\n        .call(this.yAxis)\n        .selectAll(\"line\")\n        .attr(\"stroke-width\", \"0.5px\")\n        .attr(\"stroke-opacity\", \"30%\")\n        .attr(\"x1\", this.margin.left)\n        .attr(\"x2\", this.width - this.margin.right);\n\n      svg.append(\"g\").call(this.xAxis);\n\n      //legends\n\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\", 40 + this.margin.left)\n        .attr(\"cy\", function (d, i) {\n          return 19 + i * 25;\n        }) // 20 is where the first dot appears. 25 is the distance between dots\n        .attr(\"r\", 7)\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\", 55 + this.margin.left)\n        .attr(\"y\", function (d, i) {\n          return 20 + i * 25;\n        })\n        .style(\"fill\", function (d) {\n          return color(d);\n        })\n        .text(function (d) {\n          return d;\n        })\n        .attr(\"text-anchor\", \"left\")\n        .style(\"alignment-baseline\", \"middle\");\n\n      // DRAWING EACH LINE\n\n      this.values.forEach((lineData, i) => {\n        // doesnt draw anything when no data\n        if (lineData && lineData.data && lineData.data.length === 0) return;\n\n        //line\n        const line = d3\n          .line()\n          .curve(d3.curveMonotoneX)\n          .x((d) => this.x(+new Date(d.date)))\n          .y((d) => this.y(d.value));\n\n          svg\n          .append(\"path\")\n          .datum(lineData.data)\n          .attr(\"fill\", \"none\")\n          .attr(\"stroke\", lineData.color)\n          .attr(\"stroke-width\", 3)\n          .attr(\"d\", line);\n\n        //area\n        const area = d3\n          .area()\n          .curve(d3.curveMonotoneX)\n          .x((d) => this.x(+new Date(d.date)))\n          .y0(this.height  - this.margin.bottom)\n          .y1((d) => this.y(d.value));\n\n        //creating gradient for area\n        svg\n          .append(\"linearGradient\")\n          .attr(\"id\", `line-area-gradient-${i}`)\n          .attr(\"gradientUnits\", \"userSpaceOnUse\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", \"100%\")\n          .attr(\"x2\", 0)\n          .attr(\"y2\", \"0%\")\n          .selectAll(\"stop\")\n          .data([\n            { offset: \"0%\", color: hex2rgb(lineData.color, 0) },\n            { offset: \"100%\", color: hex2rgb(lineData.color, .7)},\n          ])\n          .join(\"stop\")\n          .attr(\"offset\", (d) => d.offset)\n          .attr(\"stop-color\", (d) => d.color);\n\n        svg\n          .append(\"path\")\n          .datum(lineData.data)\n          .attr(\"style\", `fill: url(#line-area-gradient-${i})`)\n          .attr(\"d\", area);\n\n        var div = d3\n          .select(\"body\")\n          .append(\"div\")\n          .attr(\"class\", \"tooltip\")\n          .style(\"opacity\", 0)\n          .attr(\"ref\", \"tooltip\");\n\n        //creating dots for each data\n        svg\n          .selectAll(\"myCircles\")\n          .data(lineData.data)\n          .join(\"circle\")\n          .attr(\"fill\", lineData.color)\n          .attr(\"id\", lineData.label)\n          .attr(\"stroke\", \"white\")\n          .attr(\"stroke-width\", 2)\n          .style(\"cursor\", \"pointer\")\n          .attr(\"cx\", (d) => {\n            // avoid dot to touch borders\n            const x = this.x(+new Date(d.date));\n            const decalLeft = this.margin.left ? 0 : 5;\n            const decalRight = this.margin.right ? 0 : 5;\n            if (x === this.margin.left) return decalLeft + this.margin.left;\n            if (x === this.width - this.margin.right)\n              return this.width - this.margin.right - decalRight;\n            return x;\n          })\n          .attr(\"cy\", (d) => this.y(d.value))\n          .attr(\"r\", 5)\n          .on(\"mouseover\", function (d, i) {\n            d3.select(this).transition().duration(\"100\").attr(\"r\", 8);\n\n            var dot = this.getBoundingClientRect();\n            var containerWidth = d.view.outerWidth;\n            var tooltipWidth = div.node().getBoundingClientRect().width;\n\n            var tooltipX =\n            dot.x + tooltipWidth > containerWidth - 50\n                ? dot.x - tooltipWidth\n                : dot.x;\n            var tooltipY = dot.y - 55;\n\n            div\n              .html(`${i.name}: ${i.value.toFixed(2)}`)\n              .style(\"left\", `${tooltipX}px`)\n              .style(\"top\", `${tooltipY}px`);\n\n            div.transition().duration(100).style(\"opacity\", 1);\n          })\n          .on(\"mouseout\", function (d, i) {\n            d3.select(this).transition().duration(\"200\").attr(\"r\", 5);\n\n            div.transition().duration(\"200\").style(\"opacity\", 0);\n          })\n          .on(\"click\", function (d, i) {\n            d3.select(this)\n              .transition()\n              .attr(\"r\", 5)\n              .on(\"end\", function () {\n                d3.select(this).transition().attr(\"r\", 8);\n              });\n          });\n      });\n\n      this.$refs.linechart.append(svg.node());\n    },\n  },\n};\n</script>\n\n<style>\n.lineChartContainer {\n  position: relative;\n  min-height: 250px;\n}\n\n.chart-no-data {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  font-size: 16px;\n  opacity: 0.5;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\nsvg {\n  width: 100%;\n  min-height: 200px;\n}\n\n.tooltip {\n  position: absolute;\n  text-align: center;\n  padding: 0.5rem 1rem;\n  background: white;\n  color: black;\n  border: 1px solid black;\n  border-radius: 8px;\n  pointer-events: none;\n  font-size: 1rem;\n  transform-origin: bottom center;\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!./LineChart.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!./LineChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LineChart.vue?vue&type=template&id=48f6aed7&\"\nimport script from \"./LineChart.vue?vue&type=script&lang=js&\"\nexport * from \"./LineChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./LineChart.vue?vue&type=style&index=0&id=48f6aed7&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","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&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"chart\"},[_c(_vm.currentChart,{tag:\"component\",attrs:{\"values\":_vm.values,\"loading\":_vm.loading,\"loading-color\":_vm.loadingColor,\"props\":_vm.props,\"theme\":_vm.theme}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"chart\">\n    <component\n      :is=\"currentChart\"\n      :values=\"values\"\n      :loading=\"loading\"\n      :loading-color=\"loadingColor\"\n      :props=\"props\"\n      :theme=\"theme\"\n    />\n  </div>\n</template>\n\n<script>\nimport LineChart from \"./LineChart.vue\";\nimport BarChart from \"./BarChart.vue\";\nimport LineBarChart from \"./LineBarChart.vue\";\nimport PieChart from \"./PieChart.vue\";\nimport EarthChart from \"./EarthChart.vue\";\n\nexport default {\n  name: \"Chart\",\n  components: {\n    LineChart,\n    BarChart,\n    LineBarChart,\n    PieChart,\n    EarthChart,\n  },\n  props: {\n    type: {\n      type: String,\n    },\n    values: {\n      type: Array,\n      default: () => [],\n    },\n    loading: {\n      type: Boolean,\n    },\n    loadingColor: {\n      type: String,\n    },\n    props: {\n      type: Object,\n    },\n    theme: {\n      type: String,\n      default: \"light\",\n    }\n  },\n  computed: {\n    currentChart() {\n      switch (this.type) {\n        case \"bar\":\n          return BarChart;\n        case \"line\":\n          return LineChart;\n        case \"line-bar\":\n          return LineBarChart;\n        case \"pie\":\n          return PieChart;\n        case \"earth\":\n          return EarthChart;\n        default:\n          return BarChart;\n      }\n    },\n  },\n};\n</script>\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!./Chart.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!./Chart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Chart.vue?vue&type=template&id=5aeeaf8a&\"\nimport script from \"./Chart.vue?vue&type=script&lang=js&\"\nexport * from \"./Chart.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, staticRenderFns\nvar script = {}\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!./LineChart.vue?vue&type=style&index=0&id=48f6aed7&prod&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:\"container\",staticClass:\"lineChartContainer height-100\"},[(_vm.isEmpty)?_c('div',{staticClass:\"chart-no-data\"},[_vm._v(_vm._s(_vm.$t(\"CHART.NO_DATA\")))]):_vm._e(),_c('Loading',{attrs:{\"value\":_vm.loading,\"loading-color\":_vm.loadingColor}}),_c('div',{ref:\"linechart\",staticClass:\"chart\"})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div ref=\"container\" class=\"lineChartContainer height-100\">\n    <div v-if=\"isEmpty\" class=\"chart-no-data\">{{ $t(\"CHART.NO_DATA\") }}</div>\n    <Loading :value=\"loading\" :loading-color=\"loadingColor\" />\n    <div class=\"chart\" ref=\"linechart\" />\n  </div>\n</template>\n\n<script>\nimport * as d3 from \"d3\";\nimport Loading from \"@/components/Loading\";\n\nconst hex2rgb = (hexColor, a = 1) => {\n  if (hexColor.charAt(0) === \"#\") hexColor = hexColor.substr(1);\n  if (hexColor.length === 3)\n    hexColor =\n      hexColor.substr(0, 1) +\n      hexColor.substr(0, 1) +\n      hexColor.substr(1, 2) +\n      hexColor.substr(1, 2) +\n      hexColor.substr(2, 3) +\n      hexColor.substr(2, 3);\n  return `rgba(${parseInt(\n    `${hexColor.charAt(0)}${hexColor.charAt(1)}`,\n    16\n  )},${parseInt(`${hexColor.charAt(2)}${hexColor.charAt(3)}`, 16)},${parseInt(\n    `${hexColor.charAt(4)}${hexColor.charAt(5)}`,\n    16\n  )},${a})`;\n};\n\nexport default {\n  name: \"LineBarChart\",\n  components: {\n    Loading,\n  },\n  props: {\n    values: {\n      type: Array,\n      default: () => [],\n    },\n    loading: {\n      type: Boolean,\n    },\n    loadingColor: {\n      type: String,\n      default: \"white\",\n    },\n    theme: {\n      type: String,\n      default: \"light\"\n    }\n  },\n  data: () => ({\n    svg: null,\n    margin: { top: 20, right: 20, bottom: 20, left: 20 },\n    width: 200,\n    height: 300,\n    tooltip: null,\n    line: null,\n    area: null,\n    isEmpty: false,\n  }),\n  mounted() {\n    this.screensize();\n    this.init();\n  },\n  beforeDestroy() {\n    window.removeEventListener(\"resize\", this.resize);\n  },\n  watch: {\n    values: {\n      deep: true,\n      handler() {\n        this.init();\n      },\n    },\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.linechart;\n      if (chart) this.$refs.linechart.innerHTML = \"\";\n\n      const container = this.$refs.container;\n      if (container) {\n        this.width = container.clientWidth;\n        this.height = container.clientHeight;\n      }\n\n      if (this.width < 200) this.width = 200;\n      if (this.height < 200) this.height = 200;\n\n      this.isEmpty = true;\n      if (this.values && this.values.length > 0) {\n        const len = this.values\n          .map((v) => v.data.length > 0)\n          .filter((v) => v > 0).length;\n        if (len) {\n          this.isEmpty = false;\n        }\n      }\n      this.draw();\n    },\n\n    draw() {\n      const container = this.$refs.container;\n\n      var xScale = d3\n        .scaleBand()\n        .rangeRound([0, this.width])\n        .padding(0.9)\n        .domain(\n          this.values[0].data.map(function (d) {\n            return d.date;\n          })\n        );\n\n      var yScale = d3\n        .scaleLinear()\n        .rangeRound([this.height, 0])\n        .domain([\n          0,\n          d3.max(this.values[0].data, function (d) {\n            return d.value;\n          }),\n        ]);\n\n      this.x = d3\n        .scaleTime()\n        .domain(d3.extent(this.values[0].data, (d) => +new Date(d.date)))\n        .range([this.margin.left, this.width - this.margin.right - 1]);\n\n      this.xAxis = (g) =>\n        g\n          .attr(\n            \"transform\",\n            `translate(0, ${this.height - this.margin.bottom})`\n          )\n          .call(d3.axisBottom(xScale));\n\n      const max = d3.max(this.values[0].data.map((d) => d.value));\n      this.y = d3\n        .scaleLinear()\n        .domain([0, max + max * 0.3])\n        .range([this.height - this.margin.bottom, this.margin.top]);\n\n      this.yAxis = (g) =>\n        g\n          .call(d3.axisLeft(yScale).ticks(3))\n          .call((g) => g.select(\".domain\").remove())\n          .call((g) =>\n            g\n              .selectAll(\".tick text\")\n              .attr(\"transform\", `translate(${this.margin.left + 10},-8)`)\n              .attr(\"text-anchor\", `start`)\n          );\n\n      var svg = d3.create(\"svg\");\n\n      svg\n        .attr(\"width\", this.width)\n        .attr(\"height\", this.height)\n        .attr(\"viewbox\", [0, 0, this.width, this.height]);\n\n      // svg\n      //   .append(\"g\")\n      //   .call(this.yAxis)\n      //   .selectAll(\"line\")\n      //   .attr(\"stroke-width\", \"0.5px\")\n      //   .attr(\"stroke-opacity\", \"30%\")\n      //   .attr(\"x1\", this.margin.left)\n      //   .attr(\"x2\", this.width - this.margin.right);\n\n      // svg.append(\"g\").call(this.xAxis);\n\n      //legends\n\n      // svg\n      //   .selectAll(\"mydots\")\n      //   .data(this.values.map((d) => d.label))\n      //   .enter()\n      //   .append(\"circle\")\n      //   .attr(\"cx\", 40 + this.margin.left)\n      //   .attr(\"cy\", function (d, i) {\n      //     return 19 + i * 25;\n      //   }) // 20 is where the first dot appears. 25 is the distance between dots\n      //   .attr(\"r\", 7)\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\", 55 + this.margin.left)\n      //   .attr(\"y\", function (d, i) {\n      //     return 20 + i * 25;\n      //   })\n      //   .style(\"fill\", function (d) {\n      //     return color(d);\n      //   })\n      //   .text(function (d) {\n      //     return d;\n      //   })\n      //   .attr(\"text-anchor\", \"left\")\n      //   .style(\"alignment-baseline\", \"middle\");\n\n      // DRAWING EACH LINE\n\n      this.values.forEach((lineData, i) => {\n        // doesnt draw anything when no data\n        if (lineData && lineData.data && lineData.data.length === 0) return;\n\n        var xScale = d3\n          .scaleBand()\n          .rangeRound([0 - this.margin.left, this.width + this.margin.right])\n          .padding(0.93)\n          .domain(\n            lineData.data.map(function (d) {\n              return d.date;\n            })\n          );\n\n        var yScale = d3\n          .scaleLinear()\n          // .rangeRound([this.height, 0])\n          .range([this.height - this.margin.bottom, this.margin.top])\n          .domain([\n            0,\n            d3.max(lineData.data, function (d) {\n              return d.value;\n            }),\n          ]);\n\n        const colorStop = hex2rgb(lineData.color, 0);\n\n        //line\n        const line = d3\n          .line()\n          .curve(d3.curveMonotoneX)\n          .x((d) => xScale(d.date) + xScale.bandwidth() / 2)\n          .y((d) => yScale(d.value));\n\n        //area\n        const area = d3\n          .area()\n          .curve(d3.curveMonotoneX)\n          .x((d) => xScale(d.date) + xScale.bandwidth() / 2)\n          .y0(this.height - this.margin.bottom)\n          .y1((d) => yScale(d.value));\n\n        svg\n          .append(\"path\")\n          .datum(lineData.data)\n          .attr(\"fill\", \"none\")\n          .attr(\"stroke\", hex2rgb(\"#8F8AD1\", 0.17))\n          .attr(\"stroke-width\", 3)\n          .attr(\"d\", line);\n\n        svg\n          .append(\"linearGradient\")\n          .attr(\"id\", `area-gradient-${i}`)\n          .attr(\"gradientUnits\", \"userSpaceOnUse\")\n          .attr(\"x1\", 0)\n          .attr(\"y1\", this.y(0))\n          .attr(\"x2\", 0)\n          .attr(\"y2\", this.y(100))\n          .selectAll(\"stop\")\n          .data([\n            { offset: \"0%\", color: colorStop },\n            { offset: \"100%\", color: hex2rgb(lineData.color, this.theme === \"light\" ? 0.1 : 0.2) },\n          ])\n          .join(\"stop\")\n          .attr(\"offset\", (d) => d.offset)\n          .attr(\"stop-color\", (d) => d.color);\n\n        svg\n          .append(\"path\")\n          .datum(lineData.data)\n          .attr(\"style\", `fill: url(#area-gradient-${i})`)\n          .attr(\"d\", area);\n\n        //div for tooltip\n        var div = d3\n          .select(\"body\")\n          .append(\"div\")\n          .attr(\"class\", \"tooltip\")\n          .style(\"opacity\", 0)\n          .style(\"background-color\", this.theme === \"light\" ? \"white\" : lineData.color)\n          .style(\"color\", this.theme === \"light\" ? \"black\" : \"white\")\n          .attr(\"ref\", \"tooltip\");\n\n\n        //bar\n\n        var bar = svg.selectAll(\"rect\").data(lineData.data).enter().append(\"g\");\n\n        bar\n          .append(\"rect\")\n          .attr(\"x\", function (d) {\n            return xScale(d.date);\n          })\n          .attr(\"y\", function (d) {\n            return yScale(d.value);\n          })\n          .attr(\"width\", xScale.bandwidth())\n          .attr(\"height\", function (d) {\n            return container.clientHeight - yScale(d.value) - 20;\n          })\n          .attr(\"rx\", 6)\n          .attr(\"class\", function (d, i) {\n            if (i % 2) {\n              return \"bar-2\";\n            } else {\n              return \"bar-1\";\n            }\n          })\n          .on(\"mouseover\", function (d, i) {\n            d3.select(this).transition().duration(\"100\").attr(\"r\", 8);\n\n            var dot = this.getBoundingClientRect();\n            var containerWidth = d.view.outerWidth;\n            var tooltipWidth = div.node().getBoundingClientRect().width;\n\n            var tooltipX = dot.x - tooltipWidth / 2;\n            var tooltipY = dot.y - 55;\n\n            div\n              .html(`${+i.value.toFixed(2)} ${lineData.unit ? lineData.unit : \"\"}`)\n              .style(\"left\", `${tooltipX}px`)\n              .style(\"top\", `${tooltipY}px`);\n\n            div.transition().duration(100).style(\"opacity\", 1);\n          })\n          .on(\"mouseout\", function (d, i) {\n            d3.select(this).transition().duration(\"200\").attr(\"r\", 5);\n\n            div.transition().duration(\"200\").style(\"opacity\", 0);\n          });\n\n        lineData.data.forEach((value, i) => {\n          if (i === 0) return;\n          const dividerLine = svg.append(\"g\").attr(\"transform\", function (d) {\n            return (\n              \"translate(\" +\n              (xScale(value.date) - xScale.step() * xScale.padding() * 0.5) +\n              \", 0)\"\n            );\n          });\n\n          // append a line, same height as the chart\n          dividerLine\n            .append(\"line\")\n            .attr(\"y2\", this.height)\n            .style(\"stroke\", this.theme === \"light\" ?\" rgba(0,0,0,.08)\" : \"rgba(255,255,255,.05\")\n            .style(\"stroke-width\", 1);\n        });\n\n        svg\n          .selectAll(\".text\")\n          .data(lineData.data)\n          .enter()\n          .append(\"text\")\n          .attr(\"class\", \"label\")\n          .style(\"fill\", this.theme === \"light\" ? \"black\" : \"white\") \n          .attr(\"x\", function (d) {\n            return xScale(d.date);\n          })\n          .attr(\"y\", function (d) {\n            return 235;\n          })\n          .attr(\"dy\", \".75em\")\n          .attr(\"text-anchor\", \"middle\")\n          .text((d) => d.date)\n      });\n\n      this.$refs.linechart.append(svg.node());\n    },\n  },\n};\n</script>\n\n<style>\n.lineChartContainer {\n  position: relative;\n  min-height: 250px;\n}\n\n.chart-no-data {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  font-size: 16px;\n  opacity: 0.5;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\nsvg {\n  width: 100%;\n  min-height: 200px;\n}\n\n.tooltip {\n  position: absolute;\n  text-align: center;\n  padding: 0.5rem 1rem;\n  border: none;\n  /* border: 1px solid black; */\n  box-shadow: 0 0px 20px rgba(0,0,0,0.20);\n  border-radius: 8px;\n  pointer-events: none;\n  font-size: 1rem;\n  transform-origin: bottom center;\n  z-index: 20;\n}\n\n.bar-1 {\n  fill: #423d80;\n}\n\n.bar-2 {\n  fill: #f0d769;\n}\n\n.axis--x path {\n  display: none;\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!./LineBarChart.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!./LineBarChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LineBarChart.vue?vue&type=template&id=6e4c1284&\"\nimport script from \"./LineBarChart.vue?vue&type=script&lang=js&\"\nexport * from \"./LineBarChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./LineBarChart.vue?vue&type=style&index=0&id=6e4c1284&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"],"sourceRoot":""}