{"version":3,"sources":["webpack:///./src/components/miniapp/indices/GraphNav.vue?f60d","webpack:///src/components/miniapp/indices/GraphNav.vue","webpack:///./src/components/miniapp/indices/GraphNav.vue?1e89","webpack:///./src/components/miniapp/indices/GraphNav.vue","webpack:///./src/components/miniapp/indices/GraphNav.vue?d6d5"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_s","getStockCurrentPeriod","class","plus","computeColor","perfPerPeriod","minus","perfPerPeriodPercent","attrs","on","callProfessionalGraph","ref","onScroll","getStockPeriod","range","choosePeriod","_e","staticRenderFns","TH","d3","decimal","thousands","grouping","currency","dateTime","date","time","periods","days","shortDays","months","shortMonths","numberFormat","parts","num","toString","split","replace","join","parseDate","getDate","colorTheme","graphMarginPercentage","grey","profit","loss","margin","top","left","right","bottom","bgTop","focusStroke","lineStroke","axisStroke","circleRadius","tooltipWidth","tooltipHeight","driftRightMargin","driftTopMargin","tickMoveFactor","components","PeriodNavigation","data","firstPaint","props","id","default","computed","getIndiceNav","length","diffVal","diffValFormat","diffValPercent","Infinity","diffValToFixed","checkNavData","watch","$route","methods","periodScroll","scrollLeft","$refs","periodNavigation","classList","remove","add","$emit","includes","graphHeight","graphWidth","graphRatio","renderGraph","drawGraph","unitType","d","formattedValue","svgWidth","document","getElementById","clientWidth","svgHeight","spaceNavLineElem","style","height","xRange","yRange","xAxis","yAxis","sizeUpdate","rangeUpdate","axisUpdate","formatValue","make_y_axis","isFirst","vis","focusCircle","tooltip","select","call","selectAll","bisectDate","mouseOver","elemFocusLine","elemFocusCircle","elemFocusTooltip","mouseOut","mouseMove","mouseEvent","handleMove","touchMove","d0","d1","x0","attr","constants","xPad","yPad","v","elemFocusTooltipNav","text","helpers","elemFocusTooltipDate","fontSize","tickUpdate","pl","lineGen","formattedLineData","updateAxisAndGraph","component"],"mappings":"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AGIA,UAzEJ,SAyEA,OAYA,IACA,IACA,IAdA,OACA,YACA,+BAEA,oBACA,EACA,gDACA,uBACA,mCACA,mDAOA,sCACA,sCACA,8CACA,8CAGA,cACQ,GAAgB,SAAZC,EACF,OAAOC,EACjB,WACA,WACA,qCAEU,IAAV,OACU,OAAOC,EACjB,qBACA,oBACA,yBAIA,aACQC,EAAWC,SAASC,eAAe,yBAAyBC,YAC5DC,EAAY,EAApB,cACQC,EAAiBC,MAAMC,OAASH,EAAY,MAGpD,aACQI,EAAStF,EAAjB,OAEA,wCACA,6BAAU,OAAV,QACA,QACA,OACA,kBAGQ,IAAR,gCACQuF,EAASvF,EAAjB,OAEA,wCACA,mBAGA,aACQwF,EAAQxF,EAAhB,KACA,GACA,iCACA,kBACA,cAEQyF,EAAQzF,EAAhB,KACA,GACA,cACA,UAGM0F,IACAC,IACAC,IAGA,IAAN,WAEA,cACA,eAAQ,OAAR,UACA,eAAQ,OAAR,UAEUC,EAAc7F,EAAxB,YAGU8F,EAAc,WAChB,OAAO9F,EAAf,kBAGM,GAAI+F,EAAS,CACXC,EACR,gBACA,uBACA,QAEQA,EACR,gBACA,uBACA,sCACA,oBACA,QAEQA,EACR,YACA,qBACA,sBACA,KACA,IACA,kBACA,gBAIQA,EACR,mBACA,0BACA,aACA,cACA,eACA,+BACA,kCACA,oBAGQA,EACR,eACA,2BACA,wBACA,6BACA,mCACA,2BACA,yBACA,wBAGQ,IAAR,IACA,YACA,6BACA,wBAGQC,EACR,iBACA,2BACA,qBAGQA,EACR,iBACA,6BACA,yBAGQ,IAAR,IACA,YACA,8BACA,wBAGQC,EACR,eACA,6BACA,4BACA,6BACA,+BAGQA,EACR,eACA,aACA,aACA,4BACA,2BACA,qBACA,0BACA,gBAGQA,EACR,eACA,6BACA,aACA,aACA,2BACA,oBACA,0BACA,iBAGQA,EACR,eACA,6BACA,aACA,aACA,oBACA,2CACA,yBACA,eAGQF,EAAIG,OAAO,MAAMC,KAAKZ,GAEtBQ,EAAIK,UAAU,eAAejB,MAAM,UAAW,QAE9CY,EAAIK,UAAU,iBAAiBjB,MAAM,UAAW,QAEhDY,EAAIK,UAAU,kBAAkBjB,MAAM,UAAW,QAGjDY,EACR,aACA,oBACA,QAGQA,EACR,gBACA,qBACA,sBACA,KACA,IACA,kBACA,gBAIQA,EACR,qBACA,aACA,cACA,eACA,+BACA,kCACA,oBAGMhG,EAAN,wCAKM,IAAN,0BACA,4BACA,6BACA,2BACA,4BAGA,GACQsG,WAAY,WAApB,OACA,oBACY,OAAO1B,EAAEA,KACrB,MACQ2B,UAAW,WACTC,EAAcpB,MAAM,UAAW,MAC/BqB,EAAgBrB,MAAM,UAAW,MACjCsB,EAAiBtB,MAAM,UAAW,OAEpCuB,SAAU,WACRH,EAAcpB,MAAM,UAAW,QAC/BqB,EAAgBrB,MAAM,UAAW,QACjCsB,EAAiBtB,MAAM,UAAW,SAEpCwB,UAAW,WACTC,EAAWC,WAAW9G,EAAhC,gCAEQ+G,UAAW,WACTF,EAAWC,WAAW9G,EAAhC,sCAEQ8G,WAAY,SAApB,KACUN,EAAcpB,MAAM,UAAW,MAC/BqB,EAAgBrB,MAAM,UAAW,MACjCsB,EAAiBtB,MAAM,UAAW,MAElC,IAAV,cACA,wBACA,SACA,OAEU,GAAU,MAAN4B,GAAoB,MAANC,EAAY,CAC5B,IAAZ,YACgC,GAAhB3B,EAAO0B,EAAGpC,IAAWU,EAAO4B,GAAM5B,EAAO2B,EAAGrC,GAAK,IACnDA,EAAIoC,GAGNR,EAAcW,KAC1B,YACA,2BAEYV,EAAgBU,KAC5B,YACA,oCAKY,IAAZ,IACA,IACgBrC,EAAWQ,EAAOV,EAAEA,GAAKwC,EAAU/E,eACrCgF,GAAQD,EAAU/E,aAA4C,EAA7B+E,EAAU7E,kBAIzD,EACA,gBACA,eACA,OACA,kBAEc+E,GAAQF,EAAU9E,cAAgB,GAGhCiD,EAAOX,EAAE2C,GAAKH,EAAU9E,gBAC1BgF,EAAOF,EAAU9E,cAAgB,GAGnCkF,EAAoBC,KAAKC,EAAQ7G,aAAa+D,EAAE2C,IAChDI,EAAqBF,KAAKC,EAAQrG,QAAQuD,EAAEA,IAG5C8B,EAAiBS,KAC7B,YACA,cACA,6BACA,KACA,2BACA,QAMWpB,GACHC,EAAIG,OAAO,qBAAqBjC,SAIlC8B,EACN,eACA,iCACA,oBACA,6BACA,yBACA,gBACA,KACA,SACA,kCAEA,4BACA,0BACA,4BACA,+BAIM,IAAN,aAeQ,GAdAA,EACR,wBACA,2BACA,aACA,qCACA,yBACA,oBAEQA,EACR,0CACA,+BAEQA,EAAIK,UAAU,iBAAiBc,KAAK,IAAK,EAAjD,kBAEYrC,EAAW,IACb,IAAI8C,EAAW,YAEXA,EAAW,OAEjB5B,EACR,2BACA,qBACA,0BAEQA,EACR,0BACA,aACA,aACA,aACA,aAEQA,EACR,yBACA,wBACA,aAEQjB,SAASC,eAAe,yBAAyBI,MAAMC,OAC/D,yBAGMwC,IAGA7B,EAAIG,OAAO,iBAAiBgB,KAAK,OAAQO,EAAQpG,WAAWwG,IAG5D,IAAN,aACQ9B,EAAIG,OAAO,MAAMC,KAAKZ,GAEtBQ,EACR,aACA,oBACA,sCACA,QAEQA,EAAIG,OAAO,cAAcgB,KAAK,IAAKY,EAAQC,IAE3ChC,EACR,gBACA,qBACA,sBACA,KACA,IACA,kBACA,iBAIWD,GACH/F,EAAR,+BAGMA,EAAN,qCACQ0F,IACAC,IACAC,IACAqC,IACAJ,WCpuBwW,I,wBCQ5WK,EAAY,eACd,EACA9J,EACA0B,GACA,EACA,KACA,WACA,MAIa,aAAAoI,E,6CCnBf,yBAA6mB,EAAG,G","file":"js/chunk-10b1848b.27297a3d.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"graph-d3\"},[_c('div',{staticClass:\"graph-row\"},[_c('div',{staticClass:\"header-left\"},[_c('h4',{staticClass:\"period\"},[_vm._v(\" \"+_vm._s(_vm.getStockCurrentPeriod)+\" \"),_c('span',[_vm._v(\":\")])]),_c('span',{staticClass:\"price\",class:{plus: _vm.computeColor(_vm.perfPerPeriod), minus: !_vm.computeColor(_vm.perfPerPeriod)}},[_vm._v(_vm._s(_vm.perfPerPeriod)+\"฿\")]),_c('span',{staticClass:\"percent\",class:{plus: _vm.computeColor(_vm.perfPerPeriodPercent), minus: !_vm.computeColor(_vm.perfPerPeriodPercent)}},[_vm._v(\"(\"+_vm._s(_vm.perfPerPeriodPercent ? _vm.perfPerPeriodPercent + '%' : 'ไม่สามารถคำนวนค่าได้')+\")\")])]),_c('div',{staticClass:\"header-right\"},[_c('a',{staticClass:\"ctn-graph-professional\",attrs:{\"data-action\":\"index_trading_view\",\"href\":\"javascript:;\"},on:{\"click\":_vm.callProfessionalGraph}},[_c('i',{staticClass:\"fas fa-chart-bar\"}),_vm._v(\" กราฟเทคนิค \")])])]),_c('div',{staticClass:\"graph-area\",attrs:{\"id\":\"graph-area\"}},[_c('svg',{attrs:{\"id\":\"graph-d3-line-indices\",\"width\":\"100%\"}})]),_c('div',{ref:\"periodNavigation\",staticClass:\"select-navigation fade-right\"},[(_vm.getStockPeriod)?_c('div',{ref:\"periodScroll\",staticClass:\"select-period\",on:{\"scroll\":_vm.onScroll}},[_c('period-navigation',{attrs:{\"activePosition\":\"top\",\"data-action\":\"change_index_period\",\"arrPeriod\":_vm.getStockPeriod.range,\"alias\":\"period\",\"defaultItem\":_vm.getStockCurrentPeriod,\"slidePerPage\":8},on:{\"select-data\":_vm.choosePeriod}})],1):_vm._e()])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"graph-d3\">\n    <div class=\"graph-row\">\n      <div class=\"header-left\">\n        <h4 class=\"period\">\n          {{getStockCurrentPeriod}}\n          <span>:</span>\n        </h4>\n        <span\n          class=\"price\"\n          :class=\"{plus: computeColor(perfPerPeriod), minus: !computeColor(perfPerPeriod)}\"\n        >{{ perfPerPeriod }}฿</span>\n        <span\n          class=\"percent\"\n          :class=\"{plus: computeColor(perfPerPeriodPercent), minus: !computeColor(perfPerPeriodPercent)}\"\n        >({{ perfPerPeriodPercent ? perfPerPeriodPercent + '%' : 'ไม่สามารถคำนวนค่าได้' }})</span>\n      </div>\n      <div class=\"header-right\">\n        <a\n          data-action=\"index_trading_view\"\n          class=\"ctn-graph-professional\"\n          href=\"javascript:;\"\n          @click=\"callProfessionalGraph\"\n        >\n          <i class=\"fas fa-chart-bar\"></i> กราฟเทคนิค\n        </a>\n      </div>\n    </div>\n    <div class=\"graph-area\" id=\"graph-area\">\n      <svg id=\"graph-d3-line-indices\" width=\"100%\" />\n    </div>\n    <div class=\"select-navigation fade-right\" ref=\"periodNavigation\">\n      <div class=\"select-period\" v-if=\"getStockPeriod\" @scroll=\"onScroll\" ref=\"periodScroll\">\n        <period-navigation\n         activePosition=\"top\"\n          data-action=\"change_index_period\"\n          :arrPeriod=\"getStockPeriod.range\"\n          :alias=\"`period`\"\n          @select-data=\"choosePeriod\"\n          :defaultItem=\"getStockCurrentPeriod\"\n          :slidePerPage=\"8\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapGetters, mapActions } from \"vuex\";\nimport * as d3 from \"d3\";\nimport PeriodNavigation from \"../../../components/miniapp/global/PeriodNavigation.vue\";\n\n// Helper Functions\nlet helpers = {\n  TH: d3.timeFormatDefaultLocale({\n    decimal: \".\",\n    thousands: \",\",\n    grouping: [3],\n    currency: [\"$\", \"\"],\n    dateTime: \"%a %b %e %X %Y\",\n    date: \"%d/%m/%Y\",\n    time: \"%H:%M:%S\",\n    periods: [\"AM\", \"PM\"],\n    days: [\n      \"Sunday\",\n      \"Monday\",\n      \"Tuesday\",\n      \"Wednesday\",\n      \"Thursday\",\n      \"Friday\",\n      \"Saturday\"\n    ],\n    shortDays: [\"อ\", \"จ\", \"อ\", \"พ\", \"พฤ\", \"ศ\", \"ส\"],\n    months: [\n      \"มกราคม\",\n      \"กุมภาพันธ์\",\n      \"มีนาคม\",\n      \"เมษายน\",\n      \"พฤษภาคม\",\n      \"มิถุนายน\",\n      \"กรกฎาคม\",\n      \"สิงหาคม\",\n      \"กันยายน\",\n      \"ตุลาคม\",\n      \"พฤศจิกายน\",\n      \"ธันวาคม\"\n    ],\n    shortMonths: [\n      \"ม.ค.\",\n      \"ก.พ.\",\n      \"มี.ค.\",\n      \"เม.ย.\",\n      \"พ.ค.\",\n      \"มิ.ย.\",\n      \"ก.ค.\",\n      \"ส.ค.\",\n      \"ก.ย.\",\n      \"ต.ค.\",\n      \"พ.ย.\",\n      \"ธ.ค.\"\n    ]\n  }),\n\n  numberFormat: function(num) {\n    var parts = num.toString().split(\".\");\n    parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n    return parts.join(\".\");\n  },\n  parseDate: d3.timeParse(\"%Y-%m-%d\"),\n  getDate: d3.timeFormat(\"%d/%m/%y\"),\n  colorTheme: pl => (pl >= 0 ? constants.profit : constants.loss)\n};\n\n// Constant\nlet constants = {\n  graphMarginPercentage: 0.1,\n\n  // color and styling\n  grey: \"#B0B0B0\",\n  profit: \"#17c161\",\n  loss: \"#da1616\",\n\n  margin: {\n    top: 20,\n    left: 0,\n    right: 0,\n    bottom: 20,\n    bgTop: 12\n  },\n\n  // Focusing\n  focusStroke: 1.5,\n  lineStroke: 2,\n  axisStroke: 2,\n  circleRadius: 4.5,\n\n  // Tooltip\n  tooltipWidth: 120,\n  tooltipHeight: 45,\n  driftRightMargin: 10,\n  driftTopMargin: 22.5,\n\n  // Tick Styling\n  tickMoveFactor: 34\n};\n\nexport default {\n  components:{\n    PeriodNavigation\n  },\n  data() {\n    return {\n      firstPaint: true\n    };\n  },\n  props: {\n    id: {\n      default: \"\"\n    }\n  },\n  computed: {\n    perfPerPeriod() {\n      if (this.getIndiceNav && this.getIndiceNav.length > 0) {\n        let firstObj = this.getIndiceNav[0];\n        let lastObj = this.getIndiceNav[this.getIndiceNav.length - 1];\n        let diffVal = parseFloat(lastObj.value) - parseFloat(firstObj.value);\n        let diffValToFixed = diffVal.toFixed(4);\n        let parts = diffValToFixed.toString().split(\".\");\n        parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n        let diffValFormat = parts.join(\".\");\n        if (diffVal >= 0) {\n          diffValFormat = \"+\" + diffValFormat;\n        }\n        if (diffValFormat) {\n          return diffValFormat;\n        }\n      }\n      return 0;\n    },\n    perfPerPeriodPercent() {\n      if (this.getIndiceNav && this.getIndiceNav.length > 0) {\n        let firstObj = this.getIndiceNav[0];\n        let lastObj = this.getIndiceNav[this.getIndiceNav.length - 1];\n\n        let firstVal = parseFloat(firstObj.value);\n        let lastVal = parseFloat(lastObj.value);\n\n        let diffVal = lastVal - firstVal;\n        let diffValPercent = (diffVal / firstVal) * 100;\n        if (diffValPercent === Infinity) {\n          return false\n        }\n        let diffValToFixed = diffValPercent.toFixed(2);\n\n        if (diffVal >= 0) {\n          diffValToFixed = \"+\" + diffValToFixed;\n        }\n\n        if (diffValToFixed) {\n          return diffValToFixed;\n        }\n      }\n      return 0;\n    },\n    checkNavData() {\n      return this.getIndiceNav.length > 0;\n    },\n    ...mapGetters(\"stock\", [\n      \"getStockCurrentUnitType\",\n      \"getStockCurrentPeriod\",\n      \"getStockPeriod\",\n    ]),\n    ...mapGetters(\"indice\", [\n      \"getIndiceNav\", \n      \"getIndiceQuote\"\n    ])\n  },\n  watch: {\n    $route: async function(newRoute) {\n      if (newRoute.query.name) {\n        await this.getNavData(newRoute.query.name);\n        await this.renderGraph(); // TODO: Clearify why draw graph twice\n      }\n    },\n    async getIndiceNav() {\n      await this.renderGraph();\n    }\n  },\n  async mounted() {\n    await this.getNavData();\n    await this.renderGraph();\n  },\n  methods: {\n    ...mapActions(\"stock\", [\n      \"findStockNav\",\n      \"saveStockPeriod\",\n      \"saveStockUnitType\"\n    ]),\n    ...mapActions(\"indice\", [\"findIndiceNav\"]),\n    onScroll() {\n      let periodScroll = this.$refs.periodScroll;\n      let periodList = this.$refs.periodList;\n      if (periodScroll && periodScroll.scrollLeft < 0) {\n        this.$refs.periodNavigation.classList.remove(\"fade-left\");\n        this.$refs.periodNavigation.classList.add(\"fade-right\");\n      } else if (periodScroll && periodScroll.scrollLeft > 0) {\n        this.$refs.periodNavigation.classList.add(\"fade-right\");\n        this.$refs.periodNavigation.classList.add(\"fade-left\");\n      } else {\n        this.$refs.periodNavigation.classList.add(\"fade-right\");\n        this.$refs.periodNavigation.classList.remove(\"fade-left\");\n      }\n      if (\n        periodList.offsetWidth - periodScroll.offsetWidth ==\n        periodScroll.scrollLeft\n      ) {\n        this.$refs.periodNavigation.classList.remove(\"fade-right\");\n      }\n    },\n    callProfessionalGraph() {\n      this.$emit(\"call-tradingview\", true);\n    },\n    async getNavData(name) {\n      let obj = {\n        stockName: name || this.id,\n        period: this.getStockCurrentPeriod,\n        type: this.getStockCurrentUnitType\n      };\n      await this.findIndiceNav(obj);\n    },\n    async choosePeriod(period) {\n      await this.saveStockPeriod(period);\n      await this.getNavData();\n    },\n    async chooseUnitType(type) {\n      await this.saveStockUnitType(type);\n      await this.getNavData();\n    },\n    computeColor(num) {\n      if (num) {\n        if (num.includes(\"-\")) {\n          return false;\n        } else {\n          return true;\n        }\n      }\n    },\n    graphHeight() {\n      let graphWidth = document.getElementById(\"graph-d3-line-indices\")\n        .clientWidth;\n      let graphRatio = graphWidth > 760 ? 0.5 : 0.6;\n\n      return graphWidth * graphRatio;\n    },\n    renderGraph() {\n      if (!this.checkNavData) {\n        return;\n      }\n      if (this.firstPaint) {\n        this.drawGraph({ isFirst: true });\n        this.firstPaint = false;\n      } else {\n        this.drawGraph({ isFirst: false });\n      }\n    },\n    drawGraph(options) {\n      let isFirst = options.isFirst;\n      const unitType = this.getStockCurrentUnitType;\n      // Preparing Data\n      let formattedLineData = this.getIndiceNav;\n      let pl =\n        this.getIndiceNav[this.getIndiceNav.length - 1].v -\n        this.getIndiceNav[0].v;\n      let vis = d3.select(\"#graph-d3-line-indices\");\n      let spaceNavLineElem = document.getElementById(\"graph-d3-line-indices\");\n\n      // Prepare range and domain\n      let svgWidth, svgHeight;\n      let xRange, yRange;\n      let xAxis, yAxis;\n\n      let xMin = d3.min(formattedLineData, d => d.d);\n      let xMax = d3.max(formattedLineData, d => d.d);\n      let yMin = d3.min(formattedLineData, d => Number(d.v));\n      let yMax = d3.max(formattedLineData, d => Number(d.v));\n\n      //manage text in ticks\n      let formatCurrency = function(d) {\n        if (unitType == \"price\") {\n          return d\n            .toFixed(2)\n            .toString()\n            .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n        } else {\n          let formattedValue = formatValue(d);\n          return formattedValue\n            .replace(\"M\", \" ล้าน\")\n            .replace(\"k\", \",000\")\n            .replace(\"G\", \" พันล้าน\");\n        }\n      };\n\n      let sizeUpdate = () => {\n        svgWidth = document.getElementById(\"graph-d3-line-indices\").clientWidth;\n        svgHeight = this.graphHeight();\n        spaceNavLineElem.style.height = svgHeight + \"px\";\n      };\n\n      let rangeUpdate = () => {\n        xRange = d3\n          .scaleTime()\n          .range([constants.margin.left, svgWidth - constants.margin.right])\n          .domain(d3.extent(formattedLineData, d => d.d))\n          .domain([\n            formattedLineData[0].d,\n            formattedLineData[formattedLineData.length - 1].d\n          ]);\n\n        let graphMargin = (yMax - yMin) * constants.graphMarginPercentage;\n        yRange = d3\n          .scaleLinear()\n          .range([constants.margin.bottom, svgHeight - constants.margin.top])\n          .domain([yMax + graphMargin, yMin - graphMargin]);\n      };\n\n      let axisUpdate = () => {\n        xAxis = d3\n          .axisBottom(xRange)\n          .tickFormat(helpers.TH.format(\"%b %Y\"))\n          .tickValues([xMin, xMax])\n          .tickSize([0]);\n\n        yAxis = d3\n          .axisRight(yRange)\n          .tickFormat(formatCurrency)\n          .ticks(3);\n      };\n\n      sizeUpdate();\n      rangeUpdate();\n      axisUpdate();\n\n      // Appending or Changing Element\n      let lineGen = d3\n        .line()\n        .curve(d3.curveLinear) //http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8\n        .x(d => xRange(d.d))\n        .y(d => yRange(d.v));\n\n      var formatValue = d3.format(\".2s\");\n\n      // y Axis\n      var make_y_axis = function() {\n        return d3.axisLeft(yRange).ticks(3);\n      };\n\n      if (isFirst) {\n        vis\n          .append(\"svg:g\")\n          .attr(\"class\", \"x axis\")\n          .call(xAxis);\n\n        vis\n          .append(\"svg:g\")\n          .attr(\"class\", \"y axis\")\n          .attr(\"transform\", \"translate(-20, 0)\")\n          .attr(\"fill\", \"none\")\n          .call(yAxis);\n\n        vis\n          .append(\"g\")\n          .attr(\"class\", \"grid\")\n          .style(\"opacity\", \".2\")\n          .call(\n            make_y_axis()\n              .tickSize(0 - svgWidth, 0, 0)\n              .tickFormat(\"\")\n          );\n\n        // Data Line\n        vis\n          .append(\"svg:path\")\n          .attr(\"class\", \"line-data\")\n          .transition()\n          .duration(100)\n          .attr(\"d\", lineGen(formattedLineData))\n          .attr(\"stroke\", helpers.colorTheme(pl))\n          .attr(\"stroke-width\", constants.lineStroke)\n          .attr(\"fill\", \"none\");\n\n        // Line on focus\n        vis\n          .append(\"line\")\n          .attr(\"class\", \"focus-line\")\n          .attr(\"y1\", constants.margin.top)\n          .attr(\"y2\", svgHeight - constants.margin.bottom)\n          .attr(\"stroke-width\", constants.focusStroke)\n          .attr(\"class\", \"focus-line\")\n          .attr(\"stroke\", \"#999999\")\n          .style(\"display\", \"none\");\n\n        // Circle\n        let focusCircle = vis\n          .append(\"g\")\n          .attr(\"class\", \"focus-circle\")\n          .style(\"display\", \"none\");\n\n        // Circle Background\n        focusCircle\n          .append(\"circle\")\n          .attr(\"r\", constants.circleRadius + 2)\n          .attr(\"fill\", \"white\");\n\n        // Circle Inside\n        focusCircle\n          .append(\"circle\")\n          .attr(\"class\", \"inner-circle\")\n          .attr(\"r\", constants.circleRadius);\n\n        // Tooltip\n        let tooltip = vis\n          .append(\"g\")\n          .attr(\"class\", \"focus-tooltip\")\n          .style(\"display\", \"none\");\n\n        // Tooltip background\n        tooltip\n          .append(\"rect\")\n          .attr(\"class\", \"tooltip-rect\")\n          .attr(\"fill-opacity\", \"0.85\")\n          .attr(\"width\", constants.tooltipWidth)\n          .attr(\"height\", constants.tooltipHeight);\n\n        // Tooltip nav data\n        tooltip\n          .append(\"text\")\n          .attr(\"x\", 10)\n          .attr(\"y\", 20)\n          .attr(\"class\", \"tooltip-nav\")\n          .attr(\"text-anchor\", \"left\")\n          .attr(\"fill\", \"white\")\n          .style(\"font-size\", \"14px\")\n          .text(\"10.2464\");\n\n        // Tooltip date\n        tooltip\n          .append(\"text\")\n          .attr(\"class\", \"tooltip-date\")\n          .attr(\"x\", 25)\n          .attr(\"y\", 35)\n          .attr(\"text-anchor\", \"left\")\n          .attr(\"fill\", constants.grey)\n          .style(\"font-size\", \"12px\")\n          .text(\"12/03/07\");\n\n        // Tooltip icon\n        tooltip\n          .append(\"text\")\n          .attr(\"class\", \"tooltip-logo\")\n          .attr(\"x\", 12)\n          .attr(\"y\", 35)\n          .attr(\"fill\", constants.grey)\n          .attr(\"font-family\", '\"Font Awesome 5 Pro\"')\n          .attr(\"font-size\", \"12px\")\n          .text(\"\\uf017\");\n      } else {\n        // X Axis\n        vis.select(\".x\").call(xAxis);\n\n        vis.selectAll(\".focus-line\").style(\"display\", \"none\");\n\n        vis.selectAll(\".focus-circle\").style(\"display\", \"none\");\n\n        vis.selectAll(\".focus-tooltip\").style(\"display\", \"none\");\n\n        // y Axis\n        vis\n          .select(\".y\")\n          .attr(\"fill\", \"none\")\n          .call(yAxis);\n\n        // grid\n        vis\n          .select(\".grid\")\n          .attr(\"class\", \"grid\")\n          .style(\"opacity\", \".2\")\n          .call(\n            make_y_axis()\n              .tickSize(0 - svgWidth, 0, 0)\n              .tickFormat(\"\")\n          );\n\n        // Data Line\n        vis\n          .select(\".line-data\")\n          .transition()\n          .duration(500)\n          .attr(\"d\", lineGen(formattedLineData))\n          .attr(\"stroke\", helpers.colorTheme(pl))\n          .attr(\"stroke-width\", constants.lineStroke)\n          .attr(\"fill\", \"none\");\n      }\n\n      d3.selectAll(\".domain\").style(\"display\", \"none\");\n\n      // Handling mouse event for focus tooltip\n\n      //cache for performance\n      let elemFocusLine = vis.select(\".focus-line\");\n      let elemFocusCircle = vis.select(\".focus-circle\");\n      let elemFocusTooltip = vis.select(\".focus-tooltip\");\n      let elemFocusTooltipNav = vis.select(\".tooltip-nav\");\n      let elemFocusTooltipDate = vis.select(\".tooltip-date\");\n\n      // Helpers function\n      let mouseEvent = {\n        bisectDate: () =>\n          d3.bisector(function(d) {\n            return d.d;\n          }).left,\n        mouseOver: () => {\n          elemFocusLine.style(\"display\", null);\n          elemFocusCircle.style(\"display\", null);\n          elemFocusTooltip.style(\"display\", null);\n        },\n        mouseOut: () => {\n          elemFocusLine.style(\"display\", \"none\");\n          elemFocusCircle.style(\"display\", \"none\");\n          elemFocusTooltip.style(\"display\", \"none\");\n        },\n        mouseMove: function() {\n          mouseEvent.handleMove(d3.mouse(this)[0], d3.mouse(this)[1]);\n        },\n        touchMove: function() {\n          mouseEvent.handleMove(d3.touches(this)[0][0], d3.touches(this)[0][1]);\n        },\n        handleMove: (xPos, yPos) => {\n          elemFocusLine.style(\"display\", null);\n          elemFocusCircle.style(\"display\", null);\n          elemFocusTooltip.style(\"display\", null);\n\n          let x0 = xRange.invert(xPos),\n            i = mouseEvent.bisectDate()(formattedLineData, x0, 1),\n            d0 = formattedLineData[i - 1],\n            d1 = formattedLineData[i];\n\n          if (d0 != null && d1 != null) {\n            let d = x0 > d0.d ? d1 : d0;\n            if (xRange(d0.d) == 0 && xRange(x0) < xRange(d1.d) / 2) {\n              d = d0;\n            }\n\n            elemFocusLine.attr(\n              \"transform\",\n              \"translate(\" + xRange(d.d) + \",\" + 0 + \")\"\n            );\n            elemFocusCircle.attr(\n              \"transform\",\n              \"translate(\" + xRange(d.d) + \",\" + yRange(d.v) + \")\"\n            );\n\n            // Tooltip move\n            // Modify padding for displaying\n            let xPad = 0,\n              yPad = 0;\n            if (svgWidth - xRange(d.d) < constants.tooltipWidth) {\n              xPad = -constants.tooltipWidth - constants.driftRightMargin * 2;\n            }\n\n            if (\n              svgHeight -\n                constants.margin.bottom -\n                constants.margin.bgTop -\n                yRange(d.v) <\n              constants.tooltipHeight\n            ) {\n              yPad = -constants.tooltipHeight / 2;\n            }\n\n            if (yRange(d.v) < constants.tooltipHeight) {\n              yPad = constants.tooltipHeight / 2;\n            }\n\n            elemFocusTooltipNav.text(helpers.numberFormat(d.v));\n            elemFocusTooltipDate.text(helpers.getDate(d.d));\n\n            // elemFocusTooltip.attr(\"transform\", \"translate(\" + xRange(d.d+xPad) + \",\" + yRange(d.v+yPad) + \")\")\n            elemFocusTooltip.attr(\n              \"transform\",\n              \"translate(\" +\n                (xRange(d.d) + xPad + constants.driftRightMargin) +\n                \",\" +\n                (yRange(d.v) + yPad - constants.driftTopMargin) +\n                \")\"\n            );\n          }\n        }\n      };\n\n      if (!isFirst) {\n        vis.select(\".focusing-overlay\").remove();\n      }\n\n      // Overlay Element\n      vis\n        .append(\"rect\")\n        .attr(\"class\", \"focusing-overlay\")\n        .attr(\"fill\", \"none\")\n        .attr(\"pointer-events\", \"all\")\n        .attr(\"y\", constants.margin.bgTop)\n        .attr(\"width\", svgWidth)\n        .attr(\n          \"height\",\n          svgHeight - constants.margin.bottom - constants.margin.bgTop\n        )\n        .on(\"mouseover\", mouseEvent.mouseOver)\n        .on(\"mouseout\", mouseEvent.mouseOut)\n        .on(\"mousemove\", mouseEvent.mouseMove)\n        .on(\"touchmove\", mouseEvent.touchMove, true);\n\n      // Styling\n      // First and last tick\n      let tickUpdate = () => {\n        vis\n          .selectAll(\".tick text\")\n          .attr(\"x\", constants.tickMoveFactor)\n          .attr(\"y\", 10)\n          .attr(\"font-family\", '\"DBHeaventRez\"')\n          .attr(\"font-size\", \"14px\")\n          .attr(\"fill\", constants.grey);\n\n        vis\n          .selectAll(\".x .tick:nth-of-type(2) text\")\n          .attr(\"x\", \"-\" + constants.tickMoveFactor);\n\n        vis.selectAll(\".x .tick text\").attr(\"y\", this.graphHeight() + 20);\n\n        if (svgWidth < 450) {\n          var fontSize = \"12px\";\n        } else {\n          var fontSize = \"16px\";\n        }\n        vis\n          .selectAll(\".y .tick text\")\n          .style(\"font-size\", fontSize)\n          .style(\"font-size\", \"14px\");\n\n        vis\n          .selectAll(\".x-axis-line\")\n          .attr(\"x1\", 0)\n          .attr(\"x2\", svgWidth)\n          .attr(\"y1\", svgHeight)\n          .attr(\"y2\", svgHeight);\n\n        vis\n          .selectAll(\".focus-line\")\n          .attr(\"y1\", constants.margin.top)\n          .attr(\"y2\", svgHeight);\n\n        document.getElementById(\"graph-d3-line-indices\").style.height =\n          this.graphHeight() + 30 + \"px\";\n      };\n\n      tickUpdate();\n\n      // Inner circle focusing\n      vis.select(\".inner-circle\").attr(\"fill\", helpers.colorTheme(pl));\n\n      // Responsive Event for graph and axis\n      let updateAxisAndGraph = () => {\n        vis.select(\".x\").call(xAxis);\n\n        vis\n          .select(\".y\")\n          .attr(\"fill\", \"none\")\n          .attr(\"transform\", \"translate(-20, 0)\")\n          .call(yAxis);\n\n        vis.select(\".line-data\").attr(\"d\", lineGen(formattedLineData));\n\n        vis\n          .select(\".grid\")\n          .attr(\"class\", \"grid\")\n          .style(\"opacity\", \".2\")\n          .call(\n            make_y_axis()\n              .tickSize(0 - svgWidth, 0, 0)\n              .tickFormat(\"\")\n          );\n      };\n\n      if (!isFirst) {\n        d3.select(window).on(\"resize\", null);\n      }\n\n      d3.select(window).on(\"resize\", () => {\n        sizeUpdate();\n        rangeUpdate();\n        axisUpdate();\n        updateAxisAndGraph();\n        tickUpdate();\n      });\n    }\n  }\n};\n</script>\n<style>\n</style>\n\n<style lang=\"scss\" scoped>\n.graph-d3 {\n  .graph-row {\n    @extend %container-style;\n    margin-bottom: 16px;\n    .header-left {\n      @include finCol(7, 12, 0px, middle, true, true);\n      .select-unit-type {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        position: relative;\n        display: inline-block;\n        &:after {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          bottom: 0;\n          height: 4px;\n          width: 100%;\n          background-color: $color-light-grey;\n        }\n        li {\n          display: inline-block;\n          @extend %font-size-ss;\n          padding: 13px 8px;\n          color: $color-secondary-text;\n        }\n        .active {\n          position: relative;\n          color: $color-normal-text;\n          &:after {\n            content: \"\";\n            position: absolute;\n            left: 0;\n            bottom: 0;\n            height: 4px;\n            width: 100%;\n            background-color: $color-normal-text;\n            z-index: 1;\n          }\n        }\n      }\n    }\n    .header-right {\n      @include finCol(5, 12, 0px, middle, true, true);\n      text-align: right;\n    }\n  }\n  .period {\n    display: inline-block;\n    @extend %font-size-s;\n    font-weight: normal;\n  }\n  .price {\n    margin-left: 5px;\n    display: inline-block;\n    @extend %font-size-s;\n  }\n  .percent {\n    margin-left: 5px;\n    display: inline-block;\n    @extend %font-size-s;\n  }\n  .ctn-graph-professional {\n    @include finRippleBtn(#f4f4f4, #f4f4f4, $color-normal-text);\n    @extend %font-size-ss;\n    padding: 5px 19px;\n    text-decoration: none;\n    font-weight: bold;\n    border-radius: 4px;\n    i {\n      pointer-events: none;\n    }\n  }\n  .graph-area {\n  }\n  .select-navigation {\n    position: relative;\n    .select-period {\n      margin: 20px 0;\n      background: #f9f9f9;\n      overflow: auto;\n      .period-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        li {\n          cursor: pointer;\n          display: inline-block;\n          max-width: 50px;\n          width: 100%;\n          @extend %font-size-ss;\n          color: $color-normal-text;\n          text-align: center;\n          padding: 8px 0;\n        }\n        .active {\n          position: relative;\n          font-weight: bold;\n          &:after {\n            content: \"\";\n            position: absolute;\n            left: 0;\n            top: 0;\n            height: 3px;\n            width: 100%;\n            background-color: $color-normal-text;\n            z-index: 1;\n          }\n        }\n      }\n    }\n  }\n  .fade-left {\n    &:before {\n      content: \"\";\n      width: 50px;\n      height: 100%;\n      z-index: 1;\n      position: absolute;\n      left: 0;\n      top: 0;\n      pointer-events: none;\n      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */\n      background: -moz-linear-gradient(\n        left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* FF3.6-15 */\n      background: -webkit-linear-gradient(\n        left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* Chrome10-25,Safari5.1-6 */\n      background: linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0) 100%\n      ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */\n    }\n  }\n  .fade-right {\n    &:after {\n      content: \"\";\n      width: 50px;\n      height: 100%;\n      z-index: 1;\n      position: absolute;\n      right: 0;\n      top: 0;\n      pointer-events: none;\n      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */\n      background: -moz-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 100%\n      ); /* FF3.6-15 */\n      background: -webkit-linear-gradient(\n        left,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 100%\n      ); /* Chrome10-25,Safari5.1-6 */\n      background: linear-gradient(\n        to right,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 1) 100%\n      ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */\n    }\n  }\n}\n.tick {\n  color: $color-border !important;\n}\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GraphNav.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GraphNav.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GraphNav.vue?vue&type=template&id=d9dca3ac&scoped=true&\"\nimport script from \"./GraphNav.vue?vue&type=script&lang=js&\"\nexport * from \"./GraphNav.vue?vue&type=script&lang=js&\"\nimport style1 from \"./GraphNav.vue?vue&type=style&index=1&id=d9dca3ac&lang=scss&scoped=true&\"\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  \"d9dca3ac\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GraphNav.vue?vue&type=style&index=1&id=d9dca3ac&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GraphNav.vue?vue&type=style&index=1&id=d9dca3ac&lang=scss&scoped=true&\""],"sourceRoot":""}