{"version":3,"sources":["webpack:///./src/components/miniapp/gold/GoldSpotThaiGraph.vue?9598","webpack:///./src/components/miniapp/gold/GoldSpotThaiGraph.vue?b4e1","webpack:///src/components/miniapp/gold/GoldSpotThaiGraph.vue","webpack:///./src/components/miniapp/gold/GoldSpotThaiGraph.vue?8868","webpack:///./src/components/miniapp/gold/GoldSpotThaiGraph.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","marketStatus","_v","_e","staticStyle","goldSpotId","getGoldSpotThaiRealtimePeriod","range","default","on","choosePeriod","staticRenderFns","TH","d3","decimal","thousands","grouping","currency","dateTime","date","time","periods","days","shortDays","months","shortMonths","numberFormat","parts","num","toString","split","replace","announcementFormat","actualdate","periodAggregate","includes","period","changeFormat","priceChange","parseDate","getDate","colorTheme","pl","constants","profit","loss","iconPriceChange","graphMarginPercentage","grey","stable","graphColor","priceToolipColor","margin","top","left","right","bottom","bgTop","offsetRightY","focusStroke","lineStroke","axisStroke","circleRadius","lineStrokeDash","tooltipWidth","tooltipHeight","tooltipRealtimePriceWidth","tooltipRealtimePriceHeight","driftRightMargin","driftTopMargin","tickMoveFactor","goldTraderClassSet","components","PeriodNavigation","props","type","String","isGoldTrader","Boolean","data","firstPaint","loading","lastPrice","countTime","timeInterval","sockets","socketData","traderPrice","startTimeframe","watch","hideGoldTraderGraph","val","drawGraph","computed","limitDataPoint","getGoldSpotThaiRealtimeCurrentPeriod","minute","formatTitle","helpers","format","formatTimeScale","beforeDestroy","clearInterval","disconnectSocket","destroyed","readyState","onclose","methods","connectSocket","loc","protocol","uri","host","WebSocket","close","updateLastPrice","arrData","length","updatePriceLabel","vis","selectAll","attr","yRange","goldSpotPrice","updateWithInterval","setInterval","updateYAxis","shift","push","findTimeMoreThanLatest","item","filter","getSocket","onmessage","Error","error","createCarryTraderLastPrice","goldSpotThaiLastPrice","forEach","carryTicks","timestamp","t","barSellPrice","lastTraderPrice","v","createdTime","ct","barPriceChange","c","createdDateTime","adt","updateGoldTraderRealtimeGraph","graphHeight","graphWidth","graphRatio","renderGraph","getGoldSpotThaiRealtimeGraph","calyRangeDomain","yMax","maxSocketRange","yMin","minSocketRange","diff","calxRangeDomain","limit","duration","style","select","getGoldTraderRealtimeGraph","svgWidth","clientWidth","svgHeight","spaceNavLineElem","height","xRange","xAxis","yAxis","sizeUpdate","rangeUpdate","axisUpdate","make_y_axis","generateTooltip","tooltip","generatePriceTooltip","isFirst","focusCircle","append","arrElemFocusCircle","bisectDate","d","mouseOver","mouseOut","elemFocusLine","elemFocusTooltip","n","mouseMove","mouseEvent","handleMove","touchMove","d0","d1","x0","elemFocusCircle","xPad","yPad","elemFocusTooltipNav","text","elemFocusTooltipDate","elemFocusTooltipChange","p","elemFocusTooltipChangeIcon","elemFocusTooltipNavTrader","elemFocusTooltipTraderAnnouncement","elemFocusTooltipChangeTrader","elemFocusTooltipChangeIconTrader","remove","fontSize","document","getElementById","tickUpdate","call","lineGen","formattedLineData","updateAxisAndGraph","callProfessionalGraph","$emit","component"],"mappings":"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EAAUqB,aAAerB,EAAUqB,aAAe,OAGnE4B,UAzUJ,SAyUA,cACA,YAEA,oCAEMlG,KAAK6F,YAAc7F,KAAK8K,2BACxB,IAON,IACA,IARA,IAEA,sCACA,2CAOA,oFACA,8CACA,8CACA,MACA,sBAEA,cACQ,IAAR,gBACA,qBACU,sBAAV,EACU,sBAAV,IAEA,qCACQ,MAAO,GAAf,gBAEA,aACQ,IAAR,oDACQC,EAAWC,GAA4B,EACvCC,EAAY,EAApB,cACQC,EAAiBN,MAAMO,OAASF,EAAY,MAGpD,aACQG,EAASjK,EAAjB,OAEA,4DACA,iCAEQ6G,EAAS7G,EAAjB,OAEA,wCACA,kCAGA,aACA,qBACQkK,EAAQlK,EAAhB,KACA,GACA,0BACA,yBAEQmK,EAAQnK,EAAhB,KACA,GACA,cACA,UAGMoK,IACAC,IACAC,IAGA,IAAN,WAEA,cACA,eAAQ,OAAR,UACA,eAAQ,OAAR,UAGA,WAEA,2EACA,eAAQ,OAAR,UACA,eAAQ,OAAR,UAGUC,EAAc,WAChB,IAAR,iBACQ,OAAOvK,EAAf,kBAGUwK,EAAkB,WAEpB,IAAR,IACA,YACA,8BACA,wBAGQC,EACR,eACA,6BACA,6BACA,+BACA,aACA,aAGQA,EACR,eACA,aACA,aACA,6BACA,2BACA,oBACA,iBAGQA,EACR,eACA,aACA,aACA,4CACA,2BACA,oBACA,uBAGQA,EACR,eACA,6BACA,aACA,aACA,oBACA,2CACA,yBACA,UAGQA,EACR,eACA,6BACA,aACA,aACA,0BACA,4BACA,oCACA,2CACA,wBACA,UAGQA,EACR,eACA,oCACA,aACA,aACA,uBACA,yBACA,oCACA,2CACA,wBACA,UAGQA,EACR,eACA,aACA,aACA,4BACA,2BACA,gBAGQA,EACR,eACA,aACA,aACA,mCACA,2BACA,UAGQA,EACR,eACA,cACA,aACA,+BACA,2BACA,UAGQA,EACR,eACA,cACA,aACA,sCACA,2BACA,YAGUC,EAAuB,WACzB,IAAR,8CAEQD,EACR,eACA,mCACA,0CACA,4CACA,aACA,aACA,QACA,sBAAU,OAAV,UACA,sBAAU,OAAV,UACA,gCACA,iBAXA,qBAcQA,EACR,eACA,kCACA,2BACA,QACA,sBAAU,OAAV,UACA,sBAAU,OAAV,UACA,iBAPA,mBAQA,qBACA,2BAGM,GAAIE,EAAS,CAEXjE,EACR,gBACA,uBACA,QAGQA,EACR,gBACA,uBACA,iBAHA,oBAGA,KAHA,UAIA,oBACA,QAGQA,EACR,YACA,qBACA,sBACA,iBAJA,qBAIA,eAJA,QAKA,+BACA,KACA,IACA,kBACA,gBAIQA,EACR,eACA,0BACA,aACA,YACA,eACA,eACA,4BACA,kCACA,oBAGQA,EACR,eACA,iCACA,aACA,YACA,8BACA,yBACA,2CACA,kCACA,oBAGQA,EACR,cACA,oBACA,QACA,QACA,iBACA,uBAAU,OAAV,UACA,uBAAU,OAAV,UACA,6BAEQA,EACR,cACA,oBACA,uBACA,QACA,iBACA,uBAAU,OAAV,UACA,uBAAU,OAAV,UACA,6BAGQA,EACR,sCACA,8CACA,+CACA,sCACA,yBACA,0BACA,sBAGQgE,IAGAF,IAGA9D,EACR,eACA,2BACA,wBACA,6BACA,mCACA,yBACA,wBAEQ,IAAK,IAAb,aAEU,IAAV,IACA,YACA,2CACA,wBAGUkE,EAAYC,OAAO,UAAUjE,KAAK,IAAK9E,EAAUmB,aAAe,GAGhE2H,EACV,iBACA,2CACA,yBAIQ/L,KAAKgG,oBAAoBhG,KAAKmF,mBAG9B0C,EACR,aACA,QACA,aACA,YACA,eAEQA,EAAIC,UAAU,eAAe8C,MAAM,UAAW,QAE9C/C,EAAIC,UAAU,iBAAiB8C,MAAM,UAAW,QAEhD/C,EAAIC,UAAU,sBAAsB8C,MAAM,UAAW,QAErD/C,EAAIC,UAAU,kBAAkB8C,MAAM,UAAW,QAGjD/C,EACR,aACA,oBACA,QAGQA,EACR,gBACA,qBACA,sBACA,iBAJA,qBAIA,eAJA,QAKA,KACA,IACA,kBACA,gBAIQA,EACR,qBACA,aACA,YACA,eACA,eACA,4BACA,oBACA,uBAGQA,EACR,4BACA,aACA,YACA,eACA,8BACA,yBACA,2CACA,oBACA,uBAGM1G,EAAN,wCAoBM,IAfA,IAAN,0BACA,4BACA,6BACA,+BAC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","file":"js/chunk-4f38a572.bdc9e6e1.js","sourcesContent":["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!./GoldSpotThaiGraph.vue?vue&type=style&index=0&lang=scss&\"; 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!./GoldSpotThaiGraph.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"gold-spot\"}},[_c('div',{staticClass:\"graph-area\"},[(_vm.marketStatus && _vm.marketStatus !== 'open')?_c('div',{staticClass:\"market-status\"},[_c('i',{staticClass:\"fas fa-do-not-enter\"}),_vm._v(\" ตลาดปิด \")]):_vm._e(),(_vm.loading)?_c('div',{staticClass:\"skeleton-card\",staticStyle:{\"position\":\"absolute\"}},[_c('div',{staticClass:\"box\"})]):_vm._e(),_c('svg',{attrs:{\"id\":_vm.goldSpotId,\"width\":\"100%\"}})]),_c('div',{staticClass:\"period-area\"},[_c('PeriodNavigation',{attrs:{\"backgorund\":\"#ffffff\",\"activePosition\":\"top\",\"data-action\":\"change_gold_trader_period\",\"arrPeriod\":_vm.getGoldSpotThaiRealtimePeriod.range,\"alias\":\"period\",\"defaultItem\":_vm.getGoldSpotThaiRealtimePeriod.default,\"slidePerPage\":9},on:{\"select-data\":_vm.choosePeriod}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"gold-spot\">\n    <div class=\"graph-area\">\n      <div v-if=\"marketStatus && marketStatus !== 'open'\" class=\"market-status\">\n        <i class=\"fas fa-do-not-enter\"></i>\n        ตลาดปิด\n      </div>\n      <div v-if=\"loading\" class=\"skeleton-card\" style=\"position: absolute;\">\n        <div class=\"box\"></div>\n      </div>\n      <svg :id=\"goldSpotId\" width=\"100%\" />\n    </div>\n    <div class=\"period-area\">\n      <PeriodNavigation\n        backgorund=\"#ffffff\"\n        activePosition=\"top\"\n        data-action=\"change_gold_trader_period\"\n        :arrPeriod=\"getGoldSpotThaiRealtimePeriod.range\"\n        :alias=\"`period`\"\n        @select-data=\"choosePeriod\"\n        :defaultItem=\"getGoldSpotThaiRealtimePeriod.default\"\n        :slidePerPage=\"9\"\n      />\n    </div>\n    <!-- <div class=\"professional-btn-center\">\n      <a\n        class=\"ctn-graph-professional\"\n        data-action=\"gold_spot_trading_view\"\n        href=\"javascript:;\"\n        @click=\"callProfessionalGraph\"\n      >\n        <i class=\"fas fa-chart-bar\"></i> กราฟ Real-time\n      </a>\n    </div>-->\n  </div>\n</template>\n\n<script>\nimport moment from 'moment'\nimport * as d3 from 'd3'\nimport { mapGetters, mapActions } from 'vuex'\nimport { timestampToDate, findPreviousDate, findNextTime, convertHex } from '../../../utils/global'\nimport { convertGoldOzToThaiBaht } from '../../../utils/gold'\nimport { formatCurrency } from '../../../utils/global'\n\nconst PeriodNavigation = () => import('../global/PeriodNavigation')\n\nlet periodCurrentTick = ['1m', '5m']\nlet periodSnapshot = ['15m', '1h', '12h', '1D']\nlet periodAggregate = ['1W', '1M', '3M', '6M', 'YTD', '1Y', '5Y', '10Y', 'MAX']\n\nlet xRange, yRange\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: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n    shortDays: ['อ', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'],\n    months: [\n      'มกราคม',\n      'กุมภาพันธ์',\n      'มีนาคม',\n      'เมษายน',\n      'พฤษภาคม',\n      'มิถุนายน',\n      'กรกฎาคม',\n      'สิงหาคม',\n      'กันยายน',\n      'ตุลาคม',\n      'พฤศจิกายน',\n      'ธันวาคม'\n    ],\n    shortMonths: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.']\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  announcementFormat: function(date, timestampOnGraph, num, period) {\n    let actualdate = date.split('_')[0]\n    if (actualdate < moment(timestampOnGraph).format('YYYYMMDD')) {\n      return `ราคาครั้งล่าสุดวันที่ ${moment(actualdate).format('DD/MM/YYYY')}`\n    }\n    return periodAggregate.includes(period) ? `ประกาศล่าสุดของวัน` : `ประกาศครั้งที่ ${num}`\n  },\n  changeFormat: change => {\n    let priceChange = parseFloat(change).toFixed(2)\n    if (priceChange > 0) return `+${priceChange}%`\n    return `${priceChange}%`\n  },\n  parseDate: d3.timeParse('%Y-%m-%d %hh:%mm:%ss'),\n  getDate: d3.timeFormat('%d/%m/%y | %H:%M:%S'),\n  colorTheme: function(pl) {\n    if (pl > 0) return constants.profit\n    else if (pl == 0) return constants.stable\n    return constants.loss\n  },\n  iconPriceChange: function(pl) {\n    if (pl > 0) return '\\uf0d8'\n    else if (pl == 0) return '\\uf0dc'\n    return '\\uf0d7'\n  }\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  stable: '#999999',\n  graphColor: '#f7a501',\n  priceToolipColor: '#f7a501',\n\n  margin: {\n    top: 20,\n    left: 0,\n    right: 0,\n    bottom: 20,\n    bgTop: 12\n  },\n\n  // offset\n  offsetRightY: 70,\n\n  // Focusing\n  focusStroke: 1.5,\n  lineStroke: 2,\n  axisStroke: 2,\n  circleRadius: 4,\n  lineStrokeDash: '7,7',\n  // Tooltip\n  tooltipWidth: 170,\n  tooltipHeight: 100,\n  tooltipRealtimePriceWidth: 60,\n  tooltipRealtimePriceHeight: 20,\n\n  driftRightMargin: 10,\n  driftTopMargin: 22.5,\n\n  // Tick Styling\n  tickMoveFactor: 34,\n\n  // Class set\n  goldTraderClassSet:\n    '.line-data-trader, .focusCircle1, .innerCircle1, .tooltip-trader-announcement, .tooltip-nav-trader, .tooltip-change-trader, .tooltip-change-icon-trader, .tooltip-logo-trader'\n}\n\nexport default {\n  components: {\n    PeriodNavigation\n  },\n  props: {\n    goldSpotId: {\n      type: String,\n      default: 'gold-spot-graph-d3-line'\n    },\n    isGoldTrader: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      firstPaint: true,\n      loading: false,\n      lastPrice: [],\n      countTime: null,\n      timeInterval: null,\n      sockets: {},\n      socketData: [],\n      marketStatus: null,\n      traderPrice: null,\n      startTimeframe: null\n    }\n  },\n  watch: {\n    isGoldTrader(val) {\n      this.hideGoldTraderGraph(val)\n      this.drawGraph({ isFirst: false })\n    }\n  },\n  computed: {\n    ...mapGetters('gold', [\n      'getGoldSpotThaiRealtimeGraph',\n      'getGoldSpotThaiRealtimeCurrentPeriod',\n      'getGoldSpotThaiRealtimePeriod',\n      'getGoldGlobalConfig',\n      'getGoldTraderRealtimeGraph',\n      'getGoldHistoryGraph',\n      'getGoldSpotLastQuote'\n    ]),\n    limitDataPoint() {\n      let minute = 120\n      switch (this.getGoldSpotThaiRealtimeCurrentPeriod) {\n        case '1m':\n          return minute\n        case '5m':\n          return minute * 5\n        case '15m':\n          return minute * 15\n        case '1h':\n          return minute * 60\n        case '12h':\n          return minute * 60 * 12\n        case '1D':\n          return minute * 60 * 24\n        default:\n          return minute\n      }\n    },\n    formatTitle() {\n      switch (this.getGoldSpotThaiRealtimeCurrentPeriod) {\n        case '1m':\n          return helpers.TH.format('%H:%M:%S')\n        case '5m':\n          return helpers.TH.format('%H:%M')\n        case '15m':\n          return helpers.TH.format('%H:%M')\n        case '1h':\n          return helpers.TH.format('%H:%M')\n        case '12h':\n          return helpers.TH.format('%H:%M')\n        case '1D':\n          return helpers.TH.format('%H:%M')\n        case '1W':\n          return helpers.TH.format('%e %b')\n        case '1M':\n          return helpers.TH.format('%e %b')\n        case '3M':\n          return helpers.TH.format('%e %b')\n        case '6M':\n          return helpers.TH.format('%e %b')\n        case 'YTD':\n          return helpers.TH.format('%e %b')\n        case '1Y':\n          return helpers.TH.format('%b %y')\n        case '5Y':\n          return helpers.TH.format('%Y')\n        case '10Y':\n          return helpers.TH.format('%Y')\n        case 'MAX':\n          return helpers.TH.format('%Y')\n        default:\n          return helpers.TH.format('%e %b %y')\n      }\n    },\n    formatTimeScale() {\n      switch (this.getGoldSpotThaiRealtimeCurrentPeriod) {\n        case '1m':\n          return d3.timeSecond.every(15)\n        case '5m':\n          return d3.timeMinute.every(1)\n        case '15m':\n          return d3.timeMinute.every(3)\n        case '1h':\n          return d3.timeMinute.every(10)\n        case '12h':\n          return d3.timeHour.every(2)\n        case '1D':\n          return d3.timeHour.every(4)\n        case '1W':\n          return d3.timeDay.every(1)\n        case '1M':\n          return d3.timeWeek.every(1)\n        case '3M':\n          return d3.timeDay.every(16)\n        case '6M':\n          return d3.timeMonth.every(1)\n        case 'YTD':\n          return d3.timeWeek.every(2)\n        case '1Y':\n          return d3.timeMonth.every(2)\n        case '5Y':\n          return d3.timeYear.every(1)\n        case '10Y':\n          return d3.timeYear.every(2)\n        case 'MAX':\n          return d3.timeYear.every(2)\n        default:\n          return 4\n      }\n    }\n  },\n  async created() {\n    const ns = await this.$nextTick()\n    if (ns) {\n      this.clearGoldSpotThaiRealtimeGraph()\n      this.clearGoldTraderRealtimeGraph()\n    }\n  },\n  async mounted() {\n    this.loading = !this.loading\n    this.marketStatus = await this.fetchMarketStatus('currency')\n    await this.queryData()\n    this.loading = !this.loading\n  },\n  beforeDestroy() {\n    clearInterval(this.timeInterval)\n    this.disconnectSocket() // disconnect socket\n  },\n  destroyed() {\n    if (this.sockets && this.sockets.readyState === 2) this.sockets.onclose = () => {} // close connection from server\n  },\n  methods: {\n    ...mapActions('gold', [\n      'updateGoldSpotThaiRealtimeGraph',\n      'updateGoldSpotThaiAggregateGraph',\n      'updateGoldTraderRealtimeGraph',\n      'updateGoldTraderAggregateGraph',\n      'updateGoldSpotThaiRealtimeCurrentPeriod',\n      'clearGoldSpotThaiRealtimeGraph',\n      'clearGoldTraderRealtimeGraph',\n      'fetchGoldSpotSnapshot',\n      'fetchGoldSpotAggregate',\n      'fetchGoldTraderHistoryGraph',\n      'findGoldHistoryGraph',\n      'findGoldSpotLastQuote'\n    ]),\n    ...mapActions('global', ['fetchMarketStatus']),\n    async queryData() {\n      await this.clearGoldSpotThaiRealtimeGraph()\n      await this.clearGoldTraderRealtimeGraph()\n      this.startTimeframe = new Date().getTime() // get startTimeframe\n      if (periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n        await this.getAggregate()\n        await this.getGoldTraderAggregate()\n      } else {\n        await this.getSnapshot()\n        await this.getGoldTrader()\n      }\n      await this.appendLatestTick()\n      await this.renderGraph()\n      if (this.marketStatus === 'open') {\n        await this.connectSocket() // connect socket\n        this.getSocket()\n        if (periodSnapshot.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) this.updateWithInterval()\n      }\n    },\n    connectSocket() {\n      let loc = window.location,\n        uri = 'ws:'\n      if (loc.protocol === 'https:') uri = 'wss:'\n\n      uri += '//' + loc.host\n      uri += '/ws/market/?transport=websocket&channels=currency'\n\n      this.sockets = new WebSocket(uri)\n    },\n    disconnectSocket() {\n      if (this.sockets && this.sockets.readyState === 1) this.sockets.close()\n    },\n    async choosePeriod(period) {\n      if (period == this.getGoldSpotThaiRealtimeCurrentPeriod) return 0\n      if (this.loading) return 0\n      this.getGoldSpotThaiRealtimePeriod.default = period\n      this.updateGoldSpotThaiRealtimeCurrentPeriod(period)\n      clearInterval(this.timeInterval)\n      await this.disconnectSocket() // disconnect socket\n      this.loading = !this.loading\n      await this.queryData()\n      this.loading = !this.loading\n    },\n    updateLastPrice(arrData) {\n      if (arrData && arrData.length)\n        this.$store.state.gold.goldSpotThaiLastPrice = convertGoldOzToThaiBaht(arrData[0].b) // update last price\n    },\n    updatePriceLabel(arrData) {\n      let vis = d3.select(`#${this.goldSpotId}`)\n      let goldSpotPrice = convertGoldOzToThaiBaht(arrData[0].b)\n\n      // Update position (price tooltip)\n      vis.selectAll('.price-tooltip-rect').attr('y', () => {\n        return yRange(goldSpotPrice)\n      })\n      // Update position and last price (nav price tooltip)\n      vis\n        .selectAll('.price-tooltip-nav')\n        .attr('y', () => {\n          return yRange(goldSpotPrice)\n        })\n        .text(formatCurrency(goldSpotPrice, 'THB', 2))\n    },\n    updateWithInterval() {\n      // Set the date we're counting down to\n      this.countTime = findNextTime(this.getGoldSpotThaiRealtimeCurrentPeriod, this.getGoldGlobalConfig)\n      // Update the count down every 1 second\n      this.timeInterval = setInterval(async () => {\n        // Get today's date and time\n        const now = new Date().getTime()\n\n        // Find the distance between now and the count down date\n        const distance = this.countTime - now\n\n        // If the count down is over, write some text\n        if (distance <= 0) {\n          this.countTime = findNextTime(this.getGoldSpotThaiRealtimeCurrentPeriod, this.getGoldGlobalConfig)\n          this.lastPrice && this.lastPrice.length ? (this.lastPrice[0].t = now) : null // set time form interval\n          await this.updateGoldSpotThaiRealtimeGraph(this.lastPrice)\n          await this.createCarryTraderLastPrice(this.lastPrice)\n          this.renderGraph()\n        }\n      }, 1000)\n    },\n    updateYAxis(data) {\n      if (this.socketData.length > 30) this.socketData.shift()\n      this.socketData.push(convertGoldOzToThaiBaht(data[0].b))\n      this.drawGraph({ isFirst: false })\n    },\n    findTimeMoreThanLatest(item) {\n      return item.filter(\n        item => item.t > this.getGoldSpotThaiRealtimeGraph[this.getGoldSpotThaiRealtimeGraph.length - 1].t\n      )\n    },\n    async getAggregate() {\n      try {\n        const prevDate = await findPreviousDate(this.getGoldSpotThaiRealtimeCurrentPeriod)\n        // const gcsConfig = this.getGoldGlobalConfig\n        // .filter(item => item.period == this.getGoldSpotThaiRealtimeCurrentPeriod)\n        // .map(item => ({\n        //   multiplier: item.multiplier,\n        //   timespan: item.timespan\n        // }))[0]\n        const data = {\n          multiplier: 1,\n          timespan: 'day',\n          from: prevDate,\n          to: timestampToDate(Date.now(), 'YYYY-MM-DD', 'global'),\n          currency: 'C:XAUTHB'\n        }\n        let goldSpotAggr = await this.fetchGoldSpotAggregate(data)\n        await this.updateGoldSpotThaiAggregateGraph(goldSpotAggr)\n      } catch (error) {\n        throw new Error(error)\n      }\n    },\n    async getSnapshot() {\n      try {\n        let response = await this.fetchGoldSpotSnapshot({\n          period: this.getGoldSpotThaiRealtimeCurrentPeriod,\n          marketStatus: this.marketStatus,\n          snapshotKey: 'thai', // optional \"thai\"\n          startTimeframe: this.startTimeframe\n        })\n        if (response && response.length) {\n          if (periodCurrentTick.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n            await this.rearrangeGoldSpotThaiGraphData(response)\n          } else {\n            await this.updateGoldSpotThaiRealtimeGraph(response)\n          }\n        }\n      } catch (error) {\n        throw new Error(error)\n      }\n    },\n    async getGoldTraderAggregate() {\n      let period = this.getGoldSpotThaiRealtimeCurrentPeriod\n      const response = await this.findGoldHistoryGraph(period)\n      await this.updateGoldTraderRealtimeGraph(response)\n      await this.rearrangeGoldTraderGraphData()\n    },\n    async getGoldTrader() {\n      let period = this.getGoldSpotThaiRealtimeCurrentPeriod\n      try {\n        const response = await this.fetchGoldTraderHistoryGraph({\n          period: period,\n          sampling: 1,\n          startTimeframe: this.startTimeframe\n        })\n        await this.updateGoldTraderRealtimeGraph(response)\n        if (periodCurrentTick.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n          await this.rearrangeGoldTraderGraphData()\n        }\n      } catch (error) {\n        throw new Error(error)\n      }\n    },\n    async rearrangeGoldSpotThaiGraphData(goldSpotThaiTicks) {\n      let newGoldSpotSnapshot = goldSpotThaiTicks\n      let datapoint = 59\n      let interval = this.getGoldSpotThaiRealtimeCurrentPeriod == '5m' ? 5000 : 1000\n      if (newGoldSpotSnapshot) {\n        for (let i = newGoldSpotSnapshot.length; i <= datapoint; i++) {\n          newGoldSpotSnapshot.unshift({\n            t: newGoldSpotSnapshot[0].t - interval,\n            b: newGoldSpotSnapshot[0].b\n          })\n        }\n      }\n      await this.updateGoldSpotThaiRealtimeGraph(newGoldSpotSnapshot)\n    },\n    async rearrangeGoldTraderGraphData() {\n      let goldSpotSnapshot = this.getGoldSpotThaiRealtimeGraph\n      let goldTraderSnapshot = this.getGoldTraderRealtimeGraph\n      let newGoldTraderSnapshot = []\n      await goldSpotSnapshot.forEach(gs => {\n        let gt = null\n        for (const index in goldTraderSnapshot) {\n          if (goldTraderSnapshot[index].t == gs.t) {\n            gt = goldTraderSnapshot[index]\n            break\n          } else if (goldTraderSnapshot[index].t > gs.t) {\n            gt = index == 0 ? goldTraderSnapshot[index] : goldTraderSnapshot[index - 1]\n            break\n          } else if (index == goldSpotSnapshot.length - 1) {\n            gt = goldTraderSnapshot[index]\n          }\n        }\n        if (gt) {\n          newGoldTraderSnapshot.push({\n            timestamp: gs.t,\n            barSellPrice: gt.v,\n            createdTime: gt.ct,\n            barPriceChange: gt.c,\n            createdDateTime: gt.adt\n          })\n        }\n      })\n      this.clearGoldTraderRealtimeGraph()\n      await this.updateGoldTraderRealtimeGraph(newGoldTraderSnapshot)\n    },\n    getSocket() {\n      try {\n        this.sockets.onmessage = async evt => {\n          let data = JSON.parse(evt.data)\n          data = data.filter(item => item.p == 'XAU/THB') // filter type of curency\n          data = await this.findTimeMoreThanLatest(data)\n          if (data.length) {\n            this.lastPrice = data\n            if (periodCurrentTick.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n              await this.updateGoldSpotThaiRealtimeGraph(this.lastPrice)\n              await this.createCarryTraderLastPrice(this.lastPrice)\n              this.renderGraph()\n            }\n            if (periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n              this.updateYAxis(this.lastPrice)\n            }\n            this.updateLastPrice(this.lastPrice)\n            this.updatePriceLabel(this.lastPrice)\n          }\n        }\n      } catch (error) {\n        this.connectSocket() // reconnect socket\n        throw new Error(error)\n      }\n    },\n    createCarryTraderLastPrice(goldSpotThaiLastPrice) {\n      let carryTicks = []\n      let lastTraderPrice = this.traderPrice[this.traderPrice.length - 1]\n      goldSpotThaiLastPrice.forEach(item => {\n        carryTicks.push({\n          timestamp: item.t,\n          barSellPrice: lastTraderPrice.v.toString(),\n          createdTime: lastTraderPrice.ct,\n          barPriceChange: lastTraderPrice.c,\n          createdDateTime: lastTraderPrice.adt\n        })\n      })\n      this.updateGoldTraderRealtimeGraph(carryTicks)\n    },\n    async appendLatestTick() {\n      await this.findGoldSpotLastQuote({from: \"XAU\", to: \"THB\"})\n      const lastQuote = this.getGoldSpotLastQuote\n      const goldTraderSnapshot = this.getGoldTraderRealtimeGraph\n      const goldSpotThaiRealtimeGraph = this.getGoldSpotThaiRealtimeGraph\n      if (lastQuote && goldSpotThaiRealtimeGraph.length > 0 && lastQuote.timestamp > goldSpotThaiRealtimeGraph[goldSpotThaiRealtimeGraph.length-1].t) {\n        if (periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n          await this.updateGoldSpotThaiAggregateGraph([{c: lastQuote.bid, t: lastQuote.timestamp}])\n        } else {\n          await this.updateGoldSpotThaiRealtimeGraph([{b: lastQuote.bid, t: lastQuote.timestamp}])\n        }\n        let lastTraderPrice = goldTraderSnapshot[goldTraderSnapshot.length - 1]\n          this.updateGoldTraderRealtimeGraph([{\n            timestamp: lastQuote.timestamp,\n            barSellPrice: lastTraderPrice.v.toString(),\n            createdTime: lastTraderPrice.ct,\n            barPriceChange: lastTraderPrice.c,\n            createdDateTime: lastTraderPrice.adt\n        }])\n      }\n    },\n    graphHeight() {\n      let graphWidth = document.getElementById(this.goldSpotId).clientWidth\n      let graphRatio = graphWidth > 760 ? 0.5 : 0.6\n\n      return graphWidth * graphRatio\n    },\n    renderGraph() {\n      if (this.getGoldSpotThaiRealtimeGraph.length === 0) return 0\n      if (d3.select(`#${this.goldSpotId}`).empty()) return 0\n\n      if (this.firstPaint) {\n        this.drawGraph({ isFirst: true })\n        this.firstPaint = false\n      } else {\n        this.drawGraph({ isFirst: false })\n      }\n    },\n    calyRangeDomain(data, yMax, yMin) {\n      if (periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod) && this.socketData.length) {\n        let minSocketRange = d3.min(this.socketData, d => Number(d))\n        let maxSocketRange = d3.max(this.socketData, d => Number(d))\n        yMax = maxSocketRange > yMax ? maxSocketRange : yMax\n        yMin = minSocketRange < yMin ? minSocketRange : yMin\n      }\n      let diff = (yMax - yMin) / 10\n      return [yMax + diff, yMin - diff]\n    },\n    calxRangeDomain(data, limit, duration) {\n      if (\n        periodSnapshot.includes(this.getGoldSpotThaiRealtimeCurrentPeriod) ||\n        periodCurrentTick.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)\n      ) {\n        return [data[data.length - 1].t - limit * duration, data[data.length - 1].t - duration]\n      } else {\n        return [d3.min(data, d => Number(d.t)), d3.max(data, d => Number(d.t))]\n      }\n    },\n    hideGoldTraderGraph(val) {\n      // choose graph\n      let vis = d3.select(`#${this.goldSpotId}`)\n      // hide line data\n      vis.selectAll(constants.goldTraderClassSet).style('visibility', () => {\n        return val ? 'visible' : 'hidden'\n      })\n      // adjust tooltip size\n      vis.select('.tooltip-rect').style('height', () => {\n        return val ? constants.tooltipHeight : constants.tooltipHeight - 40\n      })\n      vis.select('.tooltip-rect').style('width', () => {\n        return val ? constants.tooltipWidth : constants.tooltipWidth - 20\n      })\n    },\n    drawGraph(options) {\n      let isFirst = options.isFirst\n      // Preparing Data\n      let formattedLineData = this.getGoldSpotThaiRealtimeGraph\n      // get gold trader\n      this.traderPrice = this.getGoldTraderRealtimeGraph\n      let numberOfLineOnGraph = 2\n\n      let vis = d3.select(`#${this.goldSpotId}`)\n      let spaceNavLineElem = document.getElementById(this.goldSpotId)\n\n      // Prepare range and domain\n      // Max and min in x bar, y bar\n      let svgWidth, svgHeight\n      let xAxis, yAxis\n      // let graphMargin\n      let allTick = this.isGoldTrader ? [...formattedLineData, ...this.traderPrice] : formattedLineData\n      let yMin = d3.min(allTick, d => Number(d.v))\n      let yMax = d3.max(allTick, d => Number(d.v))\n      let duration = 500 // how quickly to move (will look jerky if less that data input rate)\n      let limit = this.limitDataPoint // how many datapoints, total points = (duration * limit) 1 minute = 120\n      // manage text in ticks\n      let formatCurrency = d => {\n        let toNumber = parseFloat(d)\n          .toLocaleString('th', {\n            minimumFractionDigits: 2,\n            maximumFractionDigits: 2\n          })\n          .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n        return `${toNumber} ฿`\n      }\n      let sizeUpdate = () => {\n        let clientWidth = document.getElementById(this.goldSpotId).clientWidth\n        svgWidth = clientWidth ? clientWidth : 0\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 + 10, svgWidth - constants.margin.right - constants.offsetRightY, 2])\n          .domain(this.calxRangeDomain(formattedLineData, limit, duration))\n\n        yRange = d3\n          .scaleLinear()\n          .range([constants.margin.bottom, svgHeight - constants.margin.top])\n          .domain(this.calyRangeDomain(formattedLineData, yMax, yMin))\n      }\n\n      let axisUpdate = () => {\n\t\tlet tickCount = parseInt(svgWidth / 50)\n        xAxis = d3\n          .axisBottom(xRange)\n          .tickFormat(this.formatTitle)\n          .ticks(this.formatTimeScale)\n\n        yAxis = d3\n          .axisRight(yRange)\n          .tickFormat(formatCurrency)\n          .ticks(tickCount)\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.t))\n        .y(d => yRange(d.v))\n\n      // Appending or Changing Element\n      let traderGoldLineGen = d3\n        .line()\n        .curve(periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod) ? d3.curveLinear : d3.curveStepAfter)\n        .x(d => xRange(d.t))\n        .y(d => yRange(d.v))\n\n      // y Axis\n      var make_y_axis = function() {\n        let tickCount = parseInt(svgWidth / 50)\n        return d3.axisRight(yRange).ticks(tickCount)\n      }\n\n      var generateTooltip = () => {\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('width', constants.tooltipWidth)\n          .attr('height', constants.tooltipHeight)\n          .attr('rx', 4)\n          .attr('ry', 4)\n\n        // Tooltip date\n        tooltip\n          .append('text')\n          .attr('x', 40)\n          .attr('y', 20)\n          .attr('class', 'tooltip-date')\n          .attr('text-anchor', 'left')\n          .attr('fill', constants.grey)\n          .text('12/03/07')\n\n        // Tooltip Announcement\n        tooltip\n          .append('text')\n          .attr('x', 20)\n          .attr('y', 65)\n          .attr('class', 'tooltip-trader-announcement')\n          .attr('text-anchor', 'left')\n          .attr('fill', constants.grey)\n          .text('ประกาศครั้งที่')\n\n        // Tooltip icon\n        tooltip\n          .append('text')\n          .attr('class', 'tooltip-logo')\n          .attr('x', 25)\n          .attr('y', 20)\n          .attr('fill', constants.grey)\n          .attr('font-family', '\"Font Awesome 5 Pro\"')\n          .attr('font-size', '10px')\n          .text('\\uf017')\n\n        // Tooltip circle icon\n        tooltip\n          .append('text')\n          .attr('class', 'tooltip-logo')\n          .attr('x', 10)\n          .attr('y', 40)\n          .attr('fill', constants.graphColor)\n          .attr('stroke', constants.graphColor)\n          .attr('stroke-width', constants.circleRadius)\n          .attr('font-family', '\"Font Awesome 5 Pro\"')\n          .attr('font-size', '4px')\n          .text('\\uf111')\n\n        // Tooltip circle icon for Gold Trader\n        tooltip\n          .append('text')\n          .attr('class', 'tooltip-logo-trader')\n          .attr('x', 10)\n          .attr('y', 63)\n          .attr('fill', '#bababa')\n          .attr('stroke', '#bababa')\n          .attr('stroke-width', constants.circleRadius)\n          .attr('font-family', '\"Font Awesome 5 Pro\"')\n          .attr('font-size', '4px')\n          .text('\\uf111')\n\n        // Tooltip nav data\n        tooltip\n          .append('text')\n          .attr('x', 20)\n          .attr('y', 42)\n          .attr('class', 'tooltip-nav')\n          .attr('text-anchor', 'left')\n          .text('10.2464')\n\n        // Tooltip nav data for Gold Trader\n        tooltip\n          .append('text')\n          .attr('x', 20)\n          .attr('y', 85)\n          .attr('class', 'tooltip-nav-trader')\n          .attr('text-anchor', 'left')\n          .text('0')\n\n        // Tooltip percent change\n        tooltip\n          .append('text')\n          .attr('x', 100)\n          .attr('y', 42)\n          .attr('class', 'tooltip-change')\n          .attr('text-anchor', 'left')\n          .text('0')\n\n        // Tooltip percent change for Gold Trader\n        tooltip\n          .append('text')\n          .attr('x', 100)\n          .attr('y', 85)\n          .attr('class', 'tooltip-change-trader')\n          .attr('text-anchor', 'left')\n          .text('0%')\n      }\n\n      var generatePriceTooltip = () => {\n        let tooltip = vis.append('g').attr('class', 'price-tooltip')\n\n        tooltip\n          .append('rect')\n          .attr('class', 'price-tooltip-rect')\n          .attr('width', constants.tooltipRealtimePriceWidth)\n          .attr('height', constants.tooltipRealtimePriceHeight)\n          .attr('rx', 1)\n          .attr('ry', 1)\n          .data(formattedLineData)\n          .attr('x', d => xRange(d.t))\n          .attr('y', d => yRange(d.v))\n          .attr('fill', constants.priceToolipColor)\n          .attr('transform', `translate(10,-10)`)\n\n        // Tooltip nav data\n        tooltip\n          .append('text')\n          .attr('class', 'price-tooltip-nav')\n          .attr('text-anchor', 'left')\n          .data(formattedLineData)\n          .attr('x', d => xRange(d.t))\n          .attr('y', d => yRange(d.v))\n          .attr('transform', `translate(15,5)`)\n          .attr('fill', 'white')\n          .style('font-size', '10px')\n      }\n\n      if (isFirst) {\n        // Create x axis\n        vis\n          .append('svg:g')\n          .attr('class', 'x axis')\n          .call(xAxis)\n\n        // Create y axis\n        vis\n          .append('svg:g')\n          .attr('class', 'y axis')\n          .attr('transform', `translate(${svgWidth - 90},-10)`)\n          .attr('fill', 'none')\n          .call(yAxis)\n\n        // Create line in graph y axis\n        vis\n          .append('g')\n          .attr('class', 'grid')\n          .style('opacity', '.2')\n          .attr('transform', `translate(-${constants.offsetRightY},0)`)\n          .attr('stroke-dasharray', '3,3')\n          .call(\n            make_y_axis()\n              .tickSize(0 + svgWidth, 0, 0)\n              .tickFormat('')\n          )\n\n        // Data Line\n        vis\n          .append('path')\n          .attr('class', 'line-data')\n          .transition()\n          .duration(duration)\n          .ease(d3.easeLinear, 2)\n          .attr('d', lineGen(formattedLineData))\n          .attr('stroke', constants.graphColor)\n          .attr('stroke-width', constants.lineStroke)\n          .attr('fill', 'none')\n\n        // Data Line Gold Trader\n        vis\n          .append('path')\n          .attr('class', 'line-data-trader')\n          .transition()\n          .duration(duration)\n          .attr('d', traderGoldLineGen(this.traderPrice))\n          .attr('stroke', '#bababa')\n          .style('stroke-dasharray', constants.lineStrokeDash)\n          .attr('stroke-width', constants.lineStroke)\n          .attr('fill', 'none')\n\n        // Create circle in data point into graph\n        vis\n          .append('svg')\n          .selectAll('circle')\n          .data(formattedLineData)\n          .enter()\n          .append('circle')\n          .attr('cx', d => xRange(d.t))\n          .attr('cy', d => yRange(d.v))\n          .attr('class', 'price-circle')\n\n        vis\n          .append('svg')\n          .selectAll('circle')\n          .data(this.traderPrice)\n          .enter()\n          .append('circle')\n          .attr('cx', d => xRange(d.t))\n          .attr('cy', d => yRange(d.v))\n          .attr('class', 'price-circle')\n\n        // Create custom in last circle\n        vis\n          .selectAll('.price-circle:last-child')\n          .attr('fill', convertHex(constants.graphColor, 100))\n          .attr('stroke', convertHex(constants.graphColor, 50))\n          .attr('stroke-width', constants.circleRadius + 8)\n          .attr('r', constants.circleRadius)\n          .attr('fill', constants.graphColor)\n          .attr('class', 'blink')\n\n        // Create price tooltip\n        generatePriceTooltip()\n\n        // focus Tooltip\n        generateTooltip()\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('stroke', '#999999')\n          .style('display', 'none')\n\n        for (let i = 0; i < numberOfLineOnGraph; i++) {\n          // Circle\n          let focusCircle = vis\n            .append('g')\n            .attr('class', 'focus-circle ' + 'focusCircle' + i)\n            .style('display', 'none')\n\n          // Circle Background\n          focusCircle.append('circle').attr('r', constants.circleRadius + 3)\n\n          // Circle Inside\n          focusCircle\n            .append('circle')\n            .attr('class', 'inner-circle ' + 'innerCircle' + i)\n            .attr('r', constants.circleRadius)\n        }\n\n        // Hide gold trader graph\n        this.hideGoldTraderGraph(this.isGoldTrader)\n      } else {\n        // X Axis\n        vis\n          .select('.x')\n          .call(xAxis)\n          .transition()\n          .duration(duration)\n          .ease(d3.easeLinear, 2)\n\n        vis.selectAll('.focus-line').style('display', 'none')\n\n        vis.selectAll('.focus-circle').style('display', 'none')\n\n        vis.selectAll('.focus-tooltip-day').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          .attr('transform', `translate(-${constants.offsetRightY},0)`)\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(duration)\n          .ease(d3.easeLinear, 2)\n          .attr('d', lineGen(formattedLineData))\n          .attr('stroke', constants.graphColor)\n          .attr('fill', 'none')\n          .attr('transform', null)\n\n        // Data Line Gold Trader\n        vis\n          .select('.line-data-trader')\n          .transition()\n          .duration(duration)\n          .ease(d3.easeLinear, 2)\n          .attr('d', traderGoldLineGen(this.traderPrice))\n          .attr('stroke', '#bababa')\n          .style('stroke-dasharray', constants.lineStrokeDash)\n          .attr('fill', 'none')\n          .attr('transform', null)\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 elemFocusTooltipDate = vis.selectAll('.tooltip-date')\n      let elemFocusTooltipNav = vis.selectAll('.tooltip-nav')\n      let elemFocusTooltipChange = vis.select('.tooltip-change')\n      let elemFocusTooltipChangeIcon = vis.select('.tooltip-change-icon')\n\n      let elemFocusTooltipTraderAnnouncement = vis.selectAll('.tooltip-trader-announcement')\n      let elemFocusTooltipNavTrader = vis.selectAll('.tooltip-nav-trader')\n      let elemFocusTooltipChangeTrader = vis.select('.tooltip-change-trader')\n      let elemFocusTooltipChangeIconTrader = vis.select('.tooltip-change-icon-trader')\n\n      let arrElemFocusCircle = []\n\n      for (let i = 0; i < numberOfLineOnGraph; i++) {\n        arrElemFocusCircle.push(vis.select('.focusCircle' + i))\n      }\n\n      // Helpers function\n      let mouseEvent = {\n        bisectDate: () =>\n          d3.bisector(function(d) {\n            return d.t\n          }).left,\n        mouseOver: () => {\n        },\n        mouseOut: () => {\n          elemFocusLine.style('display', 'none')\n          elemFocusTooltip.style('display', 'none')\n\n          for (let n = 0; n < numberOfLineOnGraph; n++) {\n            arrElemFocusCircle[n].style('display', 'none')\n          }\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          for (let n = 0; n < numberOfLineOnGraph; n++) {\n            let lineData = n == 0 ? formattedLineData : this.traderPrice\n            let x0 = xRange.invert(xPos),\n              i = mouseEvent.bisectDate()(lineData, x0, 1),\n              d0 = lineData[i - 1],\n              d1 = lineData[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.style('display', null)\n              elemFocusCircle.style('display', null)\n              elemFocusTooltip.style('display', null)\n              arrElemFocusCircle[n].style('display', null)\n              elemFocusLine.attr('transform', 'translate(' + xRange(d.t) + ',' + 0 + ')')\n              arrElemFocusCircle[n]\n                .attr('transform', 'translate(' + xRange(d.t) + ',' + yRange(d.v) + ')')\n                .attr('fill', n == 0 ? constants.graphColor : '#bababa')\n\n              // Tooltip move\n              // Modify padding for displaying\n              let xPad = 0,\n                yPad = 0\n              if (svgWidth - xRange(d.t) < constants.tooltipWidth) {\n                xPad = -constants.tooltipWidth - constants.driftRightMargin * 2\n              }\n\n              if (\n                svgHeight - constants.margin.bottom - constants.margin.bgTop - 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              if (n == 0) {\n                // set tooltip price format\n                elemFocusTooltipNav.text(helpers.numberFormat(d.v))\n                // set tooltip date format\n                elemFocusTooltipDate.text(helpers.getDate(d.t))\n                // set tooltip color price change\n                elemFocusTooltipChange.text(helpers.changeFormat(d.p)).attr('fill', helpers.colorTheme(d.p))\n                elemFocusTooltipChangeIcon.text(helpers.iconPriceChange(d.p)).attr('fill', helpers.colorTheme(d.p))\n              } else {\n                // set tooltip price format for Trader line\n                elemFocusTooltipNavTrader.text(helpers.numberFormat(d.v))\n                // set tooltip announcement format for Trader line\n                elemFocusTooltipTraderAnnouncement.text(\n                  helpers.announcementFormat(d.adt, d.t, d.ct, this.getGoldSpotThaiRealtimeCurrentPeriod)\n                )\n                // set tooltip color price change for Trader line\n                elemFocusTooltipChangeTrader.text(helpers.changeFormat(d.p)).attr('fill', helpers.colorTheme(d.p))\n                elemFocusTooltipChangeIconTrader\n                  .text(helpers.iconPriceChange(d.p))\n                  .attr('fill', helpers.colorTheme(d.p))\n              }\n\n              elemFocusTooltip.attr(\n                'transform',\n                'translate(' +\n                  (xRange(this.isGoldTrader ? d.t : formattedLineData[i].t) + xPad + constants.driftRightMargin) +\n                  ',' +\n                  (yRange(this.isGoldTrader ? d.v : formattedLineData[i].v) + yPad - constants.driftTopMargin) +\n                  ')'\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('height', svgHeight - constants.margin.bottom - constants.margin.bgTop)\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        var fontSize\n        if (svgWidth < 768) {\n          fontSize = '10px'\n        } else {\n          fontSize = '14px'\n        }\n        vis\n          .selectAll('.tick text')\n          .attr('x', constants.tickMoveFactor)\n          .attr('y', 10)\n          .attr('font-family', '\"DBHeaventRez\"')\n          .style('font-size', fontSize)\n          .attr('fill', constants.grey)\n\n        vis.selectAll('.x .tick text').attr('x', 0)\n\n        vis.selectAll('.x .tick text').attr('y', this.graphHeight() - 15)\n\n        vis.selectAll('.y .tick text').style('font-size', fontSize)\n\n        vis.selectAll('.y').attr('transform', `translate(${svgWidth - 90},-10)`)\n\n        vis.selectAll('.grid').attr('transform', `translate(-${constants.offsetRightY},0)`)\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          .style('font-size', fontSize)\n\n        vis\n          .selectAll('.focus-line')\n          .attr('y1', constants.margin.top)\n          .attr('y2', svgHeight)\n\n        // Update last circle position\n        vis\n          .selectAll('.blink')\n          .attr('cx', () => {\n            return xRange(formattedLineData[formattedLineData.length - 1].d)\n          })\n          .attr('cy', () => {\n            return yRange(formattedLineData[formattedLineData.length - 1].v)\n          })\n          .transition()\n          .duration(duration)\n          .ease(d3.easeLinear, 2)\n\n        // Update position (price tooltip)\n        vis\n          .selectAll('.price-tooltip-rect')\n          .attr('x', () => {\n            return xRange(formattedLineData[formattedLineData.length - 1].d)\n          })\n          .attr('y', () => {\n            return yRange(formattedLineData[formattedLineData.length - 1].v)\n          })\n        // Update position and last price (nav price tooltip)\n        vis\n          .selectAll('.price-tooltip-nav')\n          .attr('x', () => {\n            return xRange(formattedLineData[formattedLineData.length - 1].d)\n          })\n          .attr('y', () => {\n            return yRange(formattedLineData[formattedLineData.length - 1].v)\n          })\n          .text(() => {\n            return formatCurrency(formattedLineData[formattedLineData.length - 1].v, 'THB', 2)\n          })\n\n        document.getElementById(this.goldSpotId).style.height = this.graphHeight() + 'px'\n      }\n\n      tickUpdate()\n\n      // Inner circle focusing\n      vis.selectAll('.inner-circle').attr('fill', 'white')\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        // Update Position and Data Line\n        vis.select('.line-data').attr('d', lineGen(formattedLineData))\n        // vis.select(\".line-data\").attr(\"d\", traderGoldLineGen(this.traderPrice))\n\n        // Update Position and Data circle\n        vis\n          .selectAll('.price-circle')\n          .data(formattedLineData)\n          .attr('cx', function(d) {\n            return xRange(d.t)\n          })\n          .attr('cy', function(d) {\n            return yRange(d.v)\n          })\n\n        vis\n          .selectAll('.price-circle')\n          .data(formattedLineData)\n          .attr('cx', function(d) {\n            return xRange(d.t)\n          })\n          .attr('cy', function(d) {\n            return yRange(d.v)\n          })\n\n        vis\n          .select('.grid')\n          .attr('class', 'grid')\n          .style('opacity', '.2')\n          .attr('transform', 'translate(50, 0)')\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    callProfessionalGraph() {\n      this.$emit('call-tradingview', true)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n#gold-spot {\n  .graph-area {\n    position: relative;\n    height: 100%;\n    margin-top: 12px;\n    .market-status {\n      color: $color-minus;\n      @extend %font-size-ss;\n      i {\n        font-size: 12px;\n      }\n    }\n    svg {\n      -webkit-user-select: none; /* Safari */\n      -ms-user-select: none; /* IE 10+ and Edge */\n      user-select: none; /* Standard syntax */\n    }\n  }\n  .professional-btn-center {\n    margin: 20px 0 25px 0;\n    text-align: center;\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        margin-right: 4px;\n      }\n    }\n  }\n  .tooltip-rect {\n    fill: #ffffff;\n    fill-opacity: 1;\n    stroke: rgba(186, 186, 186, 0.24);\n    stroke-width: 1px;\n  }\n  .tooltip-nav {\n    fill: #444444;\n    @extend %font-size-sss;\n    font-weight: bold;\n    text-anchor: left;\n  }\n  .tooltip-nav-trader {\n    fill: #444444;\n    @extend %font-size-sss;\n    font-weight: bold;\n    text-anchor: left;\n  }\n  .tooltip-change {\n    @extend %font-size-sss;\n    font-weight: bold;\n  }\n  .tooltip-change-trader {\n    @extend %font-size-sss;\n    font-weight: bold;\n  }\n  .tooltip-date {\n    fill: #979797;\n    @extend %font-size-sss;\n  }\n  .tooltip-trader-announcement {\n    fill: #979797;\n    @extend %font-size-sss;\n  }\n  .tooltip-created-at {\n    fill: #979797;\n    text-anchor: left;\n    @extend %font-size-sss;\n  }\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!./GoldSpotThaiGraph.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!./GoldSpotThaiGraph.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GoldSpotThaiGraph.vue?vue&type=template&id=33be36da&\"\nimport script from \"./GoldSpotThaiGraph.vue?vue&type=script&lang=js&\"\nexport * from \"./GoldSpotThaiGraph.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GoldSpotThaiGraph.vue?vue&type=style&index=0&lang=scss&\"\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":""}