Merge pull request #36 from ibiding/trade

Kline data

src/libs/osmos.js

@@ -1,3 +1,10 @@
+/*
+ * @Description: file
+ * @Autor: dingyiming
+ * @Date: 2021-11-22 21:20:10
+ * @LastEditors: dingyiming
+ * @LastEditTime: 2021-11-23 11:19:51
+ */
 import fetch from 'node-fetch'
 import { getLocalChains } from './data/data'
 
@@ -15,20 +22,31 @@ export default class OsmosAPI {
   async getOHCL4Pairs(from, to) {
     this.exe_time = ''
     return Promise.all(
-      [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=7`).then(res => res.json()),
+      [fetch(`https://api.coingecko.com/api/v3/coins/${from}/ohlc?vs_currency=usd&days=1`).then(res => res.json()),
-        fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=7`).then(res => res.json())],
+        fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=1`).then(res => res.json())],
     ).then(ohlc => {
-      const output = []
       console.log(ohlc)
+      const output = []
       ohlc[0].forEach((e, i) => {
-        console.log(e, i, ohlc[1][i])
         const price = [e[0]]
         for (let j = 1; j <= 4; j += 1) {
-          price.push(e[j] / ohlc[1][i][j])
+          price.push(e[j] / ohlc?.[1]?.[i]?.[j])
         }
         output.push(price)
       })
-      return output
+      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],
+        })
+      }
+      return result
     })
   }
 

src/views/OsmosisTrade.vue

@@ -61,7 +61,7 @@
               <div>-</div>
             </div>
           </div>
-          <Kline />
+          <Kline :list="klineData" />
         </b-card>
       </b-col>
       <b-col
@@ -109,6 +109,7 @@ export default {
         { pair: 'ATOM/OSMO' },
         { pair: 'ATOM/OSMO' },
       ],
+      klineData: [],
     }
   },
   computed: {
@@ -127,9 +128,13 @@ export default {
     const { base, target } = this.$route.params
     this.init(base, target)
     // 所有方法添加到 $http.osmosis
-    this.$http.osmosis.getOHCL4Pairs(this.$http.osmosis.getCoinGeckoId(this.base), this.$http.osmosis.getCoinGeckoId(this.target)).then(data => {
+    this.$http.osmosis.getOHCL4Pairs(
-      console.log(data)
+      this.$http.osmosis.getCoinGeckoId(base),
-    })
+      this.$http.osmosis.getCoinGeckoId(target),
+    )
+      .then(data => {
+        this.klineData = data
+      })
   },
   beforeRouteUpdate(to, from, next) {
     const { base, target } = to.params

src/views/components/kline/KlineTheme.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+// 白色主题
+export const TRADINGVIEW_THEME_LIGHT = {
+  bg: '#fff',
+  crosshair: '#888888',
+  short: '#ea0070',
+  shortFill: '#ea0070',
+  long: '#70a800',
+  longFill: '#70a800',
+  cta: '#FBFBFB',
+  ctaHighlight: '#F5F5F5',
+  alert: '#FFD506',
+  category: 'light',
+  grid: '#EFF3F6',
+  lineColor: '#555',
+  textColor: '#999',
+  maLine: '#f0b90b',
+  ma1: '#ffc200',
+  ma2: '#6600cc',
+  ma3: '#cc0066',
+};
+
+// 黑色主题
+export const TRADINGVIEW_THEME_DARK = {
+  bg: '#283046',
+  grid: '#333',
+  lineColor: '#28343C',
+  short: '#ea5455',
+  shortFill: '#ea5455',
+  long: '#28c76f',
+  longFill: '#28c76f',
+  crosshair: '#626c73',
+  cta: '#363D52',
+  ctaHighlight: '#414A67',
+  alert: '#FFD506',
+  category: 'dark',
+  textColor: '#999',
+  maLine: '#f5bc00',
+  ma1: '#ffc200',
+  ma2: '#ff00ff',
+  ma3: '#cc0066',
+};

src/views/components/kline/datafeed.js

@@ -46,7 +46,7 @@ class DataFeeds {
   onReady(callback) {
     const defaultConfiguration = {
       symbols_type: [],
-      supported_resolutions: ['1', '5', '15', '30', '60', '240', '1D', '1M'],
+      supported_resolutions: ['30', '240', '1D'],
       supports_marks: true,
       supports_timescale_marks: false,
       supports_time: false,
@@ -121,7 +121,7 @@ class DataFeeds {
       has_empty_bars: true,
       description: '',
       has_intraday: true,
-      supported_resolutions: ['1', '5', '15', '30', '60', '120', '240', '360', '1D'],
+      supported_resolutions: ['30','240', '1D'],
       pricescale: 100000000, // 价格精度
       volume_precision: 3, // 数量精度
       symbol: symbolName,

src/views/components/kline/index.vue

@@ -10,6 +10,7 @@
 import pako from 'pako'
 import { widget, version } from './charting_library/charting_library'
 import DataFeeds from './datafeed'
+import { TRADINGVIEW_THEME_LIGHT, TRADINGVIEW_THEME_DARK } from './KlineTheme';
 
 const toDouble = time => {
   if (String(time).length < 2) return `0${time}`
@@ -17,8 +18,15 @@ const toDouble = time => {
 }
 
 export default {
+  props: {
+    list: [],
+  },
+  data() {
+    return {
+      themeLocal: 'dark'
+    }
+  },
   mounted() {
-    console.log(version())
 
     const store = {
       ws: new WebSocket('wss://api.huobipro.com/ws'),
@@ -49,26 +57,27 @@ export default {
               volume: data.amount,
             })
           }
-
+          console.log(this.list);
-          store.onDataCallback(datas, { noData: !datas.length })
+          store.onDataCallback(this.list, { noData: !this.list.length })
         }
 
-        if (res.tick) {
+        // if (res.tick) {
-          const data = res.tick
+        //   const data = res.tick
 
-          store.onRealTimeCallback({
+        //   store.onRealTimeCallback({
-            time: data.id * 1000,
+        //     time: data.id * 1000,
-            volume: data.amount,
+        //     volume: data.amount,
-            close: data.close,
+        //     close: data.close,
-            open: data.open,
+        //     open: data.open,
-            high: data.high,
+        //     high: data.high,
-            low: data.low,
+        //     low: data.low,
-          })
+        //   })
-        }
+        // }
       }
 
       reader.readAsArrayBuffer(e.data)
     }
+    const tradingViewStyle = (this.themeLocal === 'dark' ? TRADINGVIEW_THEME_DARK : TRADINGVIEW_THEME_LIGHT);
 
     const tv = new widget({
       debug: false,
@@ -85,34 +94,79 @@ export default {
       datafeed: new DataFeeds(store),
       theme: 'Dark',
       favorites: {
-        intervals: ['1', '5', '15', '30', '60', '240', '1D'],
+        intervals: ['30', '240', '1D'],
-      },
+      },  
-      customFormatters: {
-        timeFormatter: {
-          format: date => {
-            const _format_str = '%h:%m'
-            return _format_str.replace('%h', toDouble(date.getUTCHours()), 2).replace('%m', toDouble(date.getUTCMinutes()), 2).replace('%s', date.getUTCSeconds(), 2)
-          },
-        },
-        dateFormatter: {
-          format: date => `${date.getUTCFullYear()}-${toDouble(date.getUTCMonth() + 1)}-${toDouble(date.getUTCDate())}`,
-        },
-      },
       disabled_features: [ // 禁用功能
-        'header_symbol_search',
-        'symbol_search_hot_key',
-        'header_compare',
-        'header_undo_redo',
-        'header_screenshot',
         'volume_force_overlay',
+        'left_toolbar',
+        'timeframes_toolbar',
+        'header_symbol_search',
+        'header_compare',
+        // 'header_fullscreen_button',
+        'header_widget',
+        // 'use_localstorage_for_settings',
+        'save_chart_properties_to_local_storage',
+        // 'header_chart_type',
+        // 'display_market_status',
+        'symbol_search_hot_key',
+        'compare_symbol',
+        'border_around_the_chart',
+        'remove_library_container_border',
+        'symbol_info',
+        // 'header_interval_dialog_button',
+        // 'show_interval_dialog_on_key_press',
+        'volume_force_overlay',
+        // 'header_resolutions',
+        // 'legend_context_menu',
+        // new
+        'symbol_info',
+        'pane_context_menu',
       ],
       enabled_features: [ // 启用的功能
-        'dont_show_boolean_study_arguments', // 是否隐藏指标参数
+        'hide_left_toolbar_by_default',
-        'hide_last_na_study_output', // 隐藏最后一次指标输出
+        'pane_context_menu',
-        'same_data_requery',
+        'hide_last_na_study_output',
-        'side_toolbar_in_fullscreen_mode',
+        'dont_show_boolean_study_arguments',
-        'adaptive_logo',
       ],
+
+      overrides: {
+        'paneProperties.background': tradingViewStyle.bg,
+        'symbolWatermarkProperties.transparency': 85,
+        'scalesProperties.backgroundColor': '#151a1e',
+        'scalesProperties.textColor': '#888',
+
+        'paneProperties.vertGridProperties.color': tradingViewStyle.grid,
+        'paneProperties.horzGridProperties.color': tradingViewStyle.grid,
+        'paneProperties.crossHairProperties.color':
+          tradingViewStyle.crosshair,
+        'scalesProperties.lineColor': tradingViewStyle.lineColor,
+        'symbolWatermarkProperties.color': 'rgba(0, 0, 0, 0)',
+
+        'mainSeriesProperties.style': 1,
+
+        //  Candles styles
+        'mainSeriesProperties.candleStyle.upColor': tradingViewStyle.long,
+        'mainSeriesProperties.candleStyle.downColor': tradingViewStyle.short,
+        'mainSeriesProperties.candleStyle.drawWick': true,
+        'mainSeriesProperties.candleStyle.drawBorder': true,
+        'mainSeriesProperties.candleStyle.borderColor': '#C400CB',
+        'mainSeriesProperties.candleStyle.borderUpColor':
+          tradingViewStyle.long,
+        'mainSeriesProperties.candleStyle.borderDownColor':
+          tradingViewStyle.short,
+        'mainSeriesProperties.candleStyle.wickUpColor': tradingViewStyle.long,
+        'mainSeriesProperties.candleStyle.wickDownColor':
+          tradingViewStyle.short,
+
+        'study_Overlay@tv-basicstudies.barStyle.upColor': 'blue',
+        'study_Overlay@tv-basicstudies.barStyle.downColor': 'blue',
+
+        'study_Overlay@tv-basicstudies.lineStyle.color': 'blue',
+
+        'study_Overlay@tv-basicstudies.areaStyle.color1': 'blue',
+        'study_Overlay@tv-basicstudies.areaStyle.color2': 'blue',
+        'study_Overlay@tv-basicstudies.areaStyle.linecolor': 'blue',
+      },
     })
 
     tv.onChartReady(() => {
@@ -134,5 +188,4 @@ export default {
 </script>
 
 <style scoped>
-
 </style>