feat: widget

components/dynamic-page/page-component/templates/others/stocks/334x641.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
+  import nanoid from 'nanoid';
   import JSWidget from '@/components/widget/JSwidget.vue';
 
   const widgetOptions = {
     "locale": "vi",
+    "width": "350px",
+    "height": "250px",
     "price_line_color": "#71BDDF",
     "grid_color": "#999999",
     "label_color": "#999999",
-    "width": "350px",
-    "height": "250px"
   }
 </script>
 <template>
   <div>
     <JSWidget 
-      CONTAINER_ID="default_widget_[123123]" 
-      SCRIPT_ID="12312312" 
+      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :SCRIPT_ID="nanoid(10)" 
       SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
       :options="widgetOptions" 
       widgetKey="FireAnt" 
@@ -24,8 +25,6 @@
 <style lang="scss" scoped>
 div {
   width: 100%;
-  height: 200px;
-  background-color: #ededed;
   font-size: 24px;
   display: flex;
   align-items: center;

components/dynamic-page/page-component/templates/others/stocks/Fullsize.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+  import nanoid from 'nanoid';
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "symbols": [
+        {
+        "proName": "FOREXCOM:SPXUSD",
+        "title": "S&P 500 Index"
+        },
+        {
+        "proName": "FOREXCOM:NSXUSD",
+        "title": "US 100 Cash CFD"
+        },
+        {
+        "proName": "FX_IDC:EURUSD",
+        "title": "EUR to USD"
+        },
+        {
+        "proName": "BITSTAMP:BTCUSD",
+        "title": "Bitcoin"
+        },
+        {
+        "proName": "BITSTAMP:ETHUSD",
+        "title": "Ethereum"
+        }
+    ],
+    "showSymbolLogo": true,
+    "isTransparent": false,
+    "displayMode": "adaptive",
+    "colorTheme": "dark",
+    "locale": "en"
+    }
+</script>
+
+<template>
+  <div>
+    <JSWidget 
+      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :SCRIPT_ID="nanoid(10)" 
+      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" 
+      :options="widgetOptions" 
+      widgetKey="TradingView" 
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

components/widget/JSwidget.vue

@@ -45,7 +45,7 @@
       const script = document.createElement('script');
       script.id = props.SCRIPT_ID;
       script.type = 'text/javascript';
-      script.async = true;
+      // script.async = true;
       script.src = props.SCRIPT_SRC;
       script.onload = onload;
       document.getElementsByTagName('head')[0].appendChild(script);
@@ -60,11 +60,15 @@
     onMounted(async () => {
       await Object.assign(widgets, { 
         FireAnt: {
-          script: () => new window.FireAnt.MarketsWidget(Object.assign({ container_id: props.CONTAINER_ID }, props.options)),
+          script: () => new window.FireAnt.MarketsWidget({ container_id: props.CONTAINER_ID, ...props.options }),
           key: window.FireAnt
-        }})
+        },
+        TradingView: {
+          script: () => new window.TradingView.widget({ container_id: props.CONTAINER_ID, ...props.options }),
+          key: window.TradingView
+        }
+      })
       appendScript(initWidget(props.widgetKey));
-      // instance.proxy.$forceUpdate();
     })
 </script>
 

components/widget/index.txt

@@ -0,0 +1,33 @@
+// <div class="tradingview-widget-container">
+//   <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
+//   {
+//   "symbols": [
+//     {
+//       "proName": "FOREXCOM:SPXUSD",
+//       "title": "S&P 500 Index"
+//     },
+//     {
+//       "proName": "FOREXCOM:NSXUSD",
+//       "title": "US 100 Cash CFD"
+//     },
+//     {
+//       "proName": "FX_IDC:EURUSD",
+//       "title": "EUR to USD"
+//     },
+//     {
+//       "proName": "BITSTAMP:BTCUSD",
+//       "title": "Bitcoin"
+//     },
+//     {
+//       "proName": "BITSTAMP:ETHUSD",
+//       "title": "Ethereum"
+//     }
+//   ],
+//   "showSymbolLogo": true,
+//   "isTransparent": false,
+//   "displayMode": "adaptive",
+//   "colorTheme": "dark",
+//   "locale": "en"
+// }
+//   </script>
+// </div>