From 475b9edf8042bc5ee1547c5160733b4f3f07f3ea Mon Sep 17 00:00:00 2001
From: Lu Ken <bluewish.ken.lu@live.cn>
Date: Mon, 23 Dec 2024 22:59:39 +0800
Subject: [PATCH] enable the asset select function (#10)

Signed-off-by: Lu Ken <bluewish.ken.lu@live.cn>
---
 src/GenTradeAgent/src/main/data.ts            | 27 +++++++--
 src/GenTradeAgent/src/main/index.ts           |  2 +-
 .../src/components/TradingChatAgent.vue       | 12 ++--
 .../src/components/TradingDashboard.vue       | 43 ++++++++++----
 .../renderer/src/components/TradingMain.vue   | 57 +++++++++++++++----
 src/GenTradeAgent/src/renderer/src/const.ts   | 17 ++++++
 src/GenTradeAgent/src/renderer/src/main.ts    |  3 +-
 7 files changed, 126 insertions(+), 35 deletions(-)
 create mode 100644 src/GenTradeAgent/src/renderer/src/const.ts

diff --git a/src/GenTradeAgent/src/main/data.ts b/src/GenTradeAgent/src/main/data.ts
index 0e32374..1061112 100644
--- a/src/GenTradeAgent/src/main/data.ts
+++ b/src/GenTradeAgent/src/main/data.ts
@@ -4,7 +4,6 @@
 import { readFileSync } from 'fs'
 import { join } from 'path'
 import { parse } from 'csv-parse'
-
 interface ohlcvData {
   time: number | string
   open: number | string
@@ -17,7 +16,7 @@ export class LocalStore {
   private rootDir: string
   private cryptoAssets: object | null = null
   private stockUSAssets: object | null = null
-  private ohlcBTC_1h: ohlcvData[] = []
+  private ohlcDB: { [assetName: string]: { [timeFrame: string]: ohlcvData[] } } = {}
   public constructor(cacheDir: string) {
     this.rootDir = cacheDir
   }
@@ -70,8 +69,24 @@ export class LocalStore {
   public init(): boolean {
     this.cryptoAssets = this.loadJsonData(join(this.rootDir, 'Binance/crypto_assets.json'))
     this.stockUSAssets = this.loadJsonData(join(this.rootDir, 'StockUS/stock_us_ticker.json'))
-    this.loadCsvData(join(this.rootDir, 'Binance/btc_usdt-1hour.csv'), this.ohlcBTC_1h)
-    // setTimeout(() => console.log(this.ohlcBTC_1h), 200)
+    const arr = ['btc', 'msft']
+    arr.forEach((item: string) => {
+      this.ohlcDB[item] = {
+        '1h': [],
+        '1d': [],
+        '1w': [],
+        '1M': []
+      }
+    })
+    this.loadCsvData(join(this.rootDir, 'Binance/btc_usdt-1hour.csv'), this.ohlcDB['btc']['1h'])
+    this.loadCsvData(join(this.rootDir, 'Binance/btc_usdt-1mon.csv'), this.ohlcDB['btc']['1M'])
+    this.loadCsvData(join(this.rootDir, 'Binance/btc_usdt-1day.csv'), this.ohlcDB['btc']['1d'])
+    this.loadCsvData(join(this.rootDir, 'Binance/btc_usdt-1week.csv'), this.ohlcDB['btc']['1w'])
+
+    this.loadCsvData(join(this.rootDir, 'StockUS/msft-1hour.csv'), this.ohlcDB['msft']['1h'])
+    this.loadCsvData(join(this.rootDir, 'StockUS/msft-1mon.csv'), this.ohlcDB['msft']['1M'])
+    this.loadCsvData(join(this.rootDir, 'StockUS/msft-1day.csv'), this.ohlcDB['msft']['1d'])
+    this.loadCsvData(join(this.rootDir, 'StockUS/msft-1week.csv'), this.ohlcDB['msft']['1w'])
     return true
   }
 
@@ -83,7 +98,7 @@ export class LocalStore {
     return this.stockUSAssets
   }
 
-  public getOhlcvBTC(): ohlcvData[] {
-    return this.ohlcBTC_1h
+  public getOhlcvDB(): { [assetName: string]: { [timeFrame: string]: ohlcvData[] } } {
+    return this.ohlcDB
   }
 }
diff --git a/src/GenTradeAgent/src/main/index.ts b/src/GenTradeAgent/src/main/index.ts
index f0da41f..8403fd9 100644
--- a/src/GenTradeAgent/src/main/index.ts
+++ b/src/GenTradeAgent/src/main/index.ts
@@ -54,7 +54,7 @@ app.whenReady().then(() => {
   ipcMain.on('loadCache', () => store.init())
   ipcMain.handle('getCryptoAssets', () => store.getCryptoAssets())
   ipcMain.handle('getStockUSAssets', () => store.getStockUSAssets())
-  ipcMain.handle('getOhlcvBTC', () => store.getOhlcvBTC())
+  ipcMain.handle('getOhlcvDB', () => store.getOhlcvDB())
 
   createWindow()
 
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue b/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
index e0251d8..143e130 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue
@@ -38,12 +38,12 @@ adoption and acceptance of digital assets worldwide.`)
 const prompt = ref('')
 
 onMounted(() => {
-  window.electron.ipcRenderer.invoke('getCryptoAssets').then((response) => {
-    //console.log(response)
-    console.log(Object.keys(response))
-    //placeholder_output.value = Object.keys(response).toString
-    //placeholder_output.value = JSON.stringify(response)
-  })
+  // window.electron.ipcRenderer.invoke('getCryptoAssets').then((response) => {
+  //   //console.log(response)
+  //   //console.log(Object.keys(response))
+  //   //placeholder_output.value = Object.keys(response).toString
+  //   //placeholder_output.value = JSON.stringify(response)
+  // })
 })
 
 const handleInput = (v: string) => {
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue b/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
index d2534df..c7f11bc 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue
@@ -6,11 +6,40 @@
 
 <script setup lang="ts">
 import { vResizeObserver } from '@vueuse/components'
-import { onMounted } from 'vue'
+import { onMounted, inject, Ref, watch, ref } from 'vue'
 import { createChart, IChartApi, TickMarkType } from 'lightweight-charts'
+import type { ohlcvData } from '@renderer/const';
 
 let chartObj: IChartApi | null = null
 let chartElement: HTMLElement | null = null
+let candlestickSeries
+let ohlcvDb:{ [assetName: string]: { [timeFrame: string]: ohlcvData[] } } | null = null
+
+const currentAsset = inject<Ref<string>>('currentAsset', ref('btc'))
+const currentTimeFrame = inject<Ref<string>>('currentTimeFrame', ref('1h'))
+
+window.electron.ipcRenderer.invoke('getOhlcvDB').then((response) => {
+  ohlcvDb = response
+  if (ohlcvDb) {
+    candlestickSeries.setData(ohlcvDb[currentAsset.value][currentTimeFrame.value])
+  }
+})
+
+watch(currentAsset, (newValue, oldValue) => {
+  console.log(`The state changed from ${oldValue} to ${newValue}`)
+  console.log(ohlcvDb)
+  if (ohlcvDb) {
+    candlestickSeries.setData(ohlcvDb[newValue][currentTimeFrame.value])
+  }
+})
+
+watch(currentTimeFrame, (newValue, oldValue) => {
+  console.log(`The state changed from ${oldValue} to ${newValue}`)
+  console.log(ohlcvDb)
+  if (ohlcvDb) {
+    candlestickSeries.setData(ohlcvDb[currentAsset.value][newValue])
+  }
+})
 
 const resizeHandler = () => {
   if (chartElement) {
@@ -22,10 +51,6 @@ const resizeHandler = () => {
 }
 
 onMounted(() => {
-  window.electron.ipcRenderer.invoke('getCryptoAssets').then((response) => {
-    console.log(response)
-  })
-
   const chartOptions = {
     layout: {
       textColor: 'black',
@@ -76,18 +101,14 @@ onMounted(() => {
         text: 'GenAI Trading Agent (Lu Ken)'
       }
     })
-    const candlestickSeries = chartObj.addCandlestickSeries({
+    candlestickSeries = chartObj.addCandlestickSeries({
       upColor: '#26a69a',
       downColor: '#ef5350',
       borderVisible: false,
       wickUpColor: '#26a69a',
       wickDownColor: '#ef5350'
     })
-
-    window.electron.ipcRenderer.invoke('getOhlcvBTC').then((response) => {
-      console.log(response)
-      candlestickSeries.setData(response)
-    })
+    console.log(candlestickSeries)
 
     chartObj.timeScale().fitContent()
     window.addEventListener('resize', () => resizeHandler())
diff --git a/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue b/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
index 13fddf4..a92d4fc 100644
--- a/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
+++ b/src/GenTradeAgent/src/renderer/src/components/TradingMain.vue
@@ -4,10 +4,18 @@
       <div class="pane-dashboard-title">
         <n-space horizontal>
           <n-select
-            v-model:value="selectedValue"
+            v-model:value="currentAsset"
             filterable
-            placeholder="Please select a song"
-            :options="options"
+            placeholder="Please select an asset"
+            :options="optionsAsset"
+            size="tiny"
+            menu-size="tiny"
+            class="title-item"
+          />
+          <n-select
+            v-model:value="currentTimeFrame"
+            filterable
+            :options="optionsTimeFrame"
             size="tiny"
             menu-size="tiny"
             class="title-item"
@@ -28,15 +36,44 @@ import TradingDashboard from './TradingDashboard.vue'
 import 'splitpanes/dist/splitpanes.css'
 import TradingChatAgent from './TradingChatAgent.vue'
 import { NSpace, NSelect } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, provide } from 'vue'
 
-const selectedValue = ref(null)
-const options = [
+const currentAsset = ref('')
+provide('currentAsset', currentAsset)
+const currentTimeFrame = ref('1h')
+provide('currentTimeFrame', currentTimeFrame)
+
+const optionsAsset = ref([{}])
+const optionsTimeFrame = ref([
+  {
+    label: "1h",
+    value: "1h"
+  },
+  {
+    label: "1d",
+    value: "1d"
+  },
   {
-    label: 'BTC',
-    value: 'BTC_USDT'
+    label: "1w",
+    value: "1w"
+  },
+  {
+    label: "1M",
+    value: "1M"
   }
-]
+])
+window.electron.ipcRenderer.invoke('getOhlcvDB').then((response) => {
+  Object.keys(response).forEach((item) =>
+  optionsAsset.value.push({
+      label: item,
+      value: item
+    })
+  )
+  optionsAsset.value.splice(0, 1)
+
+  currentAsset.value = Object.keys(response)[0]
+  console.log(currentAsset.value)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +90,7 @@ const options = [
 }
 
 .pane-dashboard-title {
-  height: 30px;
+  height: 23px;
   margin-bottom: 2px;
 }
 
diff --git a/src/GenTradeAgent/src/renderer/src/const.ts b/src/GenTradeAgent/src/renderer/src/const.ts
new file mode 100644
index 0000000..48e8730
--- /dev/null
+++ b/src/GenTradeAgent/src/renderer/src/const.ts
@@ -0,0 +1,17 @@
+import { Ref } from 'vue'
+import type { InjectionKey } from 'vue'
+
+export interface IAsset {
+  name: string
+}
+
+export const currentAssetKey: InjectionKey<Ref<IAsset>> = Symbol()
+
+export interface ohlcvData {
+  time: number | string
+  open: number | string
+  high: number | string
+  low: number | string
+  close: number | string
+  vol: number | string
+}
diff --git a/src/GenTradeAgent/src/renderer/src/main.ts b/src/GenTradeAgent/src/renderer/src/main.ts
index 0ac3a5f..718beb5 100644
--- a/src/GenTradeAgent/src/renderer/src/main.ts
+++ b/src/GenTradeAgent/src/renderer/src/main.ts
@@ -3,4 +3,5 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.mount('#app')