{"version":3,"sources":["webpack:///./src/components/miniapp/gold/GoldSpotGraphHistory.vue?232b","webpack:///src/components/miniapp/gold/GoldSpotGraphHistory.vue","webpack:///./src/components/miniapp/gold/GoldSpotGraphHistory.vue?9f51","webpack:///./src/components/miniapp/gold/GoldSpotGraphHistory.vue","webpack:///./node_modules/querystring-es3/decode.js","webpack:///./node_modules/querystring-es3/index.js","webpack:///./src/components/miniapp/gold/GoldSpotGraphHistory.vue?4fdd","webpack:///./node_modules/querystring-es3/encode.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","staticStyle","_e","goldSpotId","getGoldSpotHistoryPeriod","range","$store","state","gold","goldSpotHistoryCurrentPeriod","on","choosePeriod","callProfessionalGraph","_v","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","components","PeriodNavigation","props","type","String","default","isRealtime","Boolean","arrData","Array","data","firstPaint","loading","watch","computed","yAxisFormatTitle","helpers","format","yAxisFormatTick","methods","graphHeight","graphWidth","graphRatio","checkNavData","length","renderGraph","drawGraph","formattedLineData","forEach","d","Date","svgWidth","clientWidth","svgHeight","spaceNavLineElem","style","height","xRange","yRange","xAxis","yAxis","sizeUpdate","rangeUpdate","axisUpdate","make_y_axis","generateTooltip","tooltip","isFirst","vis","focusCircle","append","attr","circleRadius","select","call","selectAll","bisectDate","mouseOver","elemFocusLine","elemFocusCircle","elemFocusTooltip","mouseOut","mouseMove","mouseEvent","handleMove","touchMove","d0","d1","x0","tooltipWidth","xPad","driftRightMargin","margin","bottom","bgTop","v","tooltipHeight","yPad","elemFocusTooltipNav","text","elemFocusTooltipDate","remove","fontSize","document","getElementById","tickUpdate","lineGen","updateAxisAndGraph","$emit","component","hasOwnProperty","obj","prop","Object","prototype","module","exports","qs","sep","eq","options","regexp","maxKeys","len","i","kstr","vstr","k","x","idx","indexOf","substr","decodeURIComponent","isArray","push","xs","decode","parse","encode","stringify","stringifyPrimitive","isFinite","name","undefined","map","objectKeys","ks","encodeURIComponent","join","f","res","keys","key"],"mappings":"0HAAA,I,EAAIA,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,EAAW,QAAEI,EAAG,MAAM,CAACG,YAAY,gBAAgBC,YAAY,CAAC,SAAW,aAAa,CAACJ,EAAG,MAAM,CAACG,YAAY,UAAUP,EAAIS,KAAKL,EAAG,MAAM,CAACE,MAAM,CAAC,GAAKN,EAAIU,WAAW,MAAQ,SAAS,CAACN,EAAG,OAAO,CAACA,EAAG,UAAU,CAACE,MAAM,CAAC,GAAK,WAAW,EAAI,KAAK,EAAI,KAAK,MAAQ,KAAK,OAAS,KAAK,aAAe,0BAA0BF,EAAG,MAAM,CAACG,YAAY,eAAe,CAACH,EAAG,mBAAmB,CAACE,MAAM,CAAC,WAAa,UAAU,eAAiB,MAAM,cAAc,qBAAqB,iBAAiB,OAAO,iBAAiB,OAAO,UAAYN,EAAIW,yBAAyBC,MAAM,MAAQ,SAAS,YAAcZ,EAAIa,OAAOC,MAAMC,KAAKC,6BAA6B,aAAe,GAAGC,GAAG,CAAC,cAAcjB,EAAIkB,iBAAiB,GAAGd,EAAG,MAAM,CAACG,YAAY,2BAA2B,CAACH,EAAG,IAAI,CAACG,YAAY,yBAAyBD,MAAM,CAAC,cAAc,yBAAyB,KAAO,gBAAgBW,GAAG,CAAC,MAAQjB,EAAImB,wBAAwB,CAACf,EAAG,IAAI,CAACG,YAAY,qBAAqBP,EAAIoB,GAAG,uBACrmCC,EAAkB,G,0uBC8CtB,qEAGA,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,MACEK,sBAAuB,GAGvBC,KAAM,UACNJ,OAAQ,UACRC,KAAM,UACNI,OAAQ,UACRC,WAAY,WARd,8BASA,WATA,oCAUA,yBAVA,0BAYA,CACE,IAAF,GACE,KAAF,EACE,MAAF,EACE,OAAF,GACE,MAAF,KAjBA,gCAqBA,IArBA,+BAwBA,KAxBA,8BAyBA,GAzBA,8BA0BA,GA1BA,gCA2BA,GA3BA,gCA8BA,KA9BA,iCA+BA,IA/BA,6CAgCA,IAhCA,8CAiCA,IAjCA,oCAmCA,IAnCA,kCAoCA,MApCA,kCAuCA,IAvCA,GA0CA,GACEC,WAAY,CACVC,iBAAJ,GAEEC,MAAO,CACLlD,WAAY,CACVmD,KAAMC,OACNC,QAAS,2BAEXC,WAAY,CACVH,KAAMI,QACNF,SAAS,GAEXG,QAAJ,CACML,KAAMM,MACNJ,QAAS,KAGbK,KAlBF,WAmBI,MAAO,CACLC,YAAY,EACZC,SAAS,IAGbC,MAAO,CACL,OADJ,uKAEA,iBAFA,yGAKEC,SAAU,EAAZ,GACA,sFADA,CAEIC,iBAFJ,WAGM,OAAQxE,KAAKY,OAAOC,MAAMC,KAAKC,8BAC7B,IAAK,KACH,OAAO0D,EAAQpD,GAAGqD,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQpD,GAAGqD,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQpD,GAAGqD,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQpD,GAAGqD,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQpD,GAAGqD,OAAO,SAC3B,IAAK,KACH,OAAOD,EAAQpD,GAAGqD,OAAO,MAC3B,IAAK,MACH,OAAOD,EAAQpD,GAAGqD,OAAO,MAC3B,IAAK,MACH,OAAOD,EAAQpD,GAAGqD,OAAO,SAC3B,QACE,OAAOD,EAAQpD,GAAGqD,OAAO,cAG/BC,gBAxBJ,WAyBM,OAAQ3E,KAAKY,OAAOC,MAAMC,KAAKC,8BAC7B,IAAK,KACH,OAAO,EACT,IAAK,KACH,OAAO,EACT,IAAK,KACH,OAAO,EACT,IAAK,MACH,OAAO,EACT,QACE,OAAO,MAIf,QApEF,mPAuEE,QAvEF,8JAwEA,2BAxEA,SAyEA,iBAzEA,OA0EA,2BA1EA,wGA4EE6D,QAAS,EAAX,GACA,oDADA,CAEI,aAFJ,oEAEA,GAFA,wFAGA,sDAHA,SAIA,iBAJA,yGAMI,UANJ,uKAOA,mBAPA,uBAQA,mBARA,wGAUI,YAVJ,4KAYA,qCAZA,uBAaA,uCACA,6BAdA,SAeA,6CAfA,gEAkBA,gBAlBA,iHAqBIC,YArBJ,WAsBM,IAAN,uDACA,cAEM,OAAOC,EAAaC,GAEtBC,aA3BJ,WA4BM,OAAOhF,KAAKiE,QAAQgB,OAAS,GAE/BC,YA9BJ,WA+BWlF,KAAKgF,eAINhF,KAAKoE,YACPpE,KAAKmF,UAAU,CAAvB,aACQnF,KAAKoE,YAAa,GAElBpE,KAAKmF,UAAU,CAAvB,eAGIA,UA1CJ,SA0CA,OAeA,IACA,IACA,IAjBA,OACA,YAEA,eAEA,sCACA,2CAGMC,EAAkBC,SAAQ,SAAhC,GACQC,EAAEA,EAAI,IAAIC,KAAKD,EAAEA,MASnB,IAAN,8CACA,8CAGA,cACQ,IAAR,gBACA,qBACU,sBAAV,EACU,sBAAV,IAEA,qCACQ,MAAO,KAAf,WAGA,aACQ,IAAR,oDACQE,EAAWC,GAA4B,EACvCC,EAAY,EAApB,cACQC,EAAiBC,MAAMC,OAASH,EAAY,MAGpD,aACQI,EAASxE,EAAjB,OAEA,0DACA,iCAEQyE,EAASzE,EAAjB,OAEA,wCACA,eAGA,aACQ0E,EAAQ1E,EAAhB,KACA,GACA,+BACA,yBAEQ2E,EAAQ3E,EAAhB,KACA,GACA,cACA,UAGM4E,IACAC,IACAC,IAGA,IAAN,WAEA,cACA,eAAQ,OAAR,UACA,eAAQ,OAAR,UAGUC,EAAc,WAChB,OAAO/E,EAAf,kBAGUgF,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,aACA,aACA,4BACA,2BACA,iBAmCM,GAAIC,EAAS,CAEXC,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,cACA,eACA,4BACA,kCACA,oBAGQH,IAGAG,EACR,eACA,2BACA,wBACA,6BACA,mCACA,yBACA,wBAGQ,IAAR,IACA,YACA,6BACA,wBAGQC,EAAYC,OAAO,UAAUC,KAAK,IAAK3D,EAAU4D,aAAe,GAGhEH,EACR,iBACA,6BACA,8BAIQD,EAAIK,OAAO,MAAMC,KAAKf,GAEtBS,EAAIO,UAAU,eAAepB,MAAM,UAAW,QAE9Ca,EAAIO,UAAU,iBAAiBpB,MAAM,UAAW,QAEhDa,EAAIO,UAAU,kBAAkBpB,MAAM,UAAW,QAGjDa,EACR,aACA,oBACA,QAGQA,EACR,gBACA,qBACA,sBACA,iBAJA,qBAIA,eAJA,QAKA,KACA,IACA,kBACA,gBAIQA,EACR,qBACA,aACA,cACA,eACA,4BACA,kCACA,oBAGMnF,EAAN,wCAKM,IAAN,0BACA,4BACA,6BACA,+BACA,8BAGA,GACQ2F,WAAY,WAApB,OACA,oBACY,OAAO3B,EAAEA,KACrB,MACQ4B,UAAW,WACTC,EAAcvB,MAAM,UAAW,MAC/BwB,EAAgBxB,MAAM,UAAW,MACjCyB,EAAiBzB,MAAM,UAAW,OAEpC0B,SAAU,WACRH,EAAcvB,MAAM,UAAW,QAC/BwB,EAAgBxB,MAAM,UAAW,QACjCyB,EAAiBzB,MAAM,UAAW,SAEpC2B,UAAW,WACTC,EAAWC,WAAWnG,EAAhC,gCAEQoG,UAAW,WACTF,EAAWC,WAAWnG,EAAhC,sCAEQmG,WAAY,SAApB,KACUN,EAAcvB,MAAM,UAAW,MAC/BwB,EAAgBxB,MAAM,UAAW,MACjCyB,EAAiBzB,MAAM,UAAW,MAElC,IAAV,cACA,wBACA,SACA,OAEU,GAAU,MAAN+B,GAAoB,MAANC,EAAY,CAC5B,IAAZ,YACgC,GAAhB9B,EAAO6B,EAAGrC,IAAWQ,EAAO+B,GAAM/B,EAAO8B,EAAGtC,GAAK,IACnDA,EAAIqC,GAGNR,EAAcP,KAAK,YAAa,aAAed,EAAOR,EAAEA,GAAK,OAC7D8B,EACZ,qDACA,0BAGY,IAAZ,IACA,IACgB5B,EAAWM,EAAOR,EAAEA,GAAKrC,EAAU6E,eACrCC,GAAQ9E,EAAU6E,aAA4C,EAA7B7E,EAAU+E,kBAGzCtC,EAAYzC,EAAUgF,OAAOC,OAASjF,EAAUgF,OAAOE,MAAQpC,EAAOT,EAAE8C,GAAKnF,EAAUoF,gBACzFC,GAAQrF,EAAUoF,cAAgB,GAGhCtC,EAAOT,EAAE8C,GAAKnF,EAAUoF,gBAC1BC,EAAOrF,EAAUoF,cAAgB,GAInCE,EAAoBC,KAAK/D,EAAQtC,aAAamD,EAAE8C,IAEhDK,EAAqBD,KAAK/D,EAAQ3B,QAAQwC,EAAEA,IAI5C+B,EAAiBT,KAC7B,YACA,cACA,6BACA,KACA,2BACA,QAMWJ,GACHC,EAAIK,OAAO,qBAAqB4B,SAIlCjC,EACN,eACA,iCACA,oBACA,6BACA,yBACA,gBACA,gDACA,4BACA,0BACA,4BACA,+BAIM,IAAN,aACQ,IAAIkC,EAEFA,EADEnD,EAAW,IACF,OAEA,OAEbiB,EACR,wBACA,2BACA,aACA,qCACA,qBACA,oBAEQA,EAAIO,UAAU,iBAAiBJ,KAAK,IAAK,GAGzCH,EAAIO,UAAU,iBAAiBJ,KAAK,IAAK,EAAjD,kBAEQH,EAAIO,UAAU,iBAAiBpB,MAAM,YAAa+C,GAElDlC,EAAIO,UAAU,MAAMJ,KAAK,YAAa,aAA9C,sBAEQH,EAAIO,UAAU,SAASJ,KAAK,YAAa,cAAjD,8BAEQH,EACR,0BACA,aACA,aACA,aACA,aACA,qBAEQA,EACR,yBACA,wBACA,aAEQmC,SAASC,eAAe,EAAhC,kDAGMC,IAGArC,EAAIK,OAAO,iBAAiBF,KAAK,OAAQ,SAGzC,IAAN,aACQH,EAAIK,OAAO,MAAMC,KAAKf,GAEtBS,EACR,aACA,oBACA,sCACA,QAGQA,EAAIK,OAAO,cAAcF,KAAK,IAAKmC,EAAQ3D,IAE3CqB,EACR,gBACA,qBACA,sBACA,qCACA,KACA,IACA,kBACA,iBAIWD,GACHlF,EAAR,+BAGMA,EAAN,qCACQ4E,IACAC,IACAC,IACA4C,IACAF,QAGJ5H,sBAnfJ,WAofMlB,KAAKiJ,MAAM,oBAAoB,OCrtBuV,I,wBCQxXC,EAAY,eACd,EACApJ,EACAsB,GACA,EACA,KACA,KACA,MAIa,aAAA8H,E,6CCOf,SAASC,EAAeC,EAAKC,GAC3B,OAAOC,OAAOC,UAAUJ,eAAepC,KAAKqC,EAAKC,GAGnDG,EAAOC,QAAU,SAASC,EAAIC,EAAKC,EAAIC,GACrCF,EAAMA,GAAO,IACbC,EAAKA,GAAM,IACX,IAAIR,EAAM,GAEV,GAAkB,kBAAPM,GAAiC,IAAdA,EAAGzE,OAC/B,OAAOmE,EAGT,IAAIU,EAAS,MACbJ,EAAKA,EAAGnH,MAAMoH,GAEd,IAAII,EAAU,IACVF,GAAsC,kBAApBA,EAAQE,UAC5BA,EAAUF,EAAQE,SAGpB,IAAIC,EAAMN,EAAGzE,OAET8E,EAAU,GAAKC,EAAMD,IACvBC,EAAMD,GAGR,IAAK,IAAIE,EAAI,EAAGA,EAAID,IAAOC,EAAG,CAC5B,IAEIC,EAAMC,EAAMC,EAAGhC,EAFfiC,EAAIX,EAAGO,GAAGzH,QAAQsH,EAAQ,OAC1BQ,EAAMD,EAAEE,QAAQX,GAGhBU,GAAO,GACTJ,EAAOG,EAAEG,OAAO,EAAGF,GACnBH,EAAOE,EAAEG,OAAOF,EAAM,KAEtBJ,EAAOG,EACPF,EAAO,IAGTC,EAAIK,mBAAmBP,GACvB9B,EAAIqC,mBAAmBN,GAElBhB,EAAeC,EAAKgB,GAEdM,EAAQtB,EAAIgB,IACrBhB,EAAIgB,GAAGO,KAAKvC,GAEZgB,EAAIgB,GAAK,CAAChB,EAAIgB,GAAIhC,GAJlBgB,EAAIgB,GAAKhC,EAQb,OAAOgB,GAGT,IAAIsB,EAAUxG,MAAMwG,SAAW,SAAUE,GACvC,MAA8C,mBAAvCtB,OAAOC,UAAUjH,SAASyE,KAAK6D,K,yDChFxCnB,EAAQoB,OAASpB,EAAQqB,MAAQ,EAAQ,QACzCrB,EAAQsB,OAAStB,EAAQuB,UAAY,EAAQ,S,kCCH7C,yBAAimB,EAAG,G,kCCuBpmB,IAAIC,EAAqB,SAAS7C,GAChC,cAAeA,GACb,IAAK,SACH,OAAOA,EAET,IAAK,UACH,OAAOA,EAAI,OAAS,QAEtB,IAAK,SACH,OAAO8C,SAAS9C,GAAKA,EAAI,GAE3B,QACE,MAAO,KAIboB,EAAOC,QAAU,SAASL,EAAKO,EAAKC,EAAIuB,GAOtC,OANAxB,EAAMA,GAAO,IACbC,EAAKA,GAAM,IACC,OAARR,IACFA,OAAMgC,GAGW,kBAARhC,EACFiC,EAAIC,EAAWlC,IAAM,SAASgB,GACnC,IAAImB,EAAKC,mBAAmBP,EAAmBb,IAAMR,EACrD,OAAIc,EAAQtB,EAAIgB,IACPiB,EAAIjC,EAAIgB,IAAI,SAAShC,GAC1B,OAAOmD,EAAKC,mBAAmBP,EAAmB7C,OACjDqD,KAAK9B,GAED4B,EAAKC,mBAAmBP,EAAmB7B,EAAIgB,QAEvDqB,KAAK9B,GAILwB,EACEK,mBAAmBP,EAAmBE,IAASvB,EAC/C4B,mBAAmBP,EAAmB7B,IAF3B,IAKpB,IAAIsB,EAAUxG,MAAMwG,SAAW,SAAUE,GACvC,MAA8C,mBAAvCtB,OAAOC,UAAUjH,SAASyE,KAAK6D,IAGxC,SAASS,EAAKT,EAAIc,GAChB,GAAId,EAAGS,IAAK,OAAOT,EAAGS,IAAIK,GAE1B,IADA,IAAIC,EAAM,GACD1B,EAAI,EAAGA,EAAIW,EAAG3F,OAAQgF,IAC7B0B,EAAIhB,KAAKe,EAAEd,EAAGX,GAAIA,IAEpB,OAAO0B,EAGT,IAAIL,EAAahC,OAAOsC,MAAQ,SAAUxC,GACxC,IAAIuC,EAAM,GACV,IAAK,IAAIE,KAAOzC,EACVE,OAAOC,UAAUJ,eAAepC,KAAKqC,EAAKyC,IAAMF,EAAIhB,KAAKkB,GAE/D,OAAOF","file":"js/chunk-f68b26de.3d7c6a89.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.loading)?_c('div',{staticClass:\"skeleton-card\",staticStyle:{\"position\":\"absolute\"}},[_c('div',{staticClass:\"box\"})]):_vm._e(),_c('svg',{attrs:{\"id\":_vm.goldSpotId,\"width\":\"100%\"}},[_c('defs',[_c('pattern',{attrs:{\"id\":\"pattern1\",\"x\":\"10\",\"y\":\"10\",\"width\":\"10\",\"height\":\"10\",\"patternUnits\":\"userSpaceOnUse\"}})])])]),_c('div',{staticClass:\"period-area\"},[_c('PeriodNavigation',{attrs:{\"backgorund\":\"#ffffff\",\"activePosition\":\"top\",\"data-action\":\"change_gold_period\",\"data-assettype\":\"gold\",\"data-assetname\":\"spot\",\"arrPeriod\":_vm.getGoldSpotHistoryPeriod.range,\"alias\":\"period\",\"defaultItem\":_vm.$store.state.gold.goldSpotHistoryCurrentPeriod,\"slidePerPage\":6},on:{\"select-data\":_vm.choosePeriod}})],1),_c('div',{staticClass:\"professional-btn-center\"},[_c('a',{staticClass:\"ctn-graph-professional\",attrs:{\"data-action\":\"gold_spot_trading_view\",\"href\":\"javascript:;\"},on:{\"click\":_vm.callProfessionalGraph}},[_c('i',{staticClass:\"fas fa-chart-bar\"}),_vm._v(\" กราฟเทคนิค \")])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"gold-spot\">\n    <div class=\"graph-area\">\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_period\"\n        data-assettype=\"gold\"\n        data-assetname=\"spot\"\n        :arrPeriod=\"getGoldSpotHistoryPeriod.range\"\n        :alias=\"`period`\"\n        @select-data=\"choosePeriod\"\n        :defaultItem=\"$store.state.gold.goldSpotHistoryCurrentPeriod\"\n        :slidePerPage=\"6\"\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> กราฟเทคนิค\n      </a>\n    </div>\n  </div>\n</template>\n\n<script>\nimport axios from \"axios\"\nimport querystring from \"querystring\"\nimport moment from \"moment\"\nimport * as d3 from \"d3\"\nimport { mapGetters, mapActions } from \"vuex\"\nimport { formatDate } from \"../../../utils/global\"\n\nconst PeriodNavigation = () => import(\"../global/PeriodNavigation\")\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  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    isRealtime: {\n      type: Boolean,\n      default: true\n    },\n    arrData:{\n      type: Array,\n      default: []\n    }\n  },\n  data() {\n    return {\n      firstPaint: true,\n      loading: false\n    }\n  },\n  watch: {\n    async $route() {\n      await this.queryData()\n    }\n  },\n  computed: {\n    ...mapGetters(\"gold\", [\"getGoldSpotHistoryCurrentPeriod\", \"getGoldSpotHistoryPeriod\"]),\n    yAxisFormatTitle() {\n      switch (this.$store.state.gold.goldSpotHistoryCurrentPeriod) {\n        case \"5D\":\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 \"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 \"YTD\":\n          return helpers.TH.format(\"%e %b\")\n        default:\n          return helpers.TH.format(\"%e %b %y\")\n      }\n    },\n    yAxisFormatTick() {\n      switch (this.$store.state.gold.goldSpotHistoryCurrentPeriod) {\n        case \"5D\":\n          return 4\n        case \"1M\":\n          return 4\n        case \"6M\":\n          return 2\n        case \"YTD\":\n          return 4\n        default:\n          return 6\n      }\n    }\n  },\n  async created() {\n    // const ns = await this.$nextTick()\n  },\n  async mounted() {\n    this.loading = !this.loading\n    await this.queryData()\n    this.loading = !this.loading\n  },\n  methods: {\n    ...mapActions(\"gold\", [\"findGoldSpotHistoryGraph\"]),\n    async choosePeriod(period) {\n      this.$store.state.gold.goldSpotHistoryCurrentPeriod = period\n      await this.queryData()\n    },\n    async queryData() {\n      await this.getSnapshot()\n      await this.renderGraph()\n    },\n    async getSnapshot() {\n      try {\n        if (this.getGoldSpotHistoryCurrentPeriod) {\n          let from = this.getGoldSpotHistoryCurrentPeriod\n          let to = formatDate(Date.now())\n          await this.findGoldSpotHistoryGraph({ from, to })\n        }\n      } catch (error) {\n        throw new Error(error)\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    checkNavData() {\n      return this.arrData.length > 0\n    },\n    renderGraph() {\n      if (!this.checkNavData) {\n        return\n      }\n\n      if (this.firstPaint) {\n        this.drawGraph({ isFirst: true })\n        this.firstPaint = false\n      } else {\n        this.drawGraph({ isFirst: false })\n      }\n    },\n    drawGraph(options) {\n      let isFirst = options.isFirst\n      // Preparing Data\n      let formattedLineData = this.arrData\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.d = new Date(d.d)\n      })\n\n      // Prepare range and domain\n      // Max and min in x bar, y bar\n      let svgWidth, svgHeight\n      let xRange, yRange\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\n      //manage text in ticks\n      let formatCurrency = d => {\n        let toNumber = parseFloat(d)\n          .toLocaleString(\"th\", {\n            minimumFractionDigits: 2,\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])\n          .domain([formattedLineData[0].d, formattedLineData[formattedLineData.length - 1].d])\n\n        yRange = d3\n          .scaleLinear()\n          .range([constants.margin.bottom, svgHeight - constants.margin.top])\n          .domain([yMax, yMin])\n      }\n\n      let axisUpdate = () => {\n        xAxis = d3\n          .axisBottom(xRange)\n          .tickFormat(this.yAxisFormatTitle)\n          .ticks(this.yAxisFormatTick)\n\n        yAxis = d3\n          .axisRight(yRange)\n          .tickFormat(formatCurrency)\n          .ticks(4)\n      }\n\n      sizeUpdate()\n      rangeUpdate()\n      axisUpdate()\n\n      // Appending or Changing Element\n      let lineGen = d3\n        .line()\n        .curve(d3.curveLinear) // http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8\n        .x(d => xRange(d.d))\n        .y(d => yRange(d.v))\n\n      // y Axis\n      var make_y_axis = function() {\n        return d3.axisRight(yRange).ticks(4)\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 nav data\n        tooltip\n          .append(\"text\")\n          .attr(\"x\", 50)\n          .attr(\"y\", 45)\n          .attr(\"class\", \"tooltip-nav\")\n          .attr(\"text-anchor\", \"left\")\n          .text(\"10.2464\")\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.d))\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.d))\n          .attr(\"y\", d => yRange(d.v))\n          .attr(\"transform\", `translate(15,5)`)\n          .attr(\"fill\", \"white\")\n          .style(\"font-size\", \"10px\")\n          .text(d => {\n            return `$ ${d.v}`\n          })\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(100)\n          .attr(\"d\", lineGen(formattedLineData))\n          .attr(\"stroke\", constants.graphColor)\n          .attr(\"stroke-width\", constants.lineStroke)\n          .attr(\"fill\", \"none\")\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\n      } else {\n        // X Axis\n        vis.select(\".x\").call(xAxis)\n\n        vis.selectAll(\".focus-line\").style(\"display\", \"none\")\n\n        vis.selectAll(\".focus-circle\").style(\"display\", \"none\")\n\n        vis.selectAll(\".focus-tooltip\").style(\"display\", \"none\")\n\n        // y Axis\n        vis\n          .select(\".y\")\n          .attr(\"fill\", \"none\")\n          .call(yAxis)\n\n        // grid\n        vis\n          .select(\".grid\")\n          .attr(\"class\", \"grid\")\n          .style(\"opacity\", \".2\")\n          .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(500)\n          .attr(\"d\", lineGen(formattedLineData))\n          .attr(\"stroke\", constants.graphColor)\n          .attr(\"stroke-width\", constants.lineStroke)\n          .attr(\"fill\", \"none\")\n      }\n\n      d3.selectAll(\".domain\").style(\"display\", \"none\")\n\n      // Handling mouse event for focus tooltip\n\n      //cache for performance\n      let elemFocusLine = vis.select(\".focus-line\")\n      let elemFocusCircle = vis.select(\".focus-circle\")\n      let elemFocusTooltip = vis.select(\".focus-tooltip\")\n      let elemFocusTooltipDate = vis.selectAll(\".tooltip-date\")\n      let elemFocusTooltipNav = vis.selectAll(\".tooltip-nav\")\n\n      // Helpers function\n      let mouseEvent = {\n        bisectDate: () =>\n          d3.bisector(function(d) {\n            return d.d\n          }).left,\n        mouseOver: () => {\n          elemFocusLine.style(\"display\", null)\n          elemFocusCircle.style(\"display\", null)\n          elemFocusTooltip.style(\"display\", null)\n        },\n        mouseOut: () => {\n          elemFocusLine.style(\"display\", \"none\")\n          elemFocusCircle.style(\"display\", \"none\")\n          elemFocusTooltip.style(\"display\", \"none\")\n        },\n        mouseMove: function() {\n          mouseEvent.handleMove(d3.mouse(this)[0], d3.mouse(this)[1])\n        },\n        touchMove: function() {\n          mouseEvent.handleMove(d3.touches(this)[0][0], d3.touches(this)[0][1])\n        },\n        handleMove: (xPos, yPos) => {\n          elemFocusLine.style(\"display\", null)\n          elemFocusCircle.style(\"display\", null)\n          elemFocusTooltip.style(\"display\", null)\n\n          let x0 = xRange.invert(xPos),\n            i = mouseEvent.bisectDate()(formattedLineData, x0, 1),\n            d0 = formattedLineData[i - 1],\n            d1 = formattedLineData[i]\n\n          if (d0 != null && d1 != null) {\n            let d = x0 > d0.d ? d1 : d0\n            if (xRange(d0.d) == 0 && xRange(x0) < xRange(d1.d) / 2) {\n              d = d0\n            }\n\n            elemFocusLine.attr(\"transform\", \"translate(\" + xRange(d.d) + \",\" + 0 + \")\")\n            elemFocusCircle\n              .attr(\"transform\", \"translate(\" + xRange(d.d) + \",\" + 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.d) < 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.d))\n\n            // elemFocusTooltip.attr(\"transform\", \"translate(\" + xRange(d.d+xPad) + \",\" + yRange(d.v+yPad) + \")\")\n\n            elemFocusTooltip.attr(\n              \"transform\",\n              \"translate(\" +\n                (xRange(d.d) + xPad + constants.driftRightMargin) +\n                \",\" +\n                (yRange(d.v) + yPad - constants.driftTopMargin) +\n                \")\"\n            )\n          }\n        }\n      }\n\n      if (!isFirst) {\n        vis.select(\".focusing-overlay\").remove()\n      }\n\n      // Overlay Element\n      vis\n        .append(\"rect\")\n        .attr(\"class\", \"focusing-overlay\")\n        .attr(\"fill\", \"none\")\n        .attr(\"pointer-events\", \"all\")\n        .attr(\"y\", constants.margin.bgTop)\n        .attr(\"width\", svgWidth)\n        .attr(\"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() + 10)\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        document.getElementById(this.goldSpotId).style.height = this.graphHeight() + 30 + \"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        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\n    margin: 12px 0;\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-ss;\n    font-weight: bold;\n    text-anchor: left;\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!./GoldSpotGraphHistory.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!./GoldSpotGraphHistory.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GoldSpotGraphHistory.vue?vue&type=template&id=6ed94f69&\"\nimport script from \"./GoldSpotGraphHistory.vue?vue&type=script&lang=js&\"\nexport * from \"./GoldSpotGraphHistory.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GoldSpotGraphHistory.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","// Copyright Joyent, Inc. and other Node contributors.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a\n// copy of this software and associated documentation files (the\n// \"Software\"), to deal in the Software without restriction, including\n// without limitation the rights to use, copy, modify, merge, publish,\n// distribute, sublicense, and/or sell copies of the Software, and to permit\n// persons to whom the Software is furnished to do so, subject to the\n// following conditions:\n//\n// The above copyright notice and this permission notice shall be included\n// in all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n'use strict';\n\n// If obj.hasOwnProperty has been overridden, then calling\n// obj.hasOwnProperty(prop) will break.\n// See: https://github.com/joyent/node/issues/1707\nfunction hasOwnProperty(obj, prop) {\n  return Object.prototype.hasOwnProperty.call(obj, prop);\n}\n\nmodule.exports = function(qs, sep, eq, options) {\n  sep = sep || '&';\n  eq = eq || '=';\n  var obj = {};\n\n  if (typeof qs !== 'string' || qs.length === 0) {\n    return obj;\n  }\n\n  var regexp = /\\+/g;\n  qs = qs.split(sep);\n\n  var maxKeys = 1000;\n  if (options && typeof options.maxKeys === 'number') {\n    maxKeys = options.maxKeys;\n  }\n\n  var len = qs.length;\n  // maxKeys <= 0 means that we should not limit keys count\n  if (maxKeys > 0 && len > maxKeys) {\n    len = maxKeys;\n  }\n\n  for (var i = 0; i < len; ++i) {\n    var x = qs[i].replace(regexp, '%20'),\n        idx = x.indexOf(eq),\n        kstr, vstr, k, v;\n\n    if (idx >= 0) {\n      kstr = x.substr(0, idx);\n      vstr = x.substr(idx + 1);\n    } else {\n      kstr = x;\n      vstr = '';\n    }\n\n    k = decodeURIComponent(kstr);\n    v = decodeURIComponent(vstr);\n\n    if (!hasOwnProperty(obj, k)) {\n      obj[k] = v;\n    } else if (isArray(obj[k])) {\n      obj[k].push(v);\n    } else {\n      obj[k] = [obj[k], v];\n    }\n  }\n\n  return obj;\n};\n\nvar isArray = Array.isArray || function (xs) {\n  return Object.prototype.toString.call(xs) === '[object Array]';\n};\n","'use strict';\n\nexports.decode = exports.parse = require('./decode');\nexports.encode = exports.stringify = require('./encode');\n","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!./GoldSpotGraphHistory.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!./GoldSpotGraphHistory.vue?vue&type=style&index=0&lang=scss&\"","// Copyright Joyent, Inc. and other Node contributors.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a\n// copy of this software and associated documentation files (the\n// \"Software\"), to deal in the Software without restriction, including\n// without limitation the rights to use, copy, modify, merge, publish,\n// distribute, sublicense, and/or sell copies of the Software, and to permit\n// persons to whom the Software is furnished to do so, subject to the\n// following conditions:\n//\n// The above copyright notice and this permission notice shall be included\n// in all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n'use strict';\n\nvar stringifyPrimitive = function(v) {\n  switch (typeof v) {\n    case 'string':\n      return v;\n\n    case 'boolean':\n      return v ? 'true' : 'false';\n\n    case 'number':\n      return isFinite(v) ? v : '';\n\n    default:\n      return '';\n  }\n};\n\nmodule.exports = function(obj, sep, eq, name) {\n  sep = sep || '&';\n  eq = eq || '=';\n  if (obj === null) {\n    obj = undefined;\n  }\n\n  if (typeof obj === 'object') {\n    return map(objectKeys(obj), function(k) {\n      var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;\n      if (isArray(obj[k])) {\n        return map(obj[k], function(v) {\n          return ks + encodeURIComponent(stringifyPrimitive(v));\n        }).join(sep);\n      } else {\n        return ks + encodeURIComponent(stringifyPrimitive(obj[k]));\n      }\n    }).join(sep);\n\n  }\n\n  if (!name) return '';\n  return encodeURIComponent(stringifyPrimitive(name)) + eq +\n         encodeURIComponent(stringifyPrimitive(obj));\n};\n\nvar isArray = Array.isArray || function (xs) {\n  return Object.prototype.toString.call(xs) === '[object Array]';\n};\n\nfunction map (xs, f) {\n  if (xs.map) return xs.map(f);\n  var res = [];\n  for (var i = 0; i < xs.length; i++) {\n    res.push(f(xs[i], i));\n  }\n  return res;\n}\n\nvar objectKeys = Object.keys || function (obj) {\n  var res = [];\n  for (var key in obj) {\n    if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key);\n  }\n  return res;\n};\n"],"sourceRoot":""}