{"version":3,"file":"referenced-stocks.06a08402.js","sources":["../../../../../../../images/overlay-arrow.svg","../../../../components/referenced-stocks-overlay.vue","../../../../components/referenced-stocks.vue"],"sourcesContent":["export default \"__VITE_PUBLIC_ASSET__65a74b7e__\"","<template>\n\t<div class=\"stock-overlay\">\n\t\t<img\n\t\t\tsrc=\"/images/overlay-arrow.svg\"\n\t\t\talt=\"overlay-arrow\"\n\t\t\tclass=\"overlay-arrow\"\n\t\t/>\n\n\t\t<button\n\t\t\tclass=\"stock-icon-close\"\n\t\t\t@click=\"$emit('close')\"\n\t\t>\n\t\t\t<svg\n\t\t\t\tclass=\"w-[14px] h-[14px]\"\n\t\t\t\twidth=\"20\"\n\t\t\t\theight=\"20\"\n\t\t\t\tviewBox=\"0 0 21 22\"\n\t\t\t\tfill=\"none\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\td=\"M1.4043 20.2886L19.7891 1.9038\"\n\t\t\t\t\tstroke=\"black\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\td=\"M1.21094 1.71143L19.5957 20.0962\"\n\t\t\t\t\tstroke=\"black\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</button>\n\n\t\t<span class=\"stock-symbol\">\n\t\t\t<NuxtLink\n\t\t\t\t:to=\"path + '#' + symbol\"\n\t\t\t\tv-if=\"printLink\"\n\t\t\t>\n\t\t\t\t<b>{{ symbol }}</b>\n\t\t\t</NuxtLink>\n\t\t\t<b v-else>{{ symbol }}</b>\n\t\t\t- {{ market === \"NSC\" ? \"NASDAQ\" : \"NYSE\" }}\n\t\t</span>\n\t\t<span class=\"stock-company\">{{ name }}</span>\n\t\t<div class=\"stock-price-block\">\n\t\t\t<span class=\"stock-price\">${{ lastPrice.toFixed(2) }}</span>\n\t\t\t<span\n\t\t\t\t:class=\"[\n\t\t\t\t\t'stock-price-change',\n\t\t\t\t\tnetChange > 0 ? 'positive' : netChange < 0 ? 'negative' : ''\n\t\t\t\t]\"\n\t\t\t>\n\t\t\t\t{{ netChange > 0 ? \"+\" : \"\" }}{{ netChange.toFixed(2) }} ({{\n\t\t\t\t\tpercentChange > 0 ? \"+\" : \"\"\n\t\t\t\t}}{{ percentChange.toFixed(2) }}%)\n\t\t\t</span>\n\t\t</div>\n\t\t<span class=\"stock-market-cap gap-[12px] !flex-row justify-between\">\n\t\t\t<div class=\"inline-flex !text-[16px]\">\n\t\t\t\t<b>Volume:&nbsp;</b>\n\t\t\t\t{{ formatNumber(volume) }}\n\t\t\t</div>\n\t\t\t<div class=\"inline-flex !text-[16px]\">\n\t\t\t\t<b>Float:&nbsp;</b>\n\t\t\t\t{{ formatNumber(float) }}\n\t\t\t</div>\n\t\t</span>\n\t\t<span class=\"stock-market-cap\">\n\t\t\t<div class=\"flex mb-[4px] justify-between items-center text-[16px]\">\n\t\t\t\t<b class=\"text-[16px]\">${{ day_low.toFixed(2) }}</b>\n\n\t\t\t\t<b>Day Low/High</b>\n\t\t\t\t<!--  -->\n\t\t\t\t<b class=\"text-[16px]\">${{ day_high.toFixed(2) }}</b>\n\t\t\t</div>\n\t\t\t<div class=\"stock-market-balance mb-[4px] text-[16px]\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"stock-market-balance-ball\"\n\t\t\t\t\t:style=\"{ left: pricePercetageHighLow + '%' }\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</span>\n\n\t\t<span class=\"stock-market-cap !pt-[12px] pb-[0]\">\n\t\t\t<button\n\t\t\t\t@click=\"store.toggleSignUp()\"\n\t\t\t\tclass=\"bg-blue-300 hover:bg-blue-500 text-white py-[8px] px-[12px] rounded-[8px] text-[18px] font-medium text-center font-semibold\"\n\t\t\t>\n\t\t\t\tGet Free Alerts\n\t\t\t</button>\n\t\t</span>\n\t</div>\n</template>\n\n<script setup>\nimport { store } from \"~/src/utils/store\";\nconst { lastPrice, day_high, day_low, symbol } = defineProps({\n\tmarket: String,\n\tsymbol: String,\n\tname: String,\n\tlastPrice: Number,\n\tnetChange: Number,\n\tpercentChange: Number,\n\tday_high: Number,\n\tday_low: Number,\n\tvolume: Number,\n\tfloat: Number\n});\n\nconst pricePercetageHighLow = computed(() => {\n\treturn ((lastPrice - day_low) / (day_high - day_low)) * 100;\n});\n\nconst printLink = ref(false);\n\nconst { path } = useRoute();\n\nonMounted(() => {\n\tif (process.client) {\n\t\tconst hasIdOnBody = document.getElementById(symbol);\n\t\tif (hasIdOnBody) {\n\t\t\tprintLink.value = true;\n\t\t}\n\t}\n});\n</script>\n\n<style lang=\"scss\">\n.overlay-arrow {\n\tdisplay: none;\n\t@include breakpoint(lg) {\n\t\tposition: absolute;\n\t\ttop: 16px;\n\t\tleft: -22px;\n\t\tz-index: 0;\n\t\ttransform: rotate(-90deg) scale(0.75);\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: block;\n\t}\n}\n\n.stock-market-balance {\n\theight: 8px;\n\twidth: 100%;\n\tbackground-color: $slate-100;\n\tposition: relative;\n\tborder-radius: 8px;\n}\n.stock-market-balance-ball {\n\tposition: absolute;\n\theight: 8px;\n\twidth: 8px;\n\tbackground-color: $blue-300;\n\ttop: 0;\n\tborder-radius: 8px;\n}\n\n.stock-icon-close {\n\theight: 16px;\n\twidth: 16px;\n\tposition: absolute;\n\tright: 12px;\n\t@include breakpoint(lg) {\n\t\tdisplay: none;\n\t}\n}\n</style>\n","<template>\n\t<div\n\t\tclass=\"referenced-symbols\"\n\t\tv-if=\"stocks && stocks.length > 0\"\n\t>\n\t\t<h2 class=\"referenced-symbols-title\">In this article</h2>\n\t\t<ul class=\"symbols-list\">\n\t\t\t<li\n\t\t\t\tv-for=\"stock in stocks\"\n\t\t\t\t:key=\"stock.code\"\n\t\t\t\tclass=\"symbol-item\"\n\t\t\t\t@click=\"() => selectStock(stock)\"\n\t\t\t>\n\t\t\t\t<span class=\"symbol-link\">{{ stock.SYMBOL }}</span>\n\t\t\t\t<span\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'symbol-status': true,\n\t\t\t\t\t\tup: stock.PC_CHG > 0,\n\t\t\t\t\t\tdown: stock.PC_CHG < 0\n\t\t\t\t\t}\"\n\t\t\t\t>\n\t\t\t\t\t{{ stock.PC_CHG > 0 ? \"+\" : \"\" }}{{ stock.PC_CHG.toFixed(2) }}%\n\n\t\t\t\t\t<template v-if=\"!stock.PC_CHG === 0\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tv-if=\"breakpoints.isGreater('lg') && stock.PC_CHG > 0\"\n\t\t\t\t\t\t\theight=\"24px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\twidth=\"24px\"\n\t\t\t\t\t\t\tfill=\"#4caf50\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M0 0h24v24H0z\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<path d=\"M7 14l5-5 5 5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tv-else-if=\"breakpoints.isGreater('lg')\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\theight=\"24px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\twidth=\"24px\"\n\t\t\t\t\t\t\tfill=\"#f44336\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M0 0h24v24H0z\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<path d=\"M7 10l5 5 5-5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</template>\n\t\t\t\t</span>\n\n\t\t\t\t<ReferencedStocksOverlay\n\t\t\t\t\tv-if=\"breakpoints.isGreater('lg')\"\n\t\t\t\t\t:market=\"stock.MARKET\"\n\t\t\t\t\t:symbol=\"stock.SYMBOL\"\n\t\t\t\t\t:name=\"stock.NAME\"\n\t\t\t\t\t:lastPrice=\"stock.LAST\"\n\t\t\t\t\t:netChange=\"stock.NET_CHG\"\n\t\t\t\t\t:percentChange=\"stock.PC_CHG\"\n\t\t\t\t\t:day_low=\"stock.LOW\"\n\t\t\t\t\t:day_high=\"stock.HIGH\"\n\t\t\t\t\t:volume=\"stock.VOLUME\"\n\t\t\t\t\t:float=\"stock.FLOAT\"\n\t\t\t\t/>\n\t\t\t</li>\n\t\t</ul>\n\n\t\t<ReferencedStocksOverlay\n\t\t\tv-if=\"breakpoints.isSmallerOrEqual('lg') && selectedStock\"\n\t\t\tclass=\"active\"\n\t\t\t:market=\"selectedStock.MARKET\"\n\t\t\t:symbol=\"selectedStock.SYMBOL\"\n\t\t\t:name=\"selectedStock.NAME\"\n\t\t\t:lastPrice=\"selectedStock.LAST\"\n\t\t\t:netChange=\"selectedStock.NET_CHG\"\n\t\t\t:percentChange=\"selectedStock.PC_CHG\"\n\t\t\t:day_low=\"selectedStock.LOW\"\n\t\t\t:day_high=\"selectedStock.HIGH\"\n\t\t\t:volume=\"selectedStock.VOLUME\"\n\t\t\t:float=\"selectedStock.FLOAT\"\n\t\t\t@close=\"() => (selectedStock = null)\"\n\t\t/>\n\t</div>\n\t<div v-else />\n</template>\n\n<script setup>\nimport axios from \"axios\";\nimport dayjs from \"dayjs\";\nimport MD5 from \"crypto-js/md5\";\n\ndayjs.locale(\"en\");\ndayjs.tz.setDefault(\"America/New_York\");\n\nconst { symbols } = defineProps([\"symbols\"]);\nconst stocks = ref([]);\nconst breakpoints = reactive(\n\tuseBreakpoints({\n\t\tlg\n\t})\n);\n\nconst selectedStock = ref(null);\n\nconst lg = 1024;\nconst selectStock = (stock) => {\n\tif (breakpoints.isSmallerOrEqual(\"lg\")) {\n\t\tselectedStock.value = stock;\n\t}\n\treturn;\n};\n\nonMounted(async () => {\n\tconst date = dayjs(Date.now()).format(\"ddd, D MMM YYYY\");\n\n\tconst secretToken = MD5(date).toString();\n\n\tconst headers = {\n\t\tsecretToken: secretToken\n\t};\n\n\tconst getStocksInfo = symbols.map(async (symbol) => {\n\t\tconst data = {\n\t\t\tfilter: `SYMBOL IN ('${symbol}')`,\n\t\t\tprevDay: false,\n\t\t\tfields:\n\t\t\t\t\"VOLUME, TRADES, FLOAT, SHORT_INTEREST,SHORT_INTEREST_RATIO, SYMBOL, NAME, LAST, NET_CHG, PC_CHG, MARKET_CAP, HIGH_52W, LOW_52W, LOW, HIGH, DAY_RANGE, MARKET\"\n\t\t};\n\n\t\treturn await axios.post(\n\t\t\t\"https://app02.stockstotrade.com:8094/v1.1/symbols\",\n\t\t\tdata,\n\t\t\t{\n\t\t\t\theaders\n\t\t\t}\n\t\t);\n\t});\n\n\tPromise.all(getStocksInfo).then((res) => {\n\t\tres.forEach((r) => {\n\t\t\tif (r.data[0]) stocks.value.push(r.data[0]);\n\t\t});\n\t});\n});\n</script>\n\n<style lang=\"scss\">\n.symbol-item {\n\tposition: relative;\n\tfont-size: 14px;\n\tmargin-right: 4px;\n\tlist-style: none;\n\n\t@include breakpoint(lg) {\n\t\tfont-size: 16px;\n\t\tmargin-right: 0;\n\t}\n\n\tsvg {\n\t\theight: 20px;\n\t\t@include breakpoint(lg) {\n\t\t\theight: 24px;\n\t\t}\n\t}\n}\n.referenced-symbols {\n\tbackground-color: #f4f4f4;\n\tpadding: 12px;\n\tborder-radius: 12px;\n\tmargin-bottom: 24px;\n\t@include breakpoint(lg) {\n\t\tpadding: 20px;\n\t}\n}\n\n.referenced-symbols-title {\n\tcolor: $slate-900;\n\tfont-size: 16px;\n\tfont-weight: bold;\n\tmargin-bottom: 4px;\n\t@include breakpoint(lg) {\n\t\tfont-size: 20px;\n\t}\n}\n\n.symbols-list {\n\tlist-style-type: none;\n\tpadding: 0;\n}\n\n.symbol-link {\n\tcolor: $slate-900;\n\tmargin-right: 4px;\n\ttext-decoration: none;\n}\n\n.symbol-status {\n\tmargin-left: 0px;\n\tfont-weight: bold;\n\tdisplay: inline-flex;\n\tcolor: $slate-500;\n}\n\n.symbol-status.up {\n\tcolor: #4caf50;\n}\n\n.symbol-status.down {\n\tcolor: #f44336;\n}\n\n.symbols-list {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tcolumn-gap: 8px;\n\trow-gap: 4px;\n\t@include breakpoint(lg) {\n\t\tcolumn-gap: 12px;\n\t\trow-gap: 8px;\n\t}\n}\n</style>\n"],"names":["_imports_0","lastPrice","day_high","day_low","symbol","__props","pricePercetageHighLow","computed","printLink","ref","path","useRoute","onMounted","lg","dayjs","symbols","stocks","breakpoints","reactive","useBreakpoints","selectedStock","selectStock","stock","date","headers","MD5","getStocksInfo","data","axios","res","r"],"mappings":"4mBAAA,MAAeA,EAAA,GAAA,WAAA,kBAAA,0BAAA,suBCkGf,KAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,OAAAC,CAAM,EAAKC,EAa3CC,EAAwBC,EAAS,KAC7BN,EAAYE,IAAYD,EAAWC,GAAY,GACxD,EAEKK,EAAYC,EAAI,EAAK,EAErB,CAAE,KAAAC,CAAI,EAAKC,IAEjB,OAAAC,EAAU,IAAM,CAEM,SAAS,eAAeR,CAAM,IAEjDI,EAAU,MAAQ,GAGrB,CAAC,q+DCnBKK,GAAK,+DAbXC,EAAM,OAAO,IAAI,EACjBA,EAAM,GAAG,WAAW,kBAAkB,EAEtC,KAAM,CAAE,QAAAC,CAAS,EAAGV,EACdW,EAASP,EAAI,CAAA,CAAE,EACfQ,EAAcC,EACnBC,EAAe,CACd,GAAAN,EACF,CAAE,CACF,EAEMO,EAAgBX,EAAI,IAAI,EAGxBY,EAAeC,GAAU,CAC1BL,EAAY,iBAAiB,IAAI,IACpCG,EAAc,MAAQE,EAGxB,EAEA,OAAAV,EAAU,SAAY,CACrB,MAAMW,EAAOT,EAAM,KAAK,IAAG,CAAE,EAAE,OAAO,iBAAiB,EAIjDU,EAAU,CACf,YAHmBC,EAAIF,CAAI,EAAE,SAAQ,CAIvC,EAEOG,EAAgBX,EAAQ,IAAI,MAAOX,GAAW,CACnD,MAAMuB,EAAO,CACZ,OAAQ,eAAevB,CAAM,KAC7B,QAAS,GACT,OACC,8JACJ,EAEE,OAAO,MAAMwB,EAAM,KAClB,oDACAD,EACA,CACC,QAAAH,CACD,CACH,CACA,CAAE,EAED,QAAQ,IAAIE,CAAa,EAAE,KAAMG,GAAQ,CACxCA,EAAI,QAASC,GAAM,CACdA,EAAE,KAAK,CAAC,GAAGd,EAAO,MAAM,KAAKc,EAAE,KAAK,CAAC,CAAC,CAC7C,CAAG,CACH,CAAE,CACF,CAAC"}