{"version":3,"sources":["webpack:///./src/components/charts/LineBarChart.vue?1e8d","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","isEmpty","_v","_s","$t","_e","attrs","loading","loadingColor","staticRenderFns","hex2rgb","hexColor","a","name","components","Loading","props","values","type","default","theme","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","rangeRound","padding","domain","d3","range","g","attr","call","selectAll","lineData","curve","x","d","y","y0","y1","append","datum","offset","color","join","style","bar","xScale","on","div","html","dividerLine","enter","text","component"],"mappings":"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","file":"js/chunk-602dfcd2.b453fea0.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:\"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":""}