{"version":3,"sources":["webpack:///./src/components/miniapp/gold/GoldSpotGraph.vue?ec2d","webpack:///src/components/miniapp/gold/GoldSpotGraph.vue","webpack:///./src/components/miniapp/gold/GoldSpotGraph.vue?e758","webpack:///./src/components/miniapp/gold/GoldSpotGraph.vue","webpack:///./src/components/miniapp/gold/GoldSpotGraph.vue?7d4a"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","marketStatus","_v","_e","staticStyle","goldSpotId","getGoldSpotRealtimePeriod","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","announcementFormate","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","tooltipWidth","tooltipHeight","tooltipRealtimePriceWidth","tooltipRealtimePriceHeight","driftRightMargin","driftTopMargin","tickMoveFactor","components","PeriodNavigation","props","type","String","data","firstPaint","loading","lastPrice","countTime","timeInterval","sockets","socketData","computed","limitDataPoint","getGoldSpotRealtimeCurrentPeriod","minute","formatTitle","helpers","format","formatTimeScale","beforeDestroy","clearInterval","disconnectSocket","destroyed","readyState","onclose","methods","connectSocket","loc","window","location","protocol","uri","host","WebSocket","close","updateLastPrice","arrData","length","$store","state","gold","goldSpotLastPrice","b","updatePriceLabel","vis","selectAll","attr","yRange","updateWithInterval","setInterval","updateYAxis","shift","push","drawGraph","findTimeMoreThanLatest","item","filter","getSocket","onmessage","Error","error","graphHeight","graphWidth","graphRatio","renderGraph","getGoldSpotRealtimeGraph","calyRangeDomain","periodAggregate","includes","yMax","maxSocketRange","yMin","minSocketRange","diff","calxRangeDomain","t","limit","duration","svgWidth","clientWidth","svgHeight","spaceNavLineElem","style","height","xRange","xAxis","yAxis","sizeUpdate","rangeUpdate","axisUpdate","make_y_axis","generateTooltip","tooltip","generatePriceTooltip","isFirst","focusCircle","append","bisectDate","d","mouseOver","mouseOut","elemFocusLine","elemFocusCircle","elemFocusTooltip","mouseMove","mouseEvent","handleMove","touchMove","d0","d1","x0","xPad","v","yPad","elemFocusTooltipNav","text","elemFocusTooltipDate","elemFocusTooltipChange","p","elemFocusTooltipChangeIcon","select","remove","fontSize","document","getElementById","tickUpdate","call","lineGen","formattedLineData","updateAxisAndGraph","callProfessionalGraph","$emit","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,cAAc,CAACF,EAAG,MAAM,CAACG,YAAY,cAAc,CAAEP,EAAIQ,cAAqC,SAArBR,EAAIQ,aAAyBJ,EAAG,MAAM,CAACG,YAAY,iBAAiB,CAACH,EAAG,IAAI,CAACG,YAAY,wBAAwBP,EAAIS,GAAG,eAAeT,EAAIU,KAAMV,EAAW,QAAEI,EAAG,MAAM,CAACG,YAAY,gBAAgBI,YAAY,CAAC,SAAW,aAAa,CAACP,EAAG,MAAM,CAACG,YAAY,UAAUP,EAAIU,KAAKN,EAAG,MAAM,CAACE,MAAM,CAAC,GAAKN,EAAIY,WAAW,MAAQ,YAAYR,EAAG,MAAM,CAACG,YAAY,eAAe,CAACH,EAAG,mBAAmB,CAACE,MAAM,CAAC,WAAa,UAAU,eAAiB,MAAM,cAAc,0BAA0B,UAAYN,EAAIa,0BAA0BC,MAAM,MAAQ,SAAS,YAAcd,EAAIa,0BAA0BE,QAAQ,aAAe,GAAGC,GAAG,CAAC,cAAchB,EAAIiB,iBAAiB,MAC/0BC,EAAkB,G,stBC8CtB,IAMA,IANA,iEAEA,cACA,0BACA,oDAKA,GACEC,GAAIC,EAAN,MACIC,QAAS,IACTC,UAAW,IACXC,SAAU,CAAC,GACXC,SAAU,CAAC,IAAK,IAChBC,SAAU,iBACVC,KAAM,WACNC,KAAM,WACNC,QAAS,CAAC,KAAM,MAChBC,KAAM,CAAC,SAAU,SAAU,UAAW,YAAa,WAAY,SAAU,YACzEC,UAAW,CAAC,IAAK,IAAK,IAAK,IAAK,KAAM,IAAK,KAC3CC,OAAQ,CACZ,SACA,aACA,SACA,SACA,UACA,WACA,UACA,UACA,UACA,SACA,YACA,WAEIC,YAAa,CAAC,OAAQ,OAAQ,QAAS,QAAS,OAAQ,QAAS,OAAQ,OAAQ,OAAQ,OAAQ,OAAQ,UAE3GC,aAAc,SAAhB,GACI,IAAIC,EAAQC,EAAIC,WAAWC,MAAM,KAEjC,OADAH,EAAM,GAAKA,EAAM,GAAGI,QAAQ,wBAAyB,KAC9C,KAAX,qBAEEC,oBAAqB,SAAvB,KACI,MAAiB,MAAVC,EAAiB,kBAA5B,gCAEEC,aAAc,SAAhB,GACI,IAAJ,2BACI,OAAIC,EAAc,EAAU,IAAhC,cACW,GAAX,eAGEC,UAAWvB,EAAb,6BACEwB,QAASxB,EAAX,4BACEyB,WAAY,SAAd,GACI,OAAIC,EAAK,EAAUC,EAAUC,OACjC,cACWD,EAAUE,MAEnBC,gBAAiB,SAAnB,GACI,OAAIJ,EAAK,EAAU,IACvB,SACW,MAKX,GACEK,sBAAuB,GAGvBC,KAAM,UACNJ,OAAQ,UACRC,KAAM,UACNI,OAAQ,UACRC,WAAY,UACZC,iBAAkB,wBAElBC,OAAQ,CACNC,IAAK,GACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,GACRC,MAAO,IAITC,aAAc,GAGdC,YAAa,IACbC,WAAY,EACZC,WAAY,EACZC,aAAc,EAGdC,aAAc,IACdC,cAAe,GACfC,0BAA2B,GAC3BC,2BAA4B,GAE5BC,iBAAkB,GAClBC,eAAgB,KAGhBC,eAAgB,IAGlB,GACEC,WAAY,CACVC,iBAAJ,GAEEC,MAAO,CACLhE,WAAY,CACViE,KAAMC,OACN/D,QAAS,4BAGbgE,KAVF,WAWI,MAAO,CACLC,YAAY,EACZC,SAAS,EACTC,UAAW,GACXC,UAAW,KACXC,aAAc,KACdC,QAAS,GACTC,WAAY,GACZ9E,aAAc,OAGlB+E,SAAU,EAAZ,GACA,uBACA,2BACA,mCACA,4BACA,sBACA,yBANA,CAQIC,eARJ,WASM,IAAN,MACM,OAAQvF,KAAKwF,kCACX,IAAK,KACH,OAAOC,EACT,IAAK,KACH,OAAgB,EAATA,EACT,IAAK,MACH,OAAgB,GAATA,EACT,IAAK,KACH,OAAgB,GAATA,EACT,IAAK,MACH,OAAgB,GAATA,EAAc,GACvB,IAAK,KACH,OAAgB,GAATA,EAAc,GACvB,QACE,OAAO,MAGbC,YA3BJ,WA4BM,OAAQ1F,KAAKwF,kCACX,IAAK,KACH,OAAOG,EAAQzE,GAAG0E,OAAO,YAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,MACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,MACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,MACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQzE,GAAG0E,OAAO,MAC3B,IAAK,MACH,OAAOD,EAAQzE,GAAG0E,OAAO,MAC3B,IAAK,MACH,OAAOD,EAAQzE,GAAG0E,OAAO,MAC3B,QACE,OAAOD,EAAQzE,GAAG0E,OAAO,cAG/BC,gBA/DJ,WAgEM,OAAQ7F,KAAKwF,kCACX,IAAK,KACH,OAAOrE,EAAjB,eACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,MACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,eACQ,IAAK,MACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,eACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,MACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,KACH,OAAOA,EAAjB,cACQ,IAAK,MACH,OAAOA,EAAjB,cACQ,IAAK,MACH,OAAOA,EAAjB,cACQ,QACE,OAAO,MAIf,QA1HF,6KA2HA,iBA3HA,OA2HA,EA3HA,OA4HA,qCA5HA,wGA8HE,QA9HF,8JA+HA,2BA/HA,SAgIA,mCAhIA,cAgIA,kBAhIA,gBAiIA,iBAjIA,OAkIA,2BAlIA,wGAoIE2E,cApIF,WAqIIC,cAAc/F,KAAKmF,cACnBnF,KAAKgG,oBAEPC,UAxIF,WAyIQjG,KAAKoF,SAAuC,IAA5BpF,KAAKoF,QAAQc,aAAkBlG,KAAKoF,QAAQe,QAAU,eAE5EC,QAAS,EAAX,GACA,uBACA,8BACA,+BACA,6BACA,wBACA,yBACA,0BAPA,GASA,+CATA,CAUI,UAVJ,uKAWA,kCAXA,WAYA,kDAZA,gCAaA,oBAbA,6CAcA,mBAdA,wBAeA,wBAfA,yBAgBA,mBAhBA,WAiBA,2BAjBA,kCAkBA,qBAlBA,QAmBA,iBACA,6EApBA,yGAuBIC,cAvBJ,WAwBM,IAAIC,EAAMC,OAAOC,SACvB,QAC2B,WAAjBF,EAAIG,WAAuBC,EAAM,QAErCA,GAAO,KAAOJ,EAAIK,KAClBD,GAAO,oDAEP1G,KAAKoF,QAAU,IAAIwB,UAAUF,IAE/BV,iBAjCJ,WAkCUhG,KAAKoF,SAAuC,IAA5BpF,KAAKoF,QAAQc,YAAkBlG,KAAKoF,QAAQyB,SAElE,aApCJ,oEAoCA,GApCA,oFAqCA,yCArCA,yCAqCA,GArCA,WAsCA,aAtCA,yCAsCA,GAtCA,cAuCA,yCACA,uDACA,iCAzCA,SA0CA,wBA1CA,cA2CA,2BA3CA,UA4CA,iBA5CA,QA6CA,2BA7CA,0GA+CIC,gBA/CJ,SA+CA,GACUC,GAAWA,EAAQC,SAAQhH,KAAKiH,OAAOC,MAAMC,KAAKC,kBAAoBL,EAAQ,GAAGM,IAEvFC,iBAlDJ,SAkDA,GACM,IAAN,sCAEMC,EAAIC,UAAU,uBAAuBC,KAAK,KAAK,WAC7C,OAAOC,EAAOX,EAAQ,GAAGM,MAG3BE,EACN,gCACA,qBACQ,OAAR,aAEA,sCAEII,mBAhEJ,WAgEA,WAEM3H,KAAKkF,UAAY,OAAvB,OAAuB,CAAvB,gEAEMlF,KAAKmF,aAAeyC,YAApB,kCAAN,+GAEA,uBAGA,kBAYA,MAjBA,uBAkBA,qFACA,sDAnBA,SAoBA,2CApBA,OAqBA,gBArBA,2CAuBA,MAEIC,YA7FJ,SA6FA,GACU7H,KAAKqF,WAAW2B,OAAS,IAAIhH,KAAKqF,WAAWyC,QACjD9H,KAAKqF,WAAW0C,KAAKjD,EAAK,GAAGuC,GAC7BrH,KAAKgI,UAAU,CAArB,cAEIC,uBAlGJ,SAkGA,cACM,OAAOC,EAAKC,QAAO,SAAzB,oFAEI,aArGJ,mMAuGA,sDAvGA,cAuGA,EAvGA,OAwGA,2BACA,2EACA,wBACA,wBACA,wBACA,GACA,GACA,wBACA,oBACA,OACA,qDAlHA,SAoHA,+BApHA,cAoHA,EApHA,iBAqHA,qCArHA,mEAuHA,gBAvHA,kHA0HI,YA1HJ,sLA4HA,4BACA,6CACA,iCA9HA,cA4HA,EA5HA,gBAgIA,oCAhIA,gEAkIA,gBAlIA,iHAqIIC,UArIJ,WAqIA,WACM,IACEpI,KAAKoF,QAAQiD,UAAb,WAAR,0JACA,qBACA,gDAFA,SAGA,4BAHA,UAGA,EAHA,QAIA,SAJA,oBAKA,eACA,+CANA,kCAOA,2CAPA,QAQA,gBARA,QAUA,gDACA,2BAEA,+BACA,gCAdA,+FAAQ,GAiBR,SAEQ,MADArI,KAAKqG,gBACC,IAAIiC,MAAMC,KAGpB,iBA7JJ,+KA8JA,kDA9JA,UA+JA,4BACA,kCACA,4CAjKA,qBAkKA,sDAlKA,iCAmKA,6DAnKA,gDAqKA,4DArKA,yGAyKIC,YAzKJ,WA0KM,IAAN,uDACA,cAEM,OAAOC,EAAaC,GAEtBC,YA/KJ,WAgLM,OAA6C,IAAzC3I,KAAK4I,yBAAyB5B,OAAqB,EACnD7F,EAAV,iDAEUnB,KAAK+E,YACP/E,KAAKgI,UAAU,CAAvB,aACQhI,KAAK+E,YAAa,GAElB/E,KAAKgI,UAAU,CAAvB,eAGIa,gBA1LJ,SA0LA,OACM,GAAIC,EAAgBC,SAAS/I,KAAKwF,mCAAqCxF,KAAKqF,WAAW2B,OAAQ,CAC7F,IAAR,0DACA,0DACQgC,EAAOC,EAAiBD,EAAOC,EAAiBD,EAChDE,EAAOC,EAAiBD,EAAOC,EAAiBD,EAElD,IAAN,WACM,MAAO,CAACF,EAAOI,EAAMF,EAAOE,IAE9BC,gBApMJ,SAoMA,OACM,OACN,mDACA,kDAEe,CAACvE,EAAKA,EAAKkC,OAAS,GAAGsC,EAAIC,EAAQC,EAAU1E,EAAKA,EAAKkC,OAAS,GAAGsC,EAAIE,GAEvE,CAACrI,EAAhB,wFAGI6G,UA9MJ,SA8MA,OAeA,IACA,IAhBA,OACA,YAEA,gCAEA,sCACA,2CAYA,8CACA,8CACA,MACA,sBAGA,cACQ,IAAR,gBACA,qBACU,sBAAV,EACU,sBAAV,IAEA,qCACQ,MAAO,KAAf,WAGA,aACQ,IAAR,oDACQyB,EAAWC,GAA4B,EACvCC,EAAY,EAApB,cACQC,EAAiBC,MAAMC,OAASH,EAAY,MAGpD,aACQI,EAAS5I,EAAjB,OAEA,4DACA,iCAKQuG,EAASvG,EAAjB,OAEA,wCACA,kCAGA,aACQ,IAAR,OACQ6I,EAAQ7I,EAAhB,KACA,GACA,0BACA,yBAEQ8I,EAAQ9I,EAAhB,KACA,GACA,cACA,UAGM+I,IACAC,IACAC,IAGA,IAAN,WAEA,cACA,eAAQ,OAAR,UACA,eAAQ,OAAR,UAGUC,EAAc,WAChB,IAAR,OAEQ,OAAOlJ,EAAf,kBAGUmJ,EAAkB,WAEpB,IAAR,IACA,YACA,8BACA,wBAGQC,EACR,eACA,6BACA,6BACA,+BACA,aACA,aAGQA,EACR,eACA,aACA,aACA,6BACA,2BACA,oBACA,iBAGQA,EACR,eACA,6BACA,aACA,aACA,oBACA,2CACA,yBACA,UAGQA,EACR,eACA,6BACA,aACA,aACA,0BACA,4BACA,oCACA,2CACA,wBACA,UAGQA,EACR,eACA,aACA,aACA,4BACA,2BACA,gBAGQA,EACR,eACA,cACA,aACA,+BACA,2BACA,WAGUC,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,CAEXlD,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,cACA,oBACA,QACA,QACA,iBACA,uBAAU,OAAV,UACA,uBAAU,OAAV,UACA,6BAGQA,EACR,sCACA,8CACA,+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","file":"js/chunk-96e017be.e722d914.js","sourcesContent":["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_spot_period\",\"arrPeriod\":_vm.getGoldSpotRealtimePeriod.range,\"alias\":\"period\",\"defaultItem\":_vm.getGoldSpotRealtimePeriod.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        <!-- <defs>\n          <pattern id=\"pattern1\" x=\"10\" y=\"10\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\" />\n        </defs>-->\n      </svg>\n    </div>\n    <div class=\"period-area\">\n      <PeriodNavigation\n        backgorund=\"#ffffff\"\n        activePosition=\"top\"\n        data-action=\"change_gold_spot_period\"\n        :arrPeriod=\"getGoldSpotRealtimePeriod.range\"\n        :alias=\"`period`\"\n        @select-data=\"choosePeriod\"\n        :defaultItem=\"getGoldSpotRealtimePeriod.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 * as d3 from 'd3'\nimport { mapGetters, mapActions } from 'vuex'\nimport { timestampToDate, findPreviousDate, findNextTime, convertHex } from '../../../utils/global'\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  announcementFormate: function(num, period) {\n    return period == '1D' ? `ประกาศครั้งที่ ${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-%dT%H:%M:%SZ\"),\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', //da1616\n  stable: '#999999',\n  graphColor: '#3fc0bf',\n  priceToolipColor: 'rgba(63, 192, 191, 1)',\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\n  // Tooltip\n  tooltipWidth: 150,\n  tooltipHeight: 60,\n  tooltipRealtimePriceWidth: 60,\n  tooltipRealtimePriceHeight: 20,\n\n  driftRightMargin: 10,\n  driftTopMargin: 22.5,\n\n  // Tick Styling\n  tickMoveFactor: 34\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  },\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    }\n  },\n  computed: {\n    ...mapGetters('gold', [\n      'getGoldSpotRealtimeGraph',\n      'getGoldSpotRealtimeCurrentPeriod',\n      'getGoldSpotRealtimePeriod',\n      'getGoldGlobalConfig',\n      'getGoldSpotLastQuote'\n    ]),\n    limitDataPoint() {\n      let minute = 120\n      switch (this.getGoldSpotRealtimeCurrentPeriod) {\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 120 // 1 minute\n      }\n    },\n    formatTitle() {\n      switch (this.getGoldSpotRealtimeCurrentPeriod) {\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.getGoldSpotRealtimeCurrentPeriod) {\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    ns ? this.clearGoldSpotRealtimeGraph() : null\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      'updateGoldSpotRealtimeGraph',\n      'updateGoldSpotAggregateGraph',\n      'clearGoldSpotRealtimeGraph',\n      'fetchGoldSpotSnapshot',\n      'fetchGoldSpotAggregate',\n      'findGoldSpotLastQuote'\n    ]),\n    ...mapActions('global', ['fetchMarketStatus']),\n    async queryData() {\n      await this.clearGoldSpotRealtimeGraph()\n      periodAggregate.includes(this.getGoldSpotRealtimeCurrentPeriod)\n        ? await this.getAggregate()\n        : await this.getSnapshot()\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.getGoldSpotRealtimeCurrentPeriod)) this.updateWithInterval()\n      }\n    },\n    connectSocket() {\n      var 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.getGoldSpotRealtimeCurrentPeriod) return 0\n      if (this.loading) return 0\n      this.getGoldSpotRealtimePeriod.default = period\n      this.$store.state.gold.goldSpotRealtimeCurrentPeriod = 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) this.$store.state.gold.goldSpotLastPrice = arrData[0].b // update last price\n    },\n    updatePriceLabel(arrData) {\n      let vis = d3.select(`#${this.goldSpotId}`)\n      // Update position (price tooltip)\n      vis.selectAll('.price-tooltip-rect').attr('y', () => {\n        return yRange(arrData[0].b)\n      })\n      // Update position and last price (nav price tooltip)\n      vis\n        .selectAll('.price-tooltip-nav')\n        .attr('y', () => {\n          return yRange(arrData[0].b)\n        })\n        .text(formatCurrency(arrData[0].b, 'USD', 3))\n    },\n    updateWithInterval() {\n      // Set the date we're counting down to\n      this.countTime = findNextTime(this.getGoldSpotRealtimeCurrentPeriod, this.getGoldGlobalConfig)\n      // Update the count down every 1 second\n      this.timeInterval = setInterval(async () => {\n        // Get today's date and time\n        var now = new Date().getTime()\n\n        // Find the distance between now and the count down date\n        var distance = this.countTime - now\n\n        // Time calculations for days, hours, minutes and seconds\n        // var days = Math.floor(distance / (1000 * 60 * 60 * 24))\n        // var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))\n        // var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))\n        // var seconds = Math.floor((distance % (1000 * 60)) / 1000)\n\n        // Output the result in an element with id=\"demo\"\n        // this.time = days + \"d \" + hours + \"h \" + minutes + \"m \" + seconds + \"s \"\n\n        // If the count down is over, write some text\n        if (distance <= 0) {\n          this.countTime = findNextTime(this.getGoldSpotRealtimeCurrentPeriod, this.getGoldGlobalConfig)\n          this.lastPrice && this.lastPrice.length ? (this.lastPrice[0].t = now) : null // set time form interval\n          await this.updateGoldSpotRealtimeGraph(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(data[0].b)\n      this.drawGraph({ isFirst: false })\n    },\n    findTimeMoreThanLatest(item) {\n      return item.filter(item => item.t > this.getGoldSpotRealtimeGraph[this.getGoldSpotRealtimeGraph.length - 1].t)\n    },\n    async getAggregate() {\n      try {\n        const prevDate = await findPreviousDate(this.getGoldSpotRealtimeCurrentPeriod)\n        const gcsConfig = this.getGoldGlobalConfig\n          .filter(item => item.period == this.getGoldSpotRealtimeCurrentPeriod)\n          .map(item => ({\n            multiplier: item.multiplier,\n            timespan: item.timespan\n          }))[0]\n        const data = {\n          multiplier: gcsConfig.multiplier,\n          timespan: gcsConfig.timespan,\n          from: prevDate,\n          to: timestampToDate(Date.now(), 'YYYY-MM-DD', 'global')\n        }\n        let goldSpotAggr = await this.fetchGoldSpotAggregate(data)\n        await this.updateGoldSpotAggregateGraph(goldSpotAggr)\n      } catch (error) {\n        throw new Error(error)\n      }\n    },\n    async getSnapshot() {\n      try {\n        const response = await this.fetchGoldSpotSnapshot({\n          period: this.getGoldSpotRealtimeCurrentPeriod,\n          marketStatus: this.marketStatus\n        })\n        await this.updateGoldSpotRealtimeGraph(response)\n      } catch (error) {\n        throw new Error(error)\n      }\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/USD') // filter type of curency\n          data = await this.findTimeMoreThanLatest(data)\n          if (data.length) {\n            this.lastPrice = data\n            if (periodCurrentTick.includes(this.getGoldSpotRealtimeCurrentPeriod)) {\n              await this.updateGoldSpotRealtimeGraph(this.lastPrice)\n              this.renderGraph()\n            }\n            if (periodAggregate.includes(this.getGoldSpotRealtimeCurrentPeriod)) {\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    async appendLatestTick() {\n      await this.findGoldSpotLastQuote({from: \"XAU\", to: \"USD\"})\n      const lastQuote = this.getGoldSpotLastQuote\n      const goldSpotRealtimeGraph = this.getGoldSpotRealtimeGraph\n      if (lastQuote && goldSpotRealtimeGraph.length > 0 && lastQuote.timestamp > goldSpotRealtimeGraph[goldSpotRealtimeGraph.length-1].t) {\n        if (periodAggregate.includes(this.getGoldSpotThaiRealtimeCurrentPeriod)) {\n          await this.updateGoldSpotAggregateGraph([{c: lastQuote.bid, t: lastQuote.timestamp}])\n        } else {\n          await this.updateGoldSpotRealtimeGraph([{b: lastQuote.bid, t: lastQuote.timestamp}])\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.getGoldSpotRealtimeGraph.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.getGoldSpotRealtimeCurrentPeriod) && 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.getGoldSpotRealtimeCurrentPeriod) ||\n        periodCurrentTick.includes(this.getGoldSpotRealtimeCurrentPeriod)\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    drawGraph(options) {\n      let isFirst = options.isFirst\n      // Preparing Data\n      let formattedLineData = this.getGoldSpotRealtimeGraph\n\n      let vis = d3.select(`#${this.goldSpotId}`)\n      let spaceNavLineElem = document.getElementById(this.goldSpotId)\n\n      // change format date\n      // formattedLineData.forEach(d => {\n      //   d.t = new Date(d.t)\n      // })\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 yMin = d3.min(formattedLineData, d => Number(d.v))\n      let yMax = d3.max(formattedLineData, 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\n      // manage text in ticks\n      let formatCurrency = d => {\n        let toNumber = parseFloat(d)\n          .toLocaleString('th', {\n            minimumFractionDigits: 3,\n            maximumFractionDigits: 4\n          })\n          .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n        return `$ ${toNumber}`\n      }\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        // graphMargin = (yMax * 0.5) / 100\n        // graphMargin = (yMax - yMin) * constants.graphMarginPercentage\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        let tickCount = 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      // y Axis\n      var make_y_axis = function() {\n        let tickCount = svgWidth / 50\n\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 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 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 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\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        // 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        // 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        // Circle\n        let focusCircle = vis\n          .append('g')\n          .attr('class', 'focus-circle')\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')\n          .attr('r', constants.circleRadius)\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\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      // 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          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          \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.style('display', null)\n            elemFocusCircle.style('display', null)\n            elemFocusTooltip.style('display', null)\n            elemFocusLine.attr('transform', 'translate(' + xRange(d.t) + ',' + 0 + ')')\n            elemFocusCircle\n              .attr('transform', 'translate(' + xRange(d.t) + ',' + yRange(d.v) + ')')\n              .attr('fill', constants.graphColor)\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 (svgHeight - constants.margin.bottom - constants.margin.bgTop - yRange(d.v) < constants.tooltipHeight) {\n              yPad = -constants.tooltipHeight / 2\n            }\n\n            if (yRange(d.v) < constants.tooltipHeight) {\n              yPad = constants.tooltipHeight / 2\n            }\n\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\n            // elemFocusTooltip.attr(\"transform\", \"translate(\" + xRange(d.t+xPad) + \",\" + yRange(d.v+yPad) + \")\")\n\n            elemFocusTooltip.attr(\n              'transform',\n              'translate(' +\n                (xRange(d.t) + 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('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        // vis.selectAll(\".x .tick:nth-of-type(2) 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, 'USD', 3)\n          })\n\n        document.getElementById(this.goldSpotId).style.height = this.graphHeight() + 'px'\n      }\n\n      tickUpdate()\n\n      // Inner circle focusing\n      vis.select('.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\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        // Hide Position and Data circle\n        // vis.selectAll(\".price-circle\").attr(\"display\", \"none\")\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  }\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-change {\n    @extend %font-size-sss;\n    font-weight: bold;\n  }\n  .tooltip-date {\n    fill: #979797;\n    @extend %font-size-sss;\n  }\n  .tooltip-created-at {\n    fill: #444444;\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!./GoldSpotGraph.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!./GoldSpotGraph.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GoldSpotGraph.vue?vue&type=template&id=6e89f45e&\"\nimport script from \"./GoldSpotGraph.vue?vue&type=script&lang=js&\"\nexport * from \"./GoldSpotGraph.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GoldSpotGraph.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","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!./GoldSpotGraph.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!./GoldSpotGraph.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}