From 4367b3b8cd087a17e2607a7fa739664862fd950a Mon Sep 17 00:00:00 2001
From: ding <vimdingyiming@qq.com>
Date: Thu, 25 Nov 2021 01:00:28 +0800
Subject: [PATCH] feat: tvjs

---
 src/libs/osmos.js                         | 18 +++++++-------
 src/views/OsmosisTrade.vue                | 10 +++++---
 src/views/components/tvjs/TestOverlay.vue |  3 ---
 src/views/components/tvjs/data.json       |  2 +-
 src/views/components/tvjs/index.vue       | 30 ++++++++++++++++-------
 5 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/libs/osmos.js b/src/libs/osmos.js
index 0a294eb2..c3d5385d 100644
--- a/src/libs/osmos.js
+++ b/src/libs/osmos.js
@@ -3,7 +3,7 @@
  * @Autor: dingyiming
  * @Date: 2021-11-22 21:20:10
  * @LastEditors: dingyiming
- * @LastEditTime: 2021-11-23 11:19:51
+ * @LastEditTime: 2021-11-25 00:45:16
  */
 import fetch from 'node-fetch'
 import { getLocalChains } from './data/data'
@@ -47,14 +47,14 @@ export default class OsmosAPI {
         const result = []
         for (let i = 0; i < output.length; i += 1) {
           const itemArr = output[i]
-          result.push({
-            time: itemArr[0],
-            volume: 0,
-            open: itemArr[1],
-            high: itemArr[2],
-            low: itemArr[3],
-            close: itemArr[4],
-          })
+          result.push([
+            itemArr[0],
+            itemArr[1], // open
+            itemArr[2], // high
+            itemArr[3], // low
+            itemArr[4], // close
+            0, // volume
+          ])
         }
         return result
       })
diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue
index fe24ef52..f4b2e7b2 100644
--- a/src/views/OsmosisTrade.vue
+++ b/src/views/OsmosisTrade.vue
@@ -64,8 +64,10 @@
               <div>-</div>
             </div>
           </div>
-          <div id="kline-wrap">
-            <Kline :list="klineData" />
+          <div
+            id="kline-wrap"
+          >
+            <Kline :list="klineData || []" />
           </div>
         </b-card>
       </b-col>
@@ -131,7 +133,8 @@ export default {
     },
   },
   created() {
-    const { base, target } = this.$route.params
+    const base = this.$route.params?.base || 'ATOM'
+    const target = this.$route.params?.target || 'OSMO'
     this.init(base, target)
     // 所有方法添加到 $http.osmosis
     this.$http.osmosis.getOHCL4Pairs(
@@ -139,6 +142,7 @@ export default {
       this.$http.osmosis.getCoinGeckoId(target),
     )
       .then(data => {
+        console.log(data)
         this.klineData = data
       })
   },
diff --git a/src/views/components/tvjs/TestOverlay.vue b/src/views/components/tvjs/TestOverlay.vue
index 0ed5b6a9..9b7cb63b 100644
--- a/src/views/components/tvjs/TestOverlay.vue
+++ b/src/views/components/tvjs/TestOverlay.vue
@@ -1,8 +1,5 @@
 <script>
 /* eslint-disable */
-// Spline renderer. (SMAs, EMAs, TEMAs...
-// you know what I mean)
-// TODO: make a real spline, not a bunch of lines...
 
 // Adds all necessary stuff for you.
 import { Overlay } from 'trading-vue-js'
diff --git a/src/views/components/tvjs/data.json b/src/views/components/tvjs/data.json
index eff1441a..3b8fd1a7 100644
--- a/src/views/components/tvjs/data.json
+++ b/src/views/components/tvjs/data.json
@@ -426,7 +426,7 @@
         "grid": {}
     },
     "onchart": [{
-        "name": "TestOverlay, 50",
+        "name": "ATOM / OSMO",
         "type": "TestOverlay",
         "data": [
             [1587272400000, 7131],
diff --git a/src/views/components/tvjs/index.vue b/src/views/components/tvjs/index.vue
index eb583dc0..4d7ec6f2 100644
--- a/src/views/components/tvjs/index.vue
+++ b/src/views/components/tvjs/index.vue
@@ -3,6 +3,7 @@
     :data="chart"
     :width="width"
     :height="height"
+    :toolbar="false"
     :color-back="colors.colorBack"
     :color-grid="colors.colorGrid"
     :color-text="colors.colorText"
@@ -16,24 +17,35 @@ import Data from './data.json'
 export default {
   name: 'App',
   components: { TradingVue },
+  props: {
+    list: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       chart: Data,
-      width: document.getElementById('kline-area')?.offsetWidth,
-      height: window.innerHeight,
+      width: 700,
+      height: 600,
       colors: {
-        colorBack: '#fff',
-        colorGrid: '#eee',
-        colorText: '#333',
+        colorBack: '#283046', // '#fff',
+        colorGrid: '#333', // '#eee',
+        colorText: '#fff',
       },
     }
   },
   mounted() {
-    window.addEventListener('resize', this.onResize)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
+    Data.chart.data = this.list
+    this.chart = Data
   },
+  // mounted() {
+  //   window.addEventListener('resize', this.onResize)
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener('resize', this.onResize)
+  // },
   methods: {
     onResize() {
       this.width = document.getElementById('kline-area')?.offsetWidth