feat: widget

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-  import nanoid from 'nanoid';
+  import { nanoid } from 'nanoid';
   import JSWidget from '@/components/widget/JSwidget.vue';
 
   const widgetOptions = {
     "locale": "vi",
-    "width": "350px",
+    "width": "334px",
     "height": "250px",
     "price_line_color": "#71BDDF",
     "grid_color": "#999999",
@@ -12,15 +12,14 @@
   }
 </script>
 <template>
-  <div>
-    <JSWidget 
-      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
-      :SCRIPT_ID="nanoid(10)" 
-      SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
-      :options="widgetOptions" 
-      widgetKey="FireAnt" 
-    />
-  </div>
+  <JSWidget 
+    :CONTAINER_ID="nanoid(10)" 
+    :SCRIPT_ID="nanoid(10)" 
+    SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
+    :options="widgetOptions" 
+    :inside="false"
+    widgetKey="FireAnt" 
+  />
 </template>
 <style lang="scss" scoped>
 div {

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

@@ -1,45 +1,45 @@
 <script setup lang="ts">
-  import nanoid from 'nanoid';
+  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",
+    "showSymbolLogo": true,
     "colorTheme": "dark",
     "locale": "en"
-    }
+  }
 </script>
 
 <template>
   <div>
     <JSWidget 
-      :CONTAINER_ID="`default_widget_[${nanoid(10)}]`" 
+      :CONTAINER_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" 
+      :inside="true"
       widgetKey="TradingView" 
     />
   </div>
@@ -53,3 +53,4 @@ div {
   justify-content: center;
 }
 </style>
+

components/widget/JSwidget.vue

@@ -4,7 +4,7 @@
         SCRIPT_SRC?: any,
         CONTAINER_ID?: any,
         options?: any,
-
+        inside?: boolean,
         widgetKey?: any
     }>()
 
@@ -45,10 +45,13 @@
       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);
+      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') {
@@ -73,7 +76,5 @@
 </script>
 
 <template>
-  <ClientOnly>
-    <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
-  </ClientOnly>
+  <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
 </template>