minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: widget

Browse Source
This commit is contained in:
MoreStrive
2024-07-05 14:29:49 +07:00
parent 984ec50a39
commit 66b5a8ce6a
3 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/others/stocks/334x641.vue
+10 -11
View File
@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import nanoid from 'nanoid'; import { nanoid } from 'nanoid';
import JSWidget from '@/components/widget/JSwidget.vue'; import JSWidget from '@/components/widget/JSwidget.vue';
const widgetOptions = { const widgetOptions = {
"locale": "vi", "locale": "vi",
"width": "350px", "width": "334px",
"height": "250px", "height": "250px",
"price_line_color": "#71BDDF", "price_line_color": "#71BDDF",
"grid_color": "#999999", "grid_color": "#999999",
@@ -12,15 +12,14 @@
} }
</script> </script>
<template> <template>
<div> <JSWidget
<JSWidget :CONTAINER_ID="nanoid(10)"
:CONTAINER_ID="`default_widget_[${nanoid(10)}]`" :SCRIPT_ID="nanoid(10)"
:SCRIPT_ID="nanoid(10)" SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js"
SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" :options="widgetOptions"
:options="widgetOptions" :inside="false"
widgetKey="FireAnt" widgetKey="FireAnt"
/> />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
div { div {
components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue
+17 -16
View File
@@ -1,45 +1,45 @@
<script setup lang="ts"> <script setup lang="ts">
import nanoid from 'nanoid'; import { nanoid } from 'nanoid';
import JSWidget from '@/components/widget/JSwidget.vue'; import JSWidget from '@/components/widget/JSwidget.vue';
const widgetOptions = { const widgetOptions = {
"symbols": [ "symbols": [
{ {
"proName": "FOREXCOM:SPXUSD", "proName": "FOREXCOM:SPXUSD",
"title": "S&P 500 Index" "title": "S&P 500 Index"
}, },
{ {
"proName": "FOREXCOM:NSXUSD", "proName": "FOREXCOM:NSXUSD",
"title": "US 100 Cash CFD" "title": "US 100 Cash CFD"
}, },
{ {
"proName": "FX_IDC:EURUSD", "proName": "FX_IDC:EURUSD",
"title": "EUR to USD" "title": "EUR to USD"
}, },
{ {
"proName": "BITSTAMP:BTCUSD", "proName": "BITSTAMP:BTCUSD",
"title": "Bitcoin" "title": "Bitcoin"
}, },
{ {
"proName": "BITSTAMP:ETHUSD", "proName": "BITSTAMP:ETHUSD",
"title": "Ethereum" "title": "Ethereum"
} }
], ],
"showSymbolLogo": true,
"isTransparent": false, "isTransparent": false,
"displayMode": "adaptive", "showSymbolLogo": true,
"colorTheme": "dark", "colorTheme": "dark",
"locale": "en" "locale": "en"
} }
</script> </script>
<template> <template>
<div> <div>
<JSWidget <JSWidget
:CONTAINER_ID="`default_widget_[${nanoid(10)}]`" :CONTAINER_ID="nanoid(10)"
:SCRIPT_ID="nanoid(10)" :SCRIPT_ID="nanoid(10)"
SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js"
:options="widgetOptions" :options="widgetOptions"
:inside="true"
widgetKey="TradingView" widgetKey="TradingView"
/> />
</div> </div>
@@ -53,3 +53,4 @@ div {
justify-content: center; justify-content: center;
} }
</style> </style>
components/widget/JSwidget.vue
+7 -6
View File
@@ -4,7 +4,7 @@
SCRIPT_SRC?: any, SCRIPT_SRC?: any,
CONTAINER_ID?: any, CONTAINER_ID?: any,
options?: any, options?: any,
inside?: boolean,
widgetKey?: any widgetKey?: any
}>() }>()
@@ -45,10 +45,13 @@
const script = document.createElement('script'); const script = document.createElement('script');
script.id = props.SCRIPT_ID; script.id = props.SCRIPT_ID;
script.type = 'text/javascript'; script.type = 'text/javascript';
// script.async = true; script.async = true;
script.src = props.SCRIPT_SRC; script.src = props.SCRIPT_SRC;
script.onload = onload; script.onload = onload;
document.getElementsByTagName('head')[0].appendChild(script); if (props.inside) document.getElementById(props.CONTAINER_ID) && document.getElementById(props.CONTAINER_ID).appendChild(script);
else {
document.getElementsByTagName('body')[0].appendChild(script);
}
} }
const initWidget = (key: any) => { const initWidget = (key: any) => {
if (typeof widgets[key].key === 'undefined') { if (typeof widgets[key].key === 'undefined') {
@@ -73,7 +76,5 @@
</script> </script>
<template> <template>
<ClientOnly> <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
<div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
</ClientOnly>
</template> </template>