feat: tvjs

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({
+          result.push([
-            time: itemArr[0],
+            itemArr[0],
-            volume: 0,
+            itemArr[1], // open
-            open: itemArr[1],
+            itemArr[2], // high
-            high: itemArr[2],
+            itemArr[3], // low
-            low: itemArr[3],
+            itemArr[4], // close
-            close: itemArr[4],
+            0, // volume
-          })
+          ])
         }
         return result
       })

src/views/OsmosisTrade.vue

@@ -64,8 +64,10 @@
               <div>-</div>
             </div>
           </div>
-          <div id="kline-wrap">
+          <div
-            <Kline :list="klineData" />
+            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
       })
   },

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'

src/views/components/tvjs/data.json

@@ -426,7 +426,7 @@
         "grid": {}
     },
     "onchart": [{
-        "name": "TestOverlay, 50",
+        "name": "ATOM / OSMO",
         "type": "TestOverlay",
         "data": [
             [1587272400000, 7131],

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,
+      width: 700,
-      height: window.innerHeight,
+      height: 600,
       colors: {
-        colorBack: '#fff',
+        colorBack: '#283046', // '#fff',
-        colorGrid: '#eee',
+        colorGrid: '#333', // '#eee',
-        colorText: '#333',
+        colorText: '#fff',
       },
     }
   },
   mounted() {
-    window.addEventListener('resize', this.onResize)
+    Data.chart.data = this.list
-  },
+    this.chart = Data
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
   },
+  // mounted() {
+  //   window.addEventListener('resize', this.onResize)
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener('resize', this.onResize)
+  // },
   methods: {
     onResize() {
       this.width = document.getElementById('kline-area')?.offsetWidth