Untitled
unknown
plain_text
21 days ago
4.9 kB
1
Indexable
Never
export const scriptsInitKlineChartSwap = ({ urlDf, wssDf, typeChart = 'candle_solid', symbol, interval, decimal = 1, lang = 'vi-VN', currencyVolume = 'VNDC', timezone = 'Asia/Ho_Chi_Minh', }) => { return `const initOnReady = function () { klinecharts.registerLocale("vi-VN", { time: "Thời gian ", open: "Mở", high: "Cao", low: "Thấp", close: "Đóng", change: "Thay đổi ", volume: "Khối lượng ", }) const chart = window.tvKlineChart = klinecharts.init('chart', { position: 'content', locale: '${lang}', unitVolume: '${currencyVolume}' === 'USDT' ? ' $' : '', timezone: '${timezone}', }) const urlDf = '${urlDf}'; const wssDf = '${wssDf}'; const symbol = '${symbol}' || 'BTCUSDT'; const tickSize = ${decimal}; const resolution = '${interval}' || '15'; const countBack = 300; const endTime = getEndTimeSwap(); const startTime = endTime - periodLengthSeconds(resolution, countBack); const theme = getTheme('${typeChart}'); let lengthData = 0; chart.setBarSpace(10) chart.setStyles(theme) chart.setPriceVolumePrecision(tickSize, 0) chart.setOffsetRightDistance(100) chart.setPaneOptions({ id: 'chart', gap: { bottom: 0.5, } }) chart.setStyles({ candle: { area: { lineSize: 2.4, lineColor: '#0068FF', value: 'close', backgroundColor: [{ offset: 0, color: 'rgba(0, 104, 255, 0.01)' }, { offset: 1, color: 'rgba(0, 104, 255, 0.2)' }] }, }, indicator: { tooltip: { showRule: 'always', showType: 'standard', showName: false, showParams: true, defaultValue: 'n/a', text: { size: 10, weight: 'normal', color: '#F6F6F6', marginTop: 6, marginRight: 8, marginBottom: 0, marginLeft: 15 } } }, grid: { show: true, horizontal: { show: true, size: 1, color: "rgba(43, 50, 71, 0.3)", style: 'solid', }, vertical: { show: true, size: 1, color: "rgba(43, 50, 71, 0.3)", style: 'solid', } }, separator: { size: 1, color: '#131825', fill: true, activeBackgroundColor: 'rgba(230, 230, 230, .15)' }, }) const room = createChannelStringSwap(symbol, resolution); const socketInstance = io(wssDf, { transports: ['websocket'], upgrade: false, reconnection: true, reconnectionDelay: 500, reconnectionDelayMax: 500, reconnectionAttempts: Infinity, }); socketInstance.on("kline", function (data) { if (data) { chart.updateData({ timestamp: data.openTime, close: parseFloat(data.close), open: parseFloat(data.open), high: parseFloat(data.max), low: parseFloat(data.min), volume: parseFloat(data.volume) }) } }); socketInstance.on("connect", function () { console.log('connect socket', room); socketInstance.emit('join', room); }); socketInstance.on("disconnect", function () { console.log('disconnect socket'); }); getBarSwap(urlDf, symbol, resolution, startTime, endTime, (data) => { emitEvent('chart_ready'); if (data && data?.length > 0 ){ chart.applyNewData(data); lengthData = data?.length; } }) chart.loadMore((timestamp) => { const newEndTime = parseInt(timestamp / 1000); const newStartTime = newEndTime - periodLengthSeconds(resolution, countBack); getBarSwap(urlDf, symbol, resolution, newStartTime, newEndTime, (data) => { if (data && data?.length > 0 && lengthData > 1) { let newData = []; if (data?.length > countBack) { newData = data.slice(0, countBack - 1); } else { newData = data; } const lastTimeStampCandle = newData[newData?.length - 1]?.timestamp; if (timestamp === lastTimeStampCandle) { const unitData = newData.slice(0, newData?.length - 2); chart.applyMoreData(unitData) lengthData = unitData.length; } if (timestamp > lastTimeStampCandle) { chart.applyMoreData(newData) lengthData = newData.length; } } }) }) }; if (document.readyState !== 'loading') { initOnReady(); } else { document.addEventListener('DOMContentLoaded', () => { initOnReady(); }); } true;`; };
Leave a Comment