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,77 +291,103 @@ 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 class="d-flex justify-content-center">
+    <div v-if="candleTick !== undefined">
-      <v-menu>
+      <v-row>
-        <template v-slot:activator="{ props }">
+        <v-col cols="9" class="border-thin">
-          <v-btn color="grey-lighten-5" min-width="100" size="small" v-bind="props">{{contract}}</v-btn>
+          <div class="d-flex justify-content-center">
-        </template>
+            <v-menu>
-        <v-list v-model="contract">
+              <template v-slot:activator="{ props }">
-          <v-list-item
+                <v-btn color="grey-lighten-5" min-width="100" size="small" v-bind="props">{{contract}}</v-btn>
-              v-for="(item, idx) in selectCoins"
+              </template>
-              :key="idx"
+              <v-list v-model="contract">
-              :value="item.title"
+                <v-list-item
-              @click="() => {
+                    v-for="(item, idx) in selectCoins"
+                    :key="idx"
+                    :value="item.title"
+                    @click="() => {
                 socket.send(JSON.stringify({'type':'unsubscribe', 'channel': contract, 'time': time}))
                 contract = item.title
               }"
-          >
+                >
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item>
+                </v-list-item>
-        </v-list>
+              </v-list>
-      </v-menu>
+            </v-menu>
-      <v-menu>
+            <v-menu>
-        <template v-slot:activator="{ props }">
+              <template v-slot:activator="{ props }">
-          <v-btn color="grey-lighten-5" min-width="50" size="small" v-bind="props">{{time}}</v-btn>
+                <v-btn color="grey-lighten-5" min-width="50" size="small" v-bind="props">{{time}}</v-btn>
-        </template>
+              </template>
-        <v-list v-model="time">
+              <v-list v-model="time">
-          <v-list-item
+                <v-list-item
-              v-for="(item, idx) in selectTimes"
+                    v-for="(item, idx) in selectTimes"
-              :key="idx"
+                    :key="idx"
-              :value="item.title"
+                    :value="item.title"
-              @click="() => {
+                    @click="() => {
                 socket.send(JSON.stringify({'type':'unsubscribe', 'channel': contract, 'time': time}))
                 time = item.title
               }"
-          >
+                >
-            <v-list-item-title>{{ item.title }}</v-list-item-title>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
-          </v-list-item>
+                </v-list-item>
-        </v-list>
+              </v-list>
-      </v-menu>
+            </v-menu>
-
+          </div>
+          <LWChart
+              :type="chartType"
+              :data="candleTick"
+              :ema="ema"
+              :macd="macd"
+              :bb="bb"
+              :rsi="rsi"
+              :autosize="true"
+              :chart-options="chartOptions"
+              :ema-options="emaLineOptions"
+              :candle-options="candleOptions"
+              :macd-line-options="macdLineOptions"
+              :macd-signal-options="macdSignalOptions"
+              :macd-histogram-options="macdHistogramOptions"
+              :lower-bb-options="lowerBbOptions"
+              :middle-bb-options="middleBbOptions"
+              :upper-bb-options="upperBbOptions"
+              :rsi-line-options="rsiLineOptions"
+              :lazyLock="lazyLock"
+              @lazyLoad="lazyLoad"
+              @mouseMove="mouseMove"
+              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>
-    <div class="chart-container" v-if="candleTick !== undefined">
+  </v-container>
-      <LWChart
-          :type="chartType"
-          :data="candleTick"
-          :ema="ema"
-          :macd="macd"
-          :bb="bb"
-          :rsi="rsi"
-          :autosize="true"
-          :chart-options="chartOptions"
-          :ema-options="emaLineOptions"
-          :candle-options="candleOptions"
-          :macd-line-options="macdLineOptions"
-          :macd-signal-options="macdSignalOptions"
-          :macd-histogram-options="macdHistogramOptions"
-          :lower-bb-options="lowerBbOptions"
-          :middle-bb-options="middleBbOptions"
-          :upper-bb-options="upperBbOptions"
-          :rsi-line-options="rsiLineOptions"
-          :lazyLock="lazyLock"
-          @lazyLoad="lazyLoad"
-          @mouseMove="mouseMove"
-          ref="lwChart"
-      />
-      <div class="ohlc-info" v-html="positionData"></div>
-
-    </div>
-  </div>
 </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}