From 6c2a276a0fa3f4ec9e36323c036ee91e8001f095 Mon Sep 17 00:00:00 2001 From: ding Date: Mon, 22 Nov 2021 22:56:54 +0800 Subject: [PATCH 1/4] feat: kline style --- src/views/components/kline/KlineTheme.js | 42 ++++++++++++ src/views/components/kline/index.vue | 86 ++++++++++++++++++++---- 2 files changed, 116 insertions(+), 12 deletions(-) create mode 100644 src/views/components/kline/KlineTheme.js diff --git a/src/views/components/kline/KlineTheme.js b/src/views/components/kline/KlineTheme.js new file mode 100644 index 00000000..4f3a4f5d --- /dev/null +++ b/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', +}; diff --git a/src/views/components/kline/index.vue b/src/views/components/kline/index.vue index f13cd421..8c2df823 100644 --- a/src/views/components/kline/index.vue +++ b/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,6 +18,11 @@ const toDouble = time => { } export default { + data() { + return { + themeLocal: 'dark' + } + }, mounted() { console.log(version()) @@ -69,6 +75,7 @@ export default { reader.readAsArrayBuffer(e.data) } + const tradingViewStyle = (this.themeLocal === 'dark' ? TRADINGVIEW_THEME_DARK : TRADINGVIEW_THEME_LIGHT); const tv = new widget({ debug: false, @@ -85,7 +92,7 @@ export default { datafeed: new DataFeeds(store), theme: 'Dark', favorites: { - intervals: ['1', '5', '15', '30', '60', '240', '1D'], + intervals: ['30', '240', '1D'], }, customFormatters: { timeFormatter: { @@ -99,20 +106,75 @@ export default { }, }, 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_last_na_study_output', // 隐藏最后一次指标输出 - 'same_data_requery', - 'side_toolbar_in_fullscreen_mode', - 'adaptive_logo', + 'hide_left_toolbar_by_default', + 'pane_context_menu', + 'hide_last_na_study_output', + 'dont_show_boolean_study_arguments', ], + + 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(() => { From c299a19c4158b5eaf66cc4067ab1be1b4a954561 Mon Sep 17 00:00:00 2001 From: ding Date: Tue, 23 Nov 2021 10:26:28 +0800 Subject: [PATCH 2/4] feat: kline data --- src/libs/osmos.js | 17 +++++++++++++++-- src/views/OsmosisTrade.vue | 13 +++++++++---- src/views/components/kline/datafeed.js | 4 ++-- src/views/components/kline/index.vue | 6 ++++-- 4 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/libs/osmos.js b/src/libs/osmos.js index 8a6f403b..c0094085 100644 --- a/src/libs/osmos.js +++ b/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 10:25:41 + */ import fetch from 'node-fetch' import { getLocalChains } from './data/data' @@ -19,15 +26,21 @@ export default class OsmosAPI { fetch(`https://api.coingecko.com/api/v3/coins/${to}/ohlc?vs_currency=usd&days=7`).then(res => res.json())], ).then(ohlc => { const output = [] - console.log(ohlc) 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]) } output.push(price) }) + const result = [] + for (let i = 0; i < output.length; i += 1) { + const itemArr = output[i] + result.push({ + time: itemArr[0], + volume: 0, + }) + } return output }) } diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue index 9cf3d182..6ecf6eaf 100644 --- a/src/views/OsmosisTrade.vue +++ b/src/views/OsmosisTrade.vue @@ -61,7 +61,7 @@
-
- + { - console.log(data) - }) + this.$http.osmosis.getOHCL4Pairs( + this.$http.osmosis.getCoinGeckoId(this.base), + this.$http.osmosis.getCoinGeckoId(this.target), + ) + .then(data => { + this.klineData = data + }) }, beforeRouteUpdate(to, from, next) { const { base, target } = to.params diff --git a/src/views/components/kline/datafeed.js b/src/views/components/kline/datafeed.js index 307759a5..5611e04a 100644 --- a/src/views/components/kline/datafeed.js +++ b/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, diff --git a/src/views/components/kline/index.vue b/src/views/components/kline/index.vue index 8c2df823..d09797dc 100644 --- a/src/views/components/kline/index.vue +++ b/src/views/components/kline/index.vue @@ -18,13 +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'), @@ -55,7 +57,7 @@ export default { volume: data.amount, }) } - + console.log(this.list); store.onDataCallback(datas, { noData: !datas.length }) } From e2aef3912c9fbeec1cfc45d82ccee68c92f6c454 Mon Sep 17 00:00:00 2001 From: ding Date: Tue, 23 Nov 2021 11:21:07 +0800 Subject: [PATCH 3/4] feat: kline data --- src/libs/osmos.js | 15 ++++++++++----- src/views/OsmosisTrade.vue | 4 ++-- src/views/components/kline/index.vue | 24 ++++++++++++------------ 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/libs/osmos.js b/src/libs/osmos.js index c0094085..3b19c790 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 10:25:41 + * @LastEditTime: 2021-11-23 11:19:51 */ import fetch from 'node-fetch' import { getLocalChains } from './data/data' @@ -22,14 +22,15 @@ 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/${to}/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=1`).then(res => res.json())], ).then(ohlc => { + console.log(ohlc) const output = [] ohlc[0].forEach((e, 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) }) @@ -39,9 +40,13 @@ export default class OsmosAPI { result.push({ time: itemArr[0], volume: 0, + open: itemArr[1], + high: itemArr[2], + low: itemArr[3], + close: itemArr[4], }) } - return output + return result }) } diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue index 6ecf6eaf..f6c6a09e 100644 --- a/src/views/OsmosisTrade.vue +++ b/src/views/OsmosisTrade.vue @@ -129,8 +129,8 @@ export default { this.init(base, target) // 所有方法添加到 $http.osmosis this.$http.osmosis.getOHCL4Pairs( - this.$http.osmosis.getCoinGeckoId(this.base), - this.$http.osmosis.getCoinGeckoId(this.target), + this.$http.osmosis.getCoinGeckoId(base), + this.$http.osmosis.getCoinGeckoId(target), ) .then(data => { this.klineData = data diff --git a/src/views/components/kline/index.vue b/src/views/components/kline/index.vue index d09797dc..856db4c3 100644 --- a/src/views/components/kline/index.vue +++ b/src/views/components/kline/index.vue @@ -58,21 +58,21 @@ export default { }) } console.log(this.list); - store.onDataCallback(datas, { noData: !datas.length }) + store.onDataCallback(this.list, { noData: !this.list.length }) } - if (res.tick) { - const data = res.tick + // if (res.tick) { + // const data = res.tick - store.onRealTimeCallback({ - time: data.id * 1000, - volume: data.amount, - close: data.close, - open: data.open, - high: data.high, - low: data.low, - }) - } + // store.onRealTimeCallback({ + // time: data.id * 1000, + // volume: data.amount, + // close: data.close, + // open: data.open, + // high: data.high, + // low: data.low, + // }) + // } } reader.readAsArrayBuffer(e.data) From c4b4f867414af90490e27429611f1c4f70f6dbbc Mon Sep 17 00:00:00 2001 From: ding Date: Tue, 23 Nov 2021 11:25:44 +0800 Subject: [PATCH 4/4] feat: kline data --- src/views/components/kline/index.vue | 131 ++++++++++++--------------- 1 file changed, 60 insertions(+), 71 deletions(-) diff --git a/src/views/components/kline/index.vue b/src/views/components/kline/index.vue index 856db4c3..aa3fff93 100644 --- a/src/views/components/kline/index.vue +++ b/src/views/components/kline/index.vue @@ -95,88 +95,78 @@ export default { theme: 'Dark', favorites: { 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: [ // 禁用功能 + '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', + '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: [ // 启用的功能 - 'hide_left_toolbar_by_default', - 'pane_context_menu', - 'hide_last_na_study_output', - 'dont_show_boolean_study_arguments', + 'hide_left_toolbar_by_default', + 'pane_context_menu', + 'hide_last_na_study_output', + 'dont_show_boolean_study_arguments', ], - overrides: { - 'paneProperties.background': tradingViewStyle.bg, - 'symbolWatermarkProperties.transparency': 85, - 'scalesProperties.backgroundColor': '#151a1e', - 'scalesProperties.textColor': '#888', + 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)', + '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, + '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, + // 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.barStyle.upColor': 'blue', + 'study_Overlay@tv-basicstudies.barStyle.downColor': 'blue', - 'study_Overlay@tv-basicstudies.lineStyle.color': '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', - }, + 'study_Overlay@tv-basicstudies.areaStyle.color1': 'blue', + 'study_Overlay@tv-basicstudies.areaStyle.color2': 'blue', + 'study_Overlay@tv-basicstudies.areaStyle.linecolor': 'blue', + }, }) tv.onChartReady(() => { @@ -198,5 +188,4 @@ export default { \ No newline at end of file