rsi 추가

2026-03-19 15:55:03 +09:00 · 2025-08-25 20:20:37 +09:00
parent 58c60d0f3c
commit a339040402
2 changed files with 104 additions and 70 deletions
--- a/src/App.vue
+++ b/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,
-  height: height,
+  // width: 800,
+  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">
-    <div class="d-flex justify-content-center">
-      <v-menu>
-        <template v-slot:activator="{ props }">
-          <v-btn color="grey-lighten-5" min-width="100" size="small" v-bind="props">{{contract}}</v-btn>
-        </template>
-        <v-list v-model="contract">
-          <v-list-item
-              v-for="(item, idx) in selectCoins"
-              :key="idx"
-              :value="item.title"
-              @click="() => {
+  <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 }">
+                <v-btn color="grey-lighten-5" min-width="100" size="small" v-bind="props">{{contract}}</v-btn>
+              </template>
+              <v-list v-model="contract">
+                <v-list-item
+                    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>
-        </v-list>
-      </v-menu>
-      <v-menu>
-        <template v-slot:activator="{ props }">
-          <v-btn color="grey-lighten-5" min-width="50" size="small" v-bind="props">{{time}}</v-btn>
-        </template>
-        <v-list v-model="time">
-          <v-list-item
-              v-for="(item, idx) in selectTimes"
-              :key="idx"
-              :value="item.title"
-              @click="() => {
+                >
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+            <v-menu>
+              <template v-slot:activator="{ props }">
+                <v-btn color="grey-lighten-5" min-width="50" size="small" v-bind="props">{{time}}</v-btn>
+              </template>
+              <v-list v-model="time">
+                <v-list-item
+                    v-for="(item, idx) in selectTimes"
+                    :key="idx"
+                    :value="item.title"
+                    @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>
-        </v-list>
-      </v-menu>
-
+                >
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </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">
-      <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>
+  </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>
--- a/src/utils/sig.ts
+++ b/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}