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>
+