{"version":3,"sources":["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/LineChart.vue?a55b"],"names":["render","_vm","this","_c","_self","ref","staticClass","isEmpty","_v","_s","$t","_e","attrs","loading","loadingColor","staticRenderFns","hex2rgb","hexColor","a","name","components","Loading","props","values","type","default","data","svg","margin","top","right","bottom","left","width","height","tooltip","line","area","mounted","beforeDestroy","window","watch","deep","handler","methods","resize","screensize","init","map","v","filter","length","draw","domain","d3","range","g","attr","call","selectAll","append","enter","style","text","curve","x","d","y","datum","lineData","y0","y1","offset","color","join","on","dot","div","html","transition","component"],"mappings":"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","file":"js/chunk-7cc785df.3df24e9e.js","sourcesContent":["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!./LineChart.vue?vue&type=style&index=0&id=48f6aed7&prod&lang=css&\""],"sourceRoot":""}