Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2

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

@@ -1,31 +1,29 @@
 <script setup lang="ts">
+  import { nanoid } from 'nanoid';
   import JSWidget from '@/components/widget/JSwidget.vue';
 
   const widgetOptions = {
     "locale": "vi",
+    "width": "334px",
+    "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]" 
+    :CONTAINER_ID="nanoid(10)" 
-      SCRIPT_ID="12312312" 
+    :SCRIPT_ID="nanoid(10)" 
     SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
     :options="widgetOptions" 
+    :inside="false"
     widgetKey="FireAnt" 
   />
-  </div>
 </template>
 <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,56 @@
+<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"
+      }
+    ],
+    "isTransparent": false,
+    "showSymbolLogo": true,
+    "colorTheme": "dark",
+    "locale": "en"
+  }
+</script>
+
+<template>
+  <div>
+    <JSWidget 
+      :CONTAINER_ID="nanoid(10)" 
+      :SCRIPT_ID="nanoid(10)" 
+      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" 
+      :options="widgetOptions" 
+      :inside="true"
+      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

@@ -4,7 +4,7 @@
         SCRIPT_SRC?: any,
         CONTAINER_ID?: any,
         options?: any,
-
+        inside?: boolean,
         widgetKey?: any
     }>()
 
@@ -48,7 +48,10 @@
       script.async = true;
       script.src = props.SCRIPT_SRC;
       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) => {
       if (typeof widgets[key].key === 'undefined') {
@@ -60,16 +63,18 @@
     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>
 
 <template>
-  <ClientOnly>
   <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
-  </ClientOnly>
 </template>

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>

package.json

@@ -26,6 +26,7 @@
     "@vueuse/nuxt": "10.5.0",
     "axios": "^1.5.1",
     "cheerio": "^1.0.0-rc.12",
+    "nanoid": "^5.0.7",
     "nuxt-delay-hydration": "latest",
     "sass": "latest",
     "sass-loader": "latest",