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>