rsi 추가

src/App.vue

@@ -16,15 +16,19 @@ import {swingSignal} from "./utils/sig.js";
 import { useWindowSize } from '@vueuse/core'
 
 const { width, height } = useWindowSize()
-console.log(width, height)
 /**
  * Generates sample data for the lightweight chart
  * @param  {Boolean} ohlc Whether generated dat should include open, high, low, and close values
  * @returns {Array} sample data
  */
 let socket;
+
 const lazyLock = ref(false)
 const positionData = ref('')
+const scrollContainer1 = ref()
+const scrollContainer2 = ref()
+const signal1 = ref([])
+const signal2 = ref([])
 
 const contract = ref('BTC_USDT')
 /*	Interval : "10s", "1m", "5m", "15m", "30m", "1h", "4h", "8h", "1d", "7d"*/
@@ -37,8 +41,8 @@ const chartOptions = ref({
       separatorColor: '#FF0000',
     },
   },
-  width: width,
+  // width: 800,
-  height: height,
+  height: height.value - 60,
   timeScale: {
     timeVisible: true,      // 분/초까지 표시
     secondsVisible: false   // 초 숨기고 싶으면 false
@@ -209,7 +213,11 @@ const candleSocket = (cont, ti) => {
       bb.value = calculateBollingerBands(ticks)
       rsi.value = calculateRSI(ticks)
       // console.table(entrySignals(ticks))
-      console.log(swingSignal(ticks))
+      const dd = entrySignals(ticks)
+      if(dd.length) signal2.value = [...signal2.value, entrySignals(ticks)]
+
+      const tt = swingSignal(ticks)
+      if(tt[0] !== 'HOLD') signal1.value = [...signal1.value, swingSignal(ticks)]
       lazyLock.value = false
     }
 
@@ -283,10 +291,25 @@ watch(time, newVal => {
   init(contract.value, newVal)
 })
 
+watch(signal1, newVal => {
+  if(scrollContainer1.value) {
+    scrollContainer1.value.scrollTop = scrollContainer1.value.scrollHeight + 1000
+  }
+})
+
+watch(signal2, newVal => {
+  if(scrollContainer2.value) {
+    scrollContainer2.value.scrollTop = scrollContainer2.value.scrollHeight + 10000
+  }
+})
+
 </script>
 
 <template>
-  <div class="container">
+  <v-container fluid>
+    <div v-if="candleTick !== undefined">
+      <v-row>
+        <v-col cols="9" class="border-thin">
           <div class="d-flex justify-content-center">
             <v-menu>
               <template v-slot:activator="{ props }">
@@ -324,9 +347,7 @@ watch(time, newVal => {
                 </v-list-item>
               </v-list>
             </v-menu>
-
           </div>
-    <div class="chart-container" v-if="candleTick !== undefined">
           <LWChart
               :type="chartType"
               :data="candleTick"
@@ -351,9 +372,22 @@ watch(time, newVal => {
               ref="lwChart"
           />
           <div class="ohlc-info" v-html="positionData"></div>
-
+        </v-col>
+        <v-col cols="3" class="border-thin pa-0">
+          <div ref="scrollContainer1" style="min-height:50%; max-height: 500px; overflow:auto;" class="border-thin">
+            <p v-for="i in signal1" class="font-weight-thin">
+              {{i}} {{new Date()}}
+            </p>
           </div>
+          <div ref="scrollContainer2" style="min-height:50%; max-height: 500px; overflow:auto;" class="border-thin">
+            <p v-for="i in signal2" class="font-weight-thin">
+              {{i}} {{new Date()}}
+            </p>
           </div>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
 </template>
 <style scoped lang="scss">
 .chart-container {
@@ -362,7 +396,7 @@ watch(time, newVal => {
 
 .ohlc-info {
   position: absolute;
-  top: 20px;
+  top: 45px;
   left: 10px;
   font-size: 12px;
   color: #333;
@@ -371,4 +405,5 @@ watch(time, newVal => {
   border-radius: 4px;
   z-index: 1000;
 }
+
 </style>

src/utils/sig.ts

@@ -128,19 +128,18 @@ const swingSignal = (data: any) => {
     const bbl    = bbands.lower[latest - offsetBb];
     const bbu    = bbands.upper[latest - offsetBb];
 
-    console.log(volatilityBreak, prev, hist, rsiVal, close, bbl)
     // 4) 최종 조건
     if (volatilityBreak &&
         prev < 0 && hist >= 0 &&
         rsiVal <= 35 && close <= bbl)
-        return 'LONG';
+        return ['LONG',volatilityBreak, prev, hist, rsiVal, close, bbl]
 
     if (volatilityBreak &&
         prev > 0 && hist <= 0 &&
         rsiVal >= 65 && close >= bbu)
-        return 'SHORT';
+        return ['SHORT',volatilityBreak, prev, hist, rsiVal, close, bbl]
 
-    return 'HOLD';
+    return ['HOLD',volatilityBreak, prev, hist, rsiVal, close, bbl];
 };
 
 export {swingSignal}