Untitled

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;`;
};