forked from cerc-io/cosmos-explorer
ding
GitHub
commit
acdf1e00f1
@ -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/${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 => {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -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 => {
|
||||
console.log(data)
|
||||
})
|
||||
this.$http.osmosis.getOHCL4Pairs(
|
||||
this.$http.osmosis.getCoinGeckoId(base),
|
||||
this.$http.osmosis.getCoinGeckoId(target),
|
||||
)
|
||||
.then(data => {
|
||||
this.klineData = data
|
||||
})
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
const { base, target } = to.params
|
||||
|
||||
42
src/views/components/kline/KlineTheme.js
Normal file
42
src/views/components/kline/KlineTheme.js
Normal file
@ -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',
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
store.onDataCallback(datas, { noData: !datas.length })
|
||||
console.log(this.list);
|
||||
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)
|
||||
}
|
||||
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'],
|
||||
},
|
||||
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())}`,
|
||||
},
|
||||
},
|
||||
intervals: ['30', '240', '1D'],
|
||||
},
|
||||
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(() => {
|
||||
@ -134,5 +188,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user